碼上歡樂
相關內容    簡體    繁體

前端基礎-CSS的各種選擇器的特點以及CSS的三大特性

本文轉載自   查看原文   2018-05-26 11:06   1047    前端/ web開發/ 前端web開發基礎

一、 基本選擇器

1、id選擇器

#1、作用：
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性

#2、格式
id名稱 {
    屬性：值;
}

#3、注意點：
1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
2、每個標簽都可以設置唯一一個id，id就相當於人/標簽的身份證，因此在同一界面內id絕不能重復
3、引用id一定要加#
4、id的命名只能由字符、數字、下划線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p id="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p id="p2">而多多，不僅具備外表帥，內心更是帥了一逼</p>
<p id="p3">多多就是我，我就是多多</p>
</body>

</html>
id選擇器實例

2、類選擇器

#1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然后設置屬性

#2、格式：
.類名稱 {
    屬性：值;
}

#3、注意點：
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當於人/標簽的名稱，
因此同一界面內class可以重復
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>類選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p class="p2">而多多，不僅具備外表帥，內心更是帥了一逼</p>
<p class="p3">多多就是我，我就是多多</p>
</body>

</html>
類選擇器實例

3、標簽選擇器

#1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性

#2、格式：
標簽名稱 {
    屬性：值;
}

#3、注意點：
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>多多美麗的外表下其實隱藏着一顆騷動的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>
標簽選擇器

4、通配符選擇器

#1、作用：選擇所有標簽

#2、格式：
* {
    屬性：值；
}
#3、注意點：
1、在企業開發中一般不會使用通配符選擇器
    理由是：
    由於通配符選擇器是設置界面上所有的標簽的屬性，
    所以在設置之前會遍歷所有的標簽
    如果當前界面上的標簽比較多，那么性能就會比較差
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符選擇器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是標題</h1>
    <p >我是段落</p>
    <a href="#">我是超鏈接</a>
</body>
</html>
通配選擇器實例

二、 后代選擇器、子元素選擇器

1、后代選擇器

#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性

#2、格式：
    標簽名1 xxx {
        屬性：值;
    }

#3、注意：
1、后代選擇器必須用空格隔開
2、后代不僅僅是兒子，也包括孫子、重孫子
3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、后代選擇器可以通過空格一直延續下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }

        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
后代選擇器實例

2、子元素選擇器

#1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性

#2、格式：
    標簽名1>標簽名2 {
        屬性：值;
    }

先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素

#3、注意：
1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
    比如div >p會找div標簽的所有后代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
子元素選擇器

三、 兄弟選擇器

1、相鄰兄弟選擇器，CSS2推出

#1、作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性

#2、格式
選擇器1+選擇器2 {
    屬性：值;
}

#3、注意點：
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個標簽，不能選中被隔開的標簽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟選擇器</title>

    <style type="text/css">
        h1+p {
            font-size: 50px;
        }   /* 相鄰兄弟解釋器*/  

    </style>
</head>
<body>
    <h1 >我是標題1</h1>
    <!--<a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>

</body>
</html>
相鄰兄弟解釋器演示

2、通用兄弟選擇器，CSS3推出

#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性

#2、格式：
選擇器1~選擇器2 {
    屬性：值;
}

#3、注意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟選擇器</title>

    <style type="text/css">

        h1~p {
            color: red;
        }    
   /*通用兄弟選擇器*/

    </style>
</head>
<body>
    <h1 >我是標題1</h1>
    <!--<a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>

</body>
</html>
通用兄弟解釋器實例

四、 交集選擇器與並集選擇器

1、交集選擇器

#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性

#2、格式：
    選擇器1選擇器2 {
        屬性：值;
    }

#3、注意：
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中並不多見，了解即可
   因為：p.part1 完全可以用.part1取代
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
交集選擇器實例

2、並集選擇器

#1、作用：給所有滿足條件的標簽設置屬性

#2、格式：
    選擇器1,選擇器2 {
        屬性：值;
    }

