css選擇器及其性質

2.1 標籤選擇器

經過標籤名選中元素。

語法： 標籤名 {}

無論標籤嵌套多深，均可以經過標籤名查找到。

1 p { 2  color: red; 3 } 4 <div> 5  <div> 6  <div> 7  <div> 8  <div> 9  <p>內部深層的p</p> 10  </div> 11  </div> 12  </div> 13  </div> 14 </div>

 

 

用途：清除，重置默認樣式

1 /*用途：重置，清除默認樣式*/ 2 a { 3  text-decoration: none; 4  color: #333; 5 } 6 ul { 7  /*去掉小圓點*/ 8  list-style: none; 9 }

 

2.2 id選擇器

經過id名選中元素

語法：#id名（#和id名牢牢書寫）

id名命名規則：html嚴格區分大小寫，必須以字母開頭，後面能夠有數字，下劃線，短橫。

id名是惟一的，無論是否是相同的標籤只有出現一次該id名

1 #para-_1 { 2  font-size: 100px; 3 }

 

通常狀況咱們不使用id設置樣式。

2.3 類選擇器

經過類名選中元素。

給元素添加class屬性

.類名 {}

類名命名規則和id名同樣。

 

 

同一個元素能夠被不一樣選擇器選中（id選擇器設置字號，類選擇器設置文字顏色）設置不一樣的樣式屬性，這些屬性都會加載在元素身上。

層疊性體現（疊加）：同一個元素被不一樣選擇器選中，設置不一樣的樣式，會同時加載。

 

同一個元素能夠設置多個類名，類名之間用空格隔開。

多個元素能夠同時有相同類名。

1 <p class="para box wenzi">段落</p>

 

類名特殊應用：原子類（咱們能夠將一些經常使用屬性，設置爲原子類，通常原子類只一個屬性，便於樣式設置）

1 <div class="f20 w800">1</div>

 

用途：相一樣式的元素，添加同一個類名（類名上樣式）

 

2.4 通配符

* {}

通配符能夠選中頁面上全部的標籤（包括body）。

用途：練習階段使用通配符快速清除默認樣式。

1 * { 2  padding: 0px; 3  margin: 0px; 4 }

 

1、高級選擇器

高級選擇器是在基礎選擇器上延伸

3.1 後代選擇器

經過嵌套關係進行選擇，通常經過標籤或者類選擇器肯定大範圍，在大範圍內再次選擇。

語法：每一層選擇器用空格隔開

1 div p { 2  /*選中div後代中的p*/ 3  color: red; 4 }

 

後代選擇器不但能夠選中兒子，還能夠選中孫子等全部的後代元素。

1 .box h3 { 2  font-size: 50px; 3 } 4 <div class="box"> 5  <div> 6  <div> 7  <div> 8  <h3>我是多層嵌套的h3</h3> 9  </div> 10  </div> 11  </div> 12 </div>

 

通常咱們在使用後代選擇器是，將每一層祖先補全，精確選擇。

1 /*通常要求補全每一層祖先*/ 2 .box div p { 3  font-size: 50px; 4 } 5 <div class="box"> 6  <div> 7  <p>我是p標籤</p> 8  </div> 9 </div>

 

.box p {}同樣會選中下面的結構

1 <div class="box"> 2  <div> 3  <p>我是p標籤</p> 4  </div> 5 </div> 6 <div> 7  <div class="box"> 8  <p>我是p標籤</p> 9  </div> 10 </div>

 

無論怎麼，必定在書寫選擇器時有對應的結構。

11 <div> 12  <div class="box"> 13  <p>我是p標籤</p> 14  </div> 1 </div>

1 .box div p {不能選中下面的結構} 2 <div> 3  <div class="box"> 4  <p>我是p標籤</p> 5  </div> 6 </div>

 

 

3.2 交集選擇器

同時選中兩個選擇器都具備的元素。

語法：連續書寫選擇器，不要添加任何空格（和後代選擇器進行區分）

1 p.para { 2  font-size: 50px; 3 } 4 <p class="para">p</p> 5 <p> 6  我是p  <span class="para">特殊</span> 7 </p>

 

交集選擇器能夠連續交集（選擇器能夠書寫多個）

1 /*能夠連續交集*/ 2 p.para.fs { 3  /* 4  選中元素特色同時具備下面3個選擇器： 5  p標籤 6  .para 7  .fs 8  */ 9  color: red; 10 }

 

交集選擇器能夠不是標籤選擇器開頭

1 .para.fs {}  //合法 2 #para.fs {}  //不合法，id選擇器能夠惟一選中元素

 

3.3 並集選擇器

同時設置多個選擇器相同的樣式。

語法：逗號隔開每個選擇器

1 div, h3, p { 2  font-size: 50px; 3  color: red; 4 }

 

類選擇器也能夠使用並集

1 .box, .para, .fs { 2  width: 200px; 3  height: 200px; 4  5  margin-bottom: 20px; 6 }

 

2、css性質

4.1 繼承性

css繼承性：元素能夠從祖先繼承文字屬性，不能繼承盒子屬性

祖先設置文字屬性後代元素都將繼承這些文字屬性。

1 文字屬性：color, font系列,line系列，text系列等 2 盒子屬性（不能繼承）：width,height,background系列，border,浮動，等

 

 

css一個比較好性質，能夠將一些文字屬性給祖先設置，他的後代都將繼承這些文字屬性，簡化代碼。

1 body { 2  color: #333; 3  font-family: "Arial","Microsoft Yahei","SimSun"; 4  font-size: 14px; 5 }

 

層疊性體現：繼承性

1 div { 2  width: 300px; 3  height: 300px; 4  5 }

 

4.2 css層疊性

同一個元素被不一樣選擇器選中，設置相一樣式，會如何顯示？

層疊性：同一個元素被不一樣選擇器選中，設置相一樣式，權重大的會層疊掉權重小的。

1 div class="box" id="box">盒子</div> 2 /*同一個元素被不一樣選擇器選中 div .box   #box 同時設置文字顏色，會如何渲染*/ 3 div { 4  font-size: 50px; 5  color: red; 6 } 7 #box { 8  color: blue; 9 } 10 .box { 11  color: green; 12 }

 

權重：元素選擇器針對性越強，權重就越大。

id選擇器 》類選擇器 》 標籤選擇器

1id = 255類

1類 = 255標籤

 

 

①選中元素，計算該元素的權重。

選中元素，計算權重，只須要看id數量，類的數量，標籤數量。先比較id選擇器的數量，id數量多的權重最大；若是id數量相同，比較類的數量，類的數量多的權重就大；若是類的數量還相同就比較標籤的數量，標籤數量多的權重最大；若是標籤數量還相同，直接看書寫順序，誰的樣式在最後就顯示誰的樣式。

1 .box1 .box2 #box3 p { 2  color: blue; 3  /*(1,2,1)*/ 4 } 5 /*選擇器數量都相同，後面的樣式層疊掉前面的*/ 6 #box1 .box2 .box3 p { 7  color: green; 8  /*(1,2,1)*/ 9 }

 

②元素沒有被選中，該元素權重是0.

樣式看繼承性（html結構距離近的優先渲染）就近原則

1 body { 2  font-size: 50px; 3  color: red; 4 } 5 #box1 { 6  color: blue; 7 } 8 .box3 { 9  color: green; 10 }

 

若是距離相同，看選擇器權重（依次比較該選擇器id,類，標籤選擇器數量）

1 .box1 .box2 { 2  color: blue; 3  /*（0,2,0）*/ 4 } 5 #box1 .box2 { 6  color: green; 7  /*（1,1,0）*/ 8 }

 

 

若是距離相同，選擇器數量還相同，看css書寫順序

 

1 .box1 #box2 { 2  color: orange; 3 } 4 /*數量相同，看css順序*/ 5 #box1 .box2 { 6  color: green; 7  /*（1,1,0）*/ 8 }

 

4.3 important

語法：

書寫在屬性值後面添加空格 !important分號結束

 

做用：能夠提升選中元素單個屬性的權重最大。而不是提升整個選擇器的權重

 

 

important不影響就近原則。

1 /*元素沒有被選中*/ 2 body { 3  font-size: 50px; 4  color: red !important; 5 } 6 .box { 7  color: green; 8 }