天天看點
傳回

CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算

1.元素關系選擇器

1）子選擇器（隻選擇子代）：div>p,div的子标簽p。當使用>符号分隔兩個元素時，它隻會比對那些作為第一個元素的直接後代元素，即兩個标簽為父子關系，差別于後代選擇器（所有後代，不隻限于子代）

2）相鄰兄弟選擇器：相鄰兄弟選擇器 a+b，選擇a後面緊鄰的b元素，一般用于圖檔後面的文字介紹

3）通用兄弟選擇器：a~b,選擇a元素之後的所有同層級b元素，即使中間被隔開；行内元素不換行，塊級元素換行。

2.序号選擇器

1) :first-child 選擇第一個子元素，是選取屬于其父元素的首個子元素的指定選擇器

2) :last-child 最後一個子元素，比對屬于其父元素的最後一個子元素

3) :nth-child(3) 第三個子元素，：nth-child()可以寫成an+b的形式，表示從b開始每a個選一個，注意不能寫b+an，2n+1等價于odd,是奇數（比對屬于其父元素的下标為奇數的子元）；2n等價于even，是偶數（配屬于其父元素的下标為偶數的子元素）。

4) :nth-of-type(3) 第三個某類型子元素。将選擇同種标簽指定序号的子元素

:last-of-type比對屬于其父元素的特定類型的最後一個子元素；

5) :nth-last-child（3）倒數第三個子元素。比對屬于其父元素的第N個子元素的每個元素，從最後一個子元素開始計數，不論子元素的類型。不論子元素的類型可以了解為，計數時，不按類型，但是顯示的時候，還是要看的

6) :nth-last-of-type(3) 倒數第三個某類型子元素。選擇屬于父元素的特定類型的第N個子元素，從最後一個子元素開始計數

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
        }
        .box1 p:first-child{
            color: green;
        }
        .box1 p:last-child{
            color: red;
        }
        .box2 p:nth-child(3){
            color: skyblue;
        }
        .box3 p:nth-child(2n+1){
            color: springgreen;
        }
        .box4 p:nth-of-type(3){
            color: chocolate;
        }
        .box4 p:nth-of-type(3){
            color: rgb(136, 50, 79);
        }
        .box5 p:nth-last-child(2){
            color: tomato;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box2">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box3">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box4">
        <p>我是1号p</p>
        <p>我是2号p</p>
        <h3>我是一号h3</h3>
        <h3>我是二号h3</h3>
        <p>我是3号p</p>
        <p>我是4号p</p>
        <h3>我是三号p3</h3>
        <h3>我是四号p3</h3>
    </div>
    <div class="box5">
        <p>我是1号p</p>
        <p>我是2号p</p>
        <p>我是3号p</p>
        <p>我是4号p</p>
    </div>
</body>
</html>

3.屬性選擇器

CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算
CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算

小分析:

1.Element[attribute~=value]選擇器用于選取屬性值中包含指定詞彙的元素。div[class~="s"]選擇器選中的是class值清單中包含“s”的元素

2.lement[attribute^="value"]比對指定屬性的指定value值開頭的元素，如果class中有多個value值，第一個值中的第一個字母不是指定的值，即使後面的屬性中首字母是指定的值，那麼也不能比對上，比如，<div class="one stwo">，第一個值的首字母是"o"，即使後面的值stwo的首字母是“s”，那麼也比對不上.

錯題解析：

CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算

4.css3新增僞類 

  1. p:empty{}選擇空白的p标簽。
  2. input:focus{}為目前聚焦的表單元素設定樣式。
  3. input:enabled{}為目前可選中的表單元素設定樣式
  4. input:disabled{}為目前不可選中的表單元素設定樣式
  5. input:checked{}為已經勾選的單選按鈕或者複選框設定樣式，目前主流的浏覽器都能相容。
  6. :root{}選擇根元素(即html元素，:root等價于html），為整個網頁設定預設樣式

注意：

1、空白和換行不能視為空标簽

2、可以給标簽加上disabled屬性，使它無法被選中

3、還可以用類似input:checked+span這樣的方式，給已勾選的input标簽的後面的span标簽設計樣式

4、：root前面不需要加任何東西，等價于直接寫html{ }

5.僞元素 

1）::before建立一個僞元素，其将成為比對選中的元素的第一個子元素，必須設定content屬性表示其中的内容。
::after僞元素後面添加元素，建立一個僞元素，其将成為比對選中的元素的最後一個子元素，必須設定content屬性表示其中的内容。
CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算

必須設定content屬性，哪怕将它置空。

2）::selection 選擇内容元素，css僞元素應用于文檔中被使用者高亮的部分（使用滑鼠圈選的部分）

3）::first-letter 會選中某元素中（必須是塊級元素）第一行的第一個字母

::first-line 會選中某元素中（必須是塊級元素）第一行全部文字

僞元素兩冒号

僞類單冒号

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before{
            content:'★';
        }
        a::after{
            content:'❤' ;
        }
        .box1{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
        }
        .box1::selection{
            /* 背景顔色 */
            background-color: green;
        }
        .box1::first-letter{
            font-size: 50px;
        }
        .box1::first-line{
            /* 添加下劃線 */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超級連結</a>
    </p>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超級連結</a>
    </p>
    <p>
        <a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >我是超級連結</a>
    </p>
    <div class="box1">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
    </div>
</body>
</html>
CSS3基礎文法與盒模型（二）CSS3選擇器（2）選擇器與僞元素1.元素關系選擇器5.層疊性和選擇器權重計算

5.層疊性和選擇器權重計算

1.含義：CSS3全名叫做“層疊式樣式表”，其重要的性質是層疊性。

層疊性，多個選擇器可以同時作用于同一個标簽，效果疊加。

2.層疊性的沖突處理

Q：如果多個選擇器定義的屬性有沖突呢？

A：id權重>class權重>标簽權重

複雜選擇器的權重計算：可以通過id個數，class個數，标簽個數的順序計算出權重

行内樣式的優先級>内部樣式的優先級

（很多地方都會講成内部樣式優先級比外部樣式高，其實是不對的，内部樣式和外部樣式是具有相同的優先級的，就看誰出現的位置靠後，誰優先。）

3. !Important提升權重

如果我們需要将某個選擇器的某條屬性提升權重，可以在屬性後面寫 ！important (很多公司不允許使用，這會導緻不經意的屬性沖突）

.spec{
    color:blue ！important ;
}
           
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 權重（2,0,1） 
        */
        #box1 #box2 p{
            color: red;
        }
        /* 權重（2,1,2） 
        */
        #box1 div.box2 #box3 p{
            color: green;
        }
        /* 權重（0,3,1） 
        */
        .box1 .box2 .box3 p{
            color: blue;
        }
        /* 權重（0,1,1） 
        */
        .list li{
            color: red;
        }
        /* 權重（0,2,1） li.spec交集選擇器
        */
        .list li.spec{
            color: springgreen;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我是段落</p>
            </div>
        </div>
    </div>
    <ul class="list">
        <li>清單項</li>
        <li class="spec">清單項</li>
        <li class="spec">清單項</li>
        <li>清單項</li>
    </ul>
</body>
</html>
自學 html5 css3
上一篇: CSS過渡：transitions設定樣式過渡漸變：transition
下一篇: CSS 過渡

繼續閱讀