CSS選擇器介紹

寫給正在學習選擇器的小伙伴們蒿囤！

不懂的可以加我聯(lián)系方式客们，一起討論！

QQ：951434130

序選擇器很重要材诽，學習時記得不懂的查MDN底挫，或者W3C官方文檔，因為序選擇器有些我的理解也不是很對

標簽選擇器

注意點：

根據(jù)指定標簽名稱脸侥，在當界面中找到指定標簽的所以標簽建邓，然后設(shè)置屬性
無論標簽藏得多深都能找到選中
不能單獨選中某個標簽，如果使用標簽選擇器睁枕，那樣同名標簽都會被設(shè)值涝缝，例如p標簽，當使用標簽選擇器時譬重，當前頁面所有p標簽都會被設(shè)值

 <style>
       p{
          color: green;
       }
    </style>

id選擇器

id選擇器是根據(jù)指定的id名稱找到對應的標簽, 然后設(shè)置屬性
在企業(yè)開發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會使用id拒逮，為什么？因為在前端開發(fā)中id是留給js使用的

<style>
       #id1{
          color: green;
       }
    </style>

注意點：

每個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設(shè)置id

在同一個界面中id的名稱是不可以重復的

在編寫id選擇器時一定要在id名稱前面加上#

id的名稱是有一定的規(guī)范的

1 id的名稱只能由字母/數(shù)字/下劃線a-z 0-9 _

2 id名稱不能以數(shù)字開頭

3 id名稱不能是HTML標簽的名稱不能是a h1 img input ...

在企業(yè)開發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會使用id ,因為在前端開發(fā)中id是留給js使用的

以上這段注意點是來自我老師李南江的解答臀规！

類選擇器

選擇指定設(shè)置過后的類名滩援，找到對應的標簽，然后設(shè)置屬性

<style>
       .header{
          color: green;
       }
    </style>

注意點：
1.每個HTML標簽都有一個屬性叫做class, 也就是說每個標簽都可以設(shè)置類名
2.在同一個界面中class的名稱是可以重復的
3.在編寫class選擇器時一定要在class名稱前面加上.
4.類名的命名規(guī)范和id名稱的命名規(guī)范一樣
5.類名就是專門用來給CSS設(shè)置樣式的
6.在HTML中每個標簽可以同時綁定多個類名
格式:<標簽名稱 class="類名1 類名2 ...">
錯誤寫法：<p class="para1" class="para2">

以上這段注意點是來自我老師李南江的解答塔嬉！

交集選擇器

交集選擇題的注意點玩徊？

1 .選擇器和選擇器之間沒有任何的連接符號
2 .選擇器可以使用標簽名稱/id名稱/class名稱
3 .交集選擇器僅僅作為了解, 企業(yè)開發(fā)中用的并不多
4 .交集選擇器是給所有選擇器選中的標簽中, 相交的那部分標簽設(shè)置屬性

格式：

<style>
        .para1#identity{
            color: blue;
        }
</style>

并集選擇器

什么是并集選擇器?

1 .給所有選擇器選中的標簽設(shè)置屬性
2 .并集選擇器必須使用,來連接
3 .選擇器可以使用標簽名稱/id名稱/class名稱

格式：

<style>
        .ht,.para{
            color: red;
        }
</style>

兄弟選擇器

相鄰兄弟選擇器 CSS2

1 .給指定選擇器后面緊跟的那個選擇器選中的標簽設(shè)置屬性
2 .相鄰兄弟選擇器必須通過+連接
3 .相鄰兄弟選擇器只能選中緊跟其后的那個標簽, 不能選中被隔開的標簽

格式：

<style>
     h1+p{
            color: red;
        }
</style>

通用兄弟選擇器 CSS3

給指定選擇器標簽后面的所有選擇器標簽選中設(shè)置屬性

1 .通用兄弟選擇器必須用~連接
2 .通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中

格式：

<style>
      h1~p{
            color: red;
        }
</style>

序選擇器

:first-child

選中同級別中的第一個標簽
例如div下面的四個p標簽，但是只選擇同級別的第一P標簽設(shè)置屬性谨究，其余三個沒有任何變化恩袱，就算是div外層還是有兩個p標簽，那樣也是只有外層第一個p標簽和div里的第一個p標簽會被設(shè)置屬性胶哲，變化
注意點：如果同級別的第一個p標簽前面有其他標簽畔塔，那樣那個p標簽就沒有作用了
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序選擇器</title>
    <style>
        p:first-child{
            color: red;
        }
    </style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
    <p>我是段落3</p>
    <p>我是段落2</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
</div>
</body>
</html>

效果如下

效果圖

:last-child

選中同級別中的最后一個標簽
顧名思義與上一段話一樣，就是選中同級別中最后一個標簽才會有效果鸯屿，例如一下代碼澈吨，第一級別是p和div，第一級別的同級別最后一個標簽不是p標簽，所以他沒有生效，會往二級標簽里繼續(xù)查找漾橙，div里的二級同級別標簽，最后一個剛好是p標簽所以他生效了桑阶，相反柏副，如果第一級別同級別最后一個是標簽是p而不是div時，他就會在第一級別時生效了
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序選擇器</title>
    <style>
        p:last-child{
            color: red;
        }
    </style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
    <p>我是段落3</p>
    <p>我是段落4</p>