#3、注意：
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>並集選擇器</title>

    <style type="text/css">
        .part1,h1,a {
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
並集選擇器實例

五、 序列選擇器

#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，
過去的選擇器中要選中某個必須加id或class，學習了這9個后，不用加id或class，
想選中同級別的第幾個就選第幾個

#2、格式
#2.1 同級別
:first-child    p:first-child    同級別的第一個
:last-child    p:last-child    同級別的最后一個
:nth-child(n)                    同級別的第n個
:nth-last-child(n)            同級別的倒數第n個

#2.2 同級別同類型
:first-of-type                    同級別同類型的第一個
:last-of-type                    同級別同類型的最后一個
:nth-of-type(n)                    同級別同類型的第n個
:nth-last-of-type(n)            同級別同類型的倒數第n個

#2.3 其他
:only-of-type                    同類型的唯一一個
:only-child                         同級別的唯一一個
#1、同級別的第一個
#1.1 示范一
p:first-child { 
    color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標簽

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

這樣的話第一個p和div中的第一個p都變成紅色，

#1.2 示范二
p:first-child {
    color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標簽

<h1>w我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

這樣的話只有div中的第一個p變紅，因為在有在div內同一級別的第一個才是p

注意點：
    :fist-child就是第一個孩子，不區分類型

#2、同級別的最后一個
p:last-child {
    color: red;
}
代表：同級別的最后一個，並且最后一個要求是一個p標簽

<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>
<p>我是段落7</p>
這樣的話只有6跟7都變紅

#3、同級別的第n個
p:nth-child(3) {
    color: red;
}
代表：同級別的第3個，並且第3個要求是一個p標簽

<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落2”變紅

#4、同級別的倒數第n個
p:nth-last-child(3) {
    color: red;
}
代表：同級別的倒數第3個，並且第3個要求是一個p標簽
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落6.1”和“我是段落5”被選中
同級別示范 
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是標題</h1>
</div>
<p>我是段落7</p>
#1、同級別同類型的第一個
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被選中

#2、同級別同類型的最后一個
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被選中

#3、同級別同類型的第n個
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被選中

#4、同級別同類型的倒數第n個
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被選中
同級別同類型實例 
#1、同類型的唯一一個
p:only-of-type {
    color: red;
}

<h1>我是標題</h1>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是標題</h1>
</div>
<p>我是段落7</p>

“我是段落7“被選中

#2、同級別的唯一一個
p:only-child {
    color: red;
}

<h1>我是標題</h1>
<div>
    <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被選中
其他情況

六、 屬性選擇器

#1、作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
       該選擇器，最常用於input標簽
 
#2、格式與具體用法：
    [屬性名]
    其他選擇器[屬性名]
    [屬性名=值]
    [屬性名^=值]
    [屬性名$=值]
    [屬性名*=值]

    例1：找到所有包含id屬性的標簽
        [id]
    
    例2：找到所有包含id屬性的p標簽
        p[id]
    
    例3：找到所有class屬性值為part1的p標簽
        p[class="part1"]
    
    例4：找到所有href屬性值以https開頭的a標簽
        a[href^="https"]
        
    例5：找到所有src屬性值以png結果的img標簽
        img[src$="png"]
        
    例6：找到所有class屬性值中包含part2的標簽
        [class*="part"] 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>

    <style type="text/css">

        [id] {
            color: red;
        }


        p[id] {
            font-size: 30px;
        }


        p[class="part1"] {
            color: green;
        }

        a[href^="https"] {
            font-size: 50px;
        }

        img[src$="jpg"] {
            width: 300px;
        }

        [class*="part"] {
            text-decoration: line-through;
        }



    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="2.jpg" alt="加載失敗">
    <img src="1.jpg1" alt="加載失敗">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
具體演示

七、 偽類選擇器

#1、作用：常用的幾種偽類選擇器。

#1.1 沒有訪問的超鏈接a標簽樣式：
a:link {
  color: blue;
}

#1.2 訪問過的超鏈接a標簽樣式：
a:visited {
  color: gray;
}

#1.3 鼠標懸浮在元素上應用樣式：
a:hover {
  background-color: #eee; 
}

#1.4 鼠標點擊瞬間的樣式：
a:active {
  color: green;
}

#1.5 input輸入框獲取焦點時樣式：
input:focus {
  outline: none;
  background-color: #eee;
}

#2 注意：
1 a標簽的偽類選擇器可以單獨出現，也可以一起出現
2 a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
    link，visited，hover，active
3 hover是所有其他標簽都可以使用的
4 focus只給input標簽使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽類選擇器</title>

    <style type="text/css">
        a:link {
            color: #cccccc;
        }
        a:visited {
            color: #55BBBB;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: red;
        }

        input:hover {
            outline: none;
            background-color: #cccccc;

        }

    </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">點擊我</a>
<input type="text">
</body>
</html>
偽類選擇器實例

八、 偽元素選擇器

#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調整
例如：
p:first-letter {
  font-size: 48px;
}

#1.2 before
用於在元素的內容前面插入新內容。
例如：

p:before {
  content: "*";
  color: red;
}
在所有p標簽的內容前面加上一個紅色的*。

#1.3 after
用於在元素的內容后面插入新內容。
例如：

p:after {
  content: "?";
  color: red;
}
在所有p標簽的內容后面加上一個藍色的?。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>

    <style type="text/css">
        p:first-letter {
            font-size: 50px;
        }
        /*兩個冒號與一個是一樣的，老版本用的是一個冒號，考慮到兼容性推薦使用一個冒號*/
        a::after {
            content: "?";
            color: red;
        }
        a:before {
            content: "！";
            color: green;
        }

    </style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數</p>
<a href="#" class="help">多多是干什么的</a>
<a href="#" class="help">多多是干什么的</a>
<a href="#" class="help">多多是干什么的</a>
</body>
</html>
偽元素演示

九、 CSS三大特性

1、繼承性

#1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性

#2、注意：
    1、只有以color、font-、text-、line-開頭的屬性才可以繼承
    2、a標簽的文字顏色和下划線是不能繼承別人的
    3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
    
    ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
    通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">

        div {
            color: red;
            font-size: 50px;
        }


    </style>
</head>
<body>

<div>
    <h1>我是標題</h1>
    <p><a href="#">多多最帥</a></p>
    <ul>
        <li>導航1</li>
        <li>導航2</li>
        <li>導航2</li>
    </ul>
</div>

<div>
    <div>
        <p>aaaa</p>
    </div>
    <div>
        <p>bbbb</p>
    </div>
</div>


</body>
</html>
繼承性演示

2、層疊性

#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，
即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果

#2、注意：
1、層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被划掉了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層疊性</title>

    <style type="text/css">

        p {
            color: red;
        }

        .ppp {
            color: green;
        }

    </style>
</head>
<body>

<p class="ppp">我是段落</p>

</body>
</html>
層疊性演示

3、優先級

#1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定

#2、優先級
    整體優先級從高到底：行內樣式>嵌入樣式>外部樣式

    行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先級

1、大前提：直接選中 > 間接選中(即繼承而來的)

#1、以下為直接選中
    <style type="text/css">
        #id1 {
            color: red;
        }

        .ppp {
            color: green;
        }

        p {
            color: blue;
        }
    </style>

#2、以下為間接選中
    <style type="text/css">
        ul {
            color: yellow;
        }
    </style>


    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
直接選中優先級間接選中示范

2、如果都是間接選中，那么誰離目標標簽比較近，就聽誰的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優先級</title>

    <style type="text/css">
        /*離目標近，顯示的當然是red*/
        li {
            color: red;
        }
        /*離目標遠*/
        ul {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
都是間接選中，誰離目標近誰優先示范

3、如果都是直接選中，並且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優先級</title>

    <style type="text/css">
        p {
            color: red;
        }
        /*同樣都是標簽選擇器，誰寫在后面誰生效*/
        p {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
同樣都是標簽選擇器，誰寫后面誰生效示范

4、如果都是直接選中，並且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊

    id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優先級</title>

    <style type="text/css">
        /*打開瀏覽器依次去掉優先級高的來進行驗證*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow;
        }
        li {
            color: #7e1487;
        }
        
    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
演示

5、優先級之!important

#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。
  
#2、注意：
    1、!important只能用於直接選中，不能用於間接選中
    2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升
    3、!important必須寫在屬性值分號的前面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優先級</title>

    <style type="text/css">
        /*打開瀏覽器依次去掉優先級高的來進行驗證*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow !important;
        }
        li {
            color: #7e1487;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
了解就行，不推薦用

6、優先級之權重計算

#1、強調
如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級

#2、計算方式
#1、id數多的優先級高
#2、id數相同，則判定類數多的優先級高
#3、id數、class數均相同，則判定標簽數多的優先級高
#4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優先級</title>

    <style type="text/css">
        #id1 #id2 #id3 .ppp{
            color: red;
        }
        #id2 #id3.aaa p{
            color: purple;
        }

        #id1.ccc>.bbb>.aaa>p {
            color: pink;
        }

        #id1 .aaa .ppp {
            color: green;
        }

        #id2 .aaa p {
            color: yellow;
        }

        div ul li p {
            color: blue;
        }

        div ul p {
            color: cyan;
        }

    </style>
</head>
<body>
    <div id="id1" class="ccc">
        <ul id="id2" class="bbb">
            <li id="id3" class="aaa">
                <p class="ppp">我是段落</p>
            </li>
        </ul>
    </div>
</body>
</html>
一個一個對比，演示


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端基礎--css基本語法,選擇器 CSS中常用的選擇器及三大特性 css三大特性 & 選擇器的權重 (2)css的復合選擇器與特性 Scrapy基礎(五) ------css選擇器基礎 前端之css樣式（選擇器）。。。 python前端之CSS介紹--選擇器 【WEB前端】CSS常用選擇器 前端之css樣式（選擇器）。。。 CSS選擇器 < ~ +
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM