【零基礎入門】 css學習筆記（3）選擇器與層疊性

cppprimer 發布于2019-08-29 15:43 / 2610人閱讀

摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現多次補充后代選擇器中出現的東西很靈活，可以是標簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。

一，選擇器 1，基礎選擇器

1）標簽選擇器：div{ } ，選擇的所有，而不是一個，用來描述“共性”。
2）類選擇器：.class名{ }

多個元素可以同時屬于某一個類；

一個元素可以同時屬于多個類選擇器，中間用空格隔開，類名間的順序不重

一個h3

不要去試圖用一個類名，把某個元素的所有樣式寫完。這個元素要多攜帶幾個類，共同實現這個元素的樣式。

每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用。

3）id選擇：#id名{ }
元素的id屬性，一個元素只能有一個id，頁面上不允許多個元素有相同的id。

問：到底用id還是用class？
答：盡可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以我們css層面盡量不用id，
要不然js就很別扭。另一層面，我們會認為一個有id的元素，有動態效果。

2，高級選擇器

1）后代選擇器：空格表示后代選擇器

.div1 p 就是.div1的后代所有的p。注意：是后代，并不一定是兒子；空格可以出現多次
補充：后代選擇器中出現的東西很靈活，可以是標簽，可以是class名，可以是id名
后代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什么，進行樣式改變，就要想到后代選擇器。

2）交集選擇器：沒有空格，挨著寫的
h3.special{ color:red; }
選擇的元素是同時滿足兩個條件：必須是h3標簽，然后必須有special類
交集選擇器，我們一般都是以標簽名開頭

3）并集選擇器：用，號隔開
4）兒子選擇器：用>號，IE7開始兼容，IE6不兼容。
與后代選擇器區別：子選擇器作用于第一代后代（即兒子），后代選擇器作用于所有后代。
例子：

.food>li {border:1px solid red;} //兒子選擇器

.food li {border:1px solid red;} //后代選擇器

5）下一個兄弟選擇器：用+號，表示選擇下一個兄弟；IE7開始兼容，IE6不兼容。
例子：h3+p {color: red;}

6）序選擇器：IE8開始兼容，IE6，7不兼容。

ul li:first-child{ color:red; }//選擇第一個li
ul li:last-child{ color:red; }//選擇最后一個li

二、層疊性

1，如果多個選擇器應用到同一個元素，如何確定元素究竟用哪些樣式呢？
瀏覽器是以層疊方式來確定具體使用哪一樣樣式。即哪一個選擇器更特定，就運用該選擇器對應的樣式。
2，層疊性：就是css處理沖突的能力。
3，如何計算特定性：

4）把上面三位數組合在一起當成真正的數來讀：比如100 > 010> 001，得到的特定數越大，這個規則就越特定。
4，案例：
例1：

.special2：  010             
.special1：  010          
 css文件中位置越靠后，優先級越高。因此顯示.special2的顏色

注：同一個元素，有多個類選擇器修飾，屬性描述有沖突，只與在css中類名的先后順序有關，與在標簽中類名的書寫順序無關。

例2：

#box1 .hezi2 p ：             111
div div #box3 p ：            103
div.hezi1 div.hezi2 div.hezi3 p ： 034        
 因此顯示red顏色

例3：
注：下圖中前兩個css規則不是直接描述p的樣式，因此對于p元素來說，權重為0。第三個規則直接描述p元素，權重為001。

例4：

css規則中若沒有直接描述p的規則，則使用繼承。瀏覽器會查看p元素的祖先，從它的父元素開始，嘗試找到color屬性值。
p元素的父元素為，計算其權重，該div顯示red顏色，則p為紅色

5，!important：給一個屬性提高權重。這個屬性的權重就是無窮大。
1）但在一個選擇器中，它寫在一個屬性后面，只是提升的該屬性的權重，并不會提升選擇器的權重。
2）而且它無法提升繼承的權重，該是0還是0。

GPU云服務器云服務器基礎選擇器css 零基礎入門學習零基礎入門深度學習零基礎入門學習python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113507.html

【零基礎入門】 css學習筆記（1）字體顏色樣式等

摘要：在元素中使用元素是一個元素，沒有結束標記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分數相對于字體大小指定。一、基礎介紹 1， css：cascading style sheet 層疊式樣式表2，語法：p {background-color:red...

fai1017 2019-08-30 15:53 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內往外： width:內容的寬度，而不是盒子的寬度； hei...

mrcode 2019-08-30 15:53 評論0 收藏0
CSS超全筆記（適合新手入門）

摘要：選擇器和類選擇器區別標準規定，在同一個頁面內，不允許有相同名字的對象出現，但是允許相同名字的。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。CSS CSS初識 CSS(Cascading Style Sheets) 美化樣式 CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）...

番茄西紅柿 2019-04-23 11:56 評論0 收藏0