CSS3 新增選擇器

CSS3 新增選擇器

結構(位置)僞類選擇器（CSS3)

• :first-child :選取屬於其父元素的首個子元素的指定選擇器
• :last-child :選取屬於其父元素的最後一個子元素的指定選擇器
• :nth-child(n) ： 匹配屬於其父元素的第 N 個子元素，不論元素的類型
• :nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。 n 能夠是數字、關鍵詞或公式
• ​

li:first-child { /*  選擇第一個孩子 */
                color: pink; 
            }
li:last-child {   /* 最後一個孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 選擇第4個孩子  n  表明 第幾個的意思 */ 
                color: skyblue;
            }

 

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器 咱們成爲屬性選擇器

/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /*  class^=font 表示 font 開始位置就好了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 結束位置就好了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置均可以 */
            color: green;
        }
<div class="font12">屬性選擇器</div>
    <div class="font12">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="24font">屬性選擇器123</div>
    <div class="sub-footer">屬性選擇器footer</div>
    <div class="jd-footer">屬性選擇器footer</div>
    <div class="news-tao-nav">屬性選擇器</div>
    <div class="news-tao-header">屬性選擇器</div>
    <div class="tao-header">屬性選擇器</div>

 

input[type=text]

div[class*=tao]

 

僞元素選擇器（CSS3)

1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
2. E::first-line 文本第一行；
3. E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

 

四、E::before和E::after

在E元素內部的開始位置和結束位建立一個元素，該元素爲行內元素，且必需要結合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

 

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏「:」用來表示僞類，「::」用來表示僞元素，可是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣作的目的是用來作兼容處理。

":" 與 "::" 區別在於區分僞類和僞元素

之因此被稱爲僞元素，是由於他們不是真正的頁面元素，html沒有對應的元素，可是其全部用法和表現行爲與真正的頁面元素同樣，能夠對其使用諸如頁面元素同樣的css樣式，表面上看上去貌似是頁面的某些元素來展示，其實是css樣式展示的行爲，所以被稱爲僞元素。是僞元素在html代碼機構中的展示，能夠看出沒法僞元素的結構沒法審查

注意

僞元素:before和:after添加的內容默認是inline元素**；這個兩個僞元素的content屬性，表示僞元素的內容,設置:before和:after時必須設置其content屬性，不然僞元素就不起做用。