</div>
</body>
</html>

效果如下

效果圖

效果圖

:nth-child(n)

選中同級別中的第n個標簽
:nth-child(n)里的n是自己輸入的幾位數(shù)蚣录，如果html頁面里有五個p標簽搓扯，那樣你輸入3:nth-child(3)他就會給正序第三個p設(shè)置屬性
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序選擇器</title>
    <style>
        p:nth-child(3){
            color: red;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

效果如下

效果圖

:nth-last-child(n)

選中同級別中的倒數(shù)第n個標簽
nth-last-child(n)里的n是自己輸入的幾位數(shù)，如果html頁面里有五個p標簽包归，那樣你輸入3:nth-child(3)他就會給倒序第三個p設(shè)置屬性
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序選擇器</title>
    <style>
        p:nth-last-child(3){
            color: #8d28ff;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

效果如下

效果圖

:only-child

選中父元素中唯一的標簽
很好理解，選中整個頁面里唯一一個元素铅歼，當一級層次有兩個標簽時公壤，那樣它不符合條件，所以他會轉(zhuǎn)向二級椎椰，選中div里的唯一一個p厦幅，所以他div外層的p沒生效就是這樣子
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:only-child{
            color: #8d28ff;
        }
      
    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>

    <div>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

效果圖

:first-of-type

選中同級別中同類型的第一個標簽
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-of-type{
            color: #8d28ff;
        }

    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>


    <div class="header">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

image

效果圖

:last-of-type

選中同級別中同類型的最后一個標簽
和:first-of-type類似，不過他選中的是同級別中的最后一個標簽
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:last-of-type{
            color: #8d28ff;
        }

    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>


    <div class="header">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

效果圖

:nth-of-type(n)

選中同級別中同類型的第n個標簽
:nth-of-type(3)如果n里寫3慨飘，那樣就會選中同級別正序的第三個標簽
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-of-type(3){
            color: #8d28ff;
        }

    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>


    <div class="header">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

效果圖

:nth-last-of-type(n)

選中同級別中同類型的倒數(shù)第n個標簽
:nth-last-of-type(n)如果n里寫3确憨，那樣就會選中同級別倒序的第三個標簽
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-last-of-type(3){
            color: #8d28ff;
        }

    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>


    <div class="header">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

效果圖

:only-of-type

選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素(這段話是來自w3c的描述:only-of-type選擇器的)
個人理解:only-of-type，是選中父元素中的唯一一個子元素瓤的，多了不會生效休弃，如果我們在div里的p下面再添加一個p，這時添加的p不會生效圈膏，并且導致div里的第一個p元素也會失去效果塔猾，代碼實踐最實在，看圖
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:only-of-type{
            color: #8d28ff;
        }
    </style>
</head>
<body>
    <p>我是段落</p>

    <div class="header">
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

效果圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:only-of-type{
            color: #8d28ff;
        }
    </style>
</head>
<body>
    <p>我是段落</p>

    <div class="header">
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

</body>
</html>

效果如下

在div里添加多了個p的效果圖

:nth-child(xn+y)

x和y是用戶自定義的, 而n是一個計數(shù)器, 從0開始遞增
:nth-child(2n+0)稽坤，x填2時丈甸，他會從0開始，會在第二個p時開始生效尿褪，遞增睦擂，每次兩個，一直到結(jié)束杖玲，看代碼顿仇、這里的理解看個人，我的可能是錯的摆马，如果有錯請在評論區(qū)告知我夺欲，謝謝
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-child(2n+0){
            color: #8d28ff;
        }
    </style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>

效果如下

nth-child(2n+0)

:nth-child(even)

選中同級別中的所有偶數(shù)
:nth-child(even)的效果圖和上面nth-child(2n+0）一樣，我就不重新截圖了
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-child(even){
            color: #8d28ff;
        }
    </style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>

效果如下

image

:nth-child(odd)

選中同級別中的所有奇數(shù)
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-child(odd){
            color: #8d28ff;
        }
    </style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>

效果如下

image

屬性選擇器

[attribute]

根據(jù)指定的屬性名稱找到對應的標簽, 然后設(shè)置屬性
把指定屬性填入p[這]今膊，例如id的話些阅，他就會把設(shè)有id的標簽給設(shè)置效果,當然你也可以填寫class
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[id]{
            color: red;
        }

    </style>
</head>
<body>
    <p id="id1">我是段落</p>
    <p id="id2">我是段落</p>
    <p>我是段落</p>
    <p id="id3">我是段落</p>
    <p>我是段落</p>
    <p id="id4">我是段落</p>
    <p>我是段落</p>
</body>
</html>

效果如下

image

[attribute=value]

找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設(shè)置屬性
[attribute=value]最常見的應用場景, 就是用于區(qū)分input屬性
input[type=password]找到指定的input的type屬性，再找到指定的type屬性的取值password斑唬，然后設(shè)置屬性
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[type=password]{
           border:2px solid;
           border-radius:25px;
             }
    </style>
</head>
<body>

    <input type="password">

</body>
</html>

效果如下

image

屬性的取值是以什么開頭的

[attribute|=value] CSS2

CSS2中的只能找到value開頭,并且value是被-和其它內(nèi)容隔開
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       img[alt|=abc]{
            color: red;
        }
    </style>
</head>
<body>

<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">

</body>
</html>

效果如下

image

[attribute^=value] CSS3

CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       img[alt^=abc]{
            color: red;
        }
    </style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>

效果如下

image

屬性的取值是以什么結(jié)尾的

[attribute$=value] CSS3

CSS3中的只要是以value結(jié)尾的都可以找到, 無論有沒有被-隔開
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      img[alt$=abc]{
            color: skyblue;
        }
    </style>
</head>
<body>

    <img src="" alt="abcdef">
    <img src="" alt="abc-www-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">

</body>
</html>

效果如下

image

屬性的取值是否包含某個特定的值得

[attribute~=value] CSS2

CSS2中的只能找到獨立的單詞, 也就是包含value,并且value是被空格隔開的
只能找到被空格隔開的
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     img[alt~=abc]{
            color: skyblue;
        }
    </style>
</head>
<body>

    <img src="" alt="abcdef">
    <img src="" alt="abc-www-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">

</body>
</html>

效果如下

image

[attribute*=value] CSS3

CSS3中的只要包含value就可以找到
不區(qū)分空格橫杠連接
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     img[alt*=abc]{
            color: skyblue;
        }
    </style>
</head>
<body>

    <img src="" alt="abcdef">
    <img src="" alt="abc-www-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">

</body>
</html>

效果如下

image

通配符選擇器

給當前界面上所有的標簽設(shè)置屬性
注意點：由于通配符選擇器是設(shè)置界面上所有的標簽的屬性, 所以在設(shè)置之前會遍歷所有的標簽, 如果當前界面上的標簽比較多, 那么性能就會比較差, 所以在企業(yè)開發(fā)中一般不會使用通配符選擇器
格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
          color: deeppink;
       }
    </style>
</head>
<body>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

效果如下

image

最后編輯于：2019.03.23 02:36:16

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末市埋，一起剝皮案震驚了整個濱河市黎泣，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌缤谎，老刑警劉巖抒倚，帶你破解...
沈念sama閱讀 216,919評論 6贊 502
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異坷澡，居然都是意外死亡托呕，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,567評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門频敛，熙熙樓的掌柜王于貴愁眉苦臉地迎上來项郊，“玉大人，你說我怎么就攤上這事斟赚∽沤担” “怎么了？”我有些...
開封第一講書人閱讀 163,316評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵拗军，是天一觀的道長任洞。經(jīng)常有香客問我，道長发侵，這世上最難降的妖魔是什么交掏？我笑而不...
開封第一講書人閱讀 58,294評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮刃鳄，結(jié)果婚禮上耀销，老公的妹妹穿的比我還像新娘。我一直安慰自己铲汪，他們只是感情好熊尉，可當我...
茶點故事閱讀 67,318評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著掌腰，像睡著了一般狰住。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上齿梁，一...
開封第一講書人閱讀 51,245評論 1贊 299
城市分裂傳說
那天催植，我揣著相機與錄音，去河邊找鬼勺择。笑死创南，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的省核。我是一名探鬼主播稿辙，決...
沈念sama閱讀 40,120評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼气忠！你這毒婦竟也來了邻储？” 一聲冷哼從身側(cè)響起赋咽，我...
開封第一講書人閱讀 38,964評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎吨娜，沒想到半個月后脓匿，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,376評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡宦赠，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,592評論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年陪毡，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片勾扭。...
茶點故事閱讀 39,764評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡毡琉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出尺借，到底是詐尸還是另有隱情，我是刑警寧澤精拟，帶...
沈念sama閱讀 35,460評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布燎斩，位于F島的核電站，受9級特大地震影響蜂绎，放射性物質(zhì)發(fā)生泄漏栅表。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,070評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一师枣、第九天我趴在偏房一處隱蔽的房頂上張望怪瓶。院中可真熱鬧，春花似錦践美、人聲如沸洗贰。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,697評論 0贊 22
一樁弒父案陨倡，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽敛滋。三九已至，卻和暖如春兴革，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背庶艾。一陣腳步聲響...
開封第一講書人閱讀 32,846評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工咱揍，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留述召，地道東北人积暖。一個月前我還...
沈念sama閱讀 47,819評論 2贊 370
代替公主和親
正文我出身青樓夺刑，卻偏偏與公主長得像遍愿，于是被迫代替她去往敵國和親沼填。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,665評論 2贊 354