CSS3的新特性——新增選擇器

阿新 • • 發佈：2020-12-24

技術標籤：css3

屬性選擇器

屬性選擇器可以根據元素特定屬性來選擇元素。這樣就可以不用藉助於類或者id選擇器。

選擇符	簡介
E[att]	選擇器選擇具有att屬性的E元素
E[att="val"]	選擇器選擇具有att屬性且屬性值等於val的E元素
E[att^="val"]	匹配具有att屬性且值以val開頭的E元素
E[att$="val"]	匹配具有att屬性且值以val結尾的E元素
E[att*="val"]	匹配具有att屬性且值含有val的E元素

結構偽類選擇器

結構為類選擇器主要根據文件結構來選擇器元素，常用於根據父級選擇器裡面的子元素。

選擇符	簡介
E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中的最後一個子元素E
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定型別E的第一個
E:last-of-type	指定型別E的最後一個
E:nth-of-type	指定型別E的第n個

nth-child(n)與nth-of-type的區別：

nth-child對父元素裡面所有的孩子排序，先找到第n個孩子，再看是否和E匹配。
nth-of-type對父元素裡面指定子元素進行排序選擇。先匹配E，再找第n個孩子。

nth-child(n)選擇某個父元素的一個或者多個特定的子元素：

n可以是數字，關鍵字和公式
n如果是數字，就是選擇第n個子元素
n可以是even奇數，odd偶數
n可以是公式：常見公式如下（如果n是公式，則從零開始計算，但是第0個元素或者超出了元素的個數會被忽略）。

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15...
n+5	從第五個開始（包含第五個）到最後
-n+5	前五個（包含第五個）...

注意：類選擇器、屬性選擇器、偽類選擇器，權重為10。

偽元素選擇器

偽元素選擇器可以幫助我們利用CSS建立新標籤元素，而不再需要HTML標籤，從而簡化HTML結構。

選擇符	簡介
::befor	在元素內部的前面插入內容
::after	在元素內部的後面插入內容

注意：

before和after

建立一個元素，但是屬於行內元素
新建立的這個元素在文件樹中是找不到的，所以我們稱為偽元素
語法：element::befor{}
before和after必須有content屬性，沒有內容為空即可content:' '。
befor在父元素內容的前面建立元素，after在父元素內容的後面插入元素
偽元素選擇器和標籤選擇器一樣，權重為1

偽元素選擇器使用場景：

1）偽元素字型圖示效果如下圖

<style>
@font-face {
    font-family: 'icomoon';
    /* 注意路徑! */
    src:  url('fonts/icomoon.eot?7kkyc2');
    src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
div {
    position: relative;
    width: 200px;
    height: 35px;
    border: 1px solid red;
}
div::after {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'icomoon';
    content: '\e91e';
    color: red;
    font-size: 18px;
}
</style>
<body>
    <div><div>
</body>

2）土豆網視訊顯示隱藏遮蔽罩效果如下圖

<body>
<div class="tudou">
    <img src="images/tudou.jpg" alt="">
</div>
</body>

<style>
.tudou { 
    position: relative;
    width: 44px;
    height: 320px;
    margin: 30px auto;
    background-color: pink;
}
.tudou img {
    width: 100%;
    height: 100%;
}
.tudou::befor {
    content:'';
    /* 隱藏遮蔽罩 */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3) url(images/arr.png) no-repeat center;
}
/* 當滑鼠經過了土豆這個盒子，就讓裡面的遮蔽罩顯示出來 */
.tudou:hover::befor {
    display: block;
}
</style>

3）偽元素清除浮動