在css3提供的新選擇器之前,選擇一個元素需要藉助id或者class,css3新增的選擇器可以更靈活的去選擇需要的元素,那css3提供了哪些好用的選擇器呢?
首先就是屬性選擇器,我們可以通過屬性選擇器在同樣的標籤/類中選擇出具有相同屬性的元素,不用額外再新增class或者id。
比如需要選擇出input標籤中具有value屬性的內容,就可以按以下方式
// css
input[value]{
color: #333;
}
// html
<input type="text" value="請輸入使用者名稱">
<input type="text">
屬性選擇器還有以下匹配規則(E表示選擇器,att表示屬性值,val表示匹配的內容)
選擇符 | 簡介 |
---|---|
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元素 |
選擇出input標籤中type為password的元素
// css
input[type=password]{
color: #000
}
// html
<input type="text">
<input type="password">
選擇出div標籤中class以movie開頭的元素
// css
div[class^=movie]{
color: brown
}
// html
<div class="movie-sky">天空之城</div>
<div class="movie-cat">龍貓</div>
<div class="movie-windy">起風了</div>
<div class="tv">武林外傳</div>
按照以上五種屬性選擇規則,可以自由的選擇具有某些特徵的元素,那麼如果此時我需要選擇的元素沒有單獨的屬性呢。
比如我想要在一串列表中選擇出奇數項和偶數項元素,分別設定不同的背景顏色,此時就需要結構偽類選擇器登場了。
結構偽類選擇器可以按下標選出指定項,比如第一項 :first-child,最後一項 :last-child,奇數項 :nth-child(even),偶數項 :nth-child(odd),第任何一項 :nth-child(n)
拿上述選擇器做一個演示
// html
<ul>
<li>千與千尋的神隱</li>
<li>起風了</li>
<li>龍貓</li>
<li>天空之城</li>
<li>魔女宅急便</li>
</ul>
// css
ul :first-child {
color: brown // 選擇ul的第一個子元素設定字型顏色為棕色
}
ul :last-child {
text-decoration: underline; // 選擇ul的最後一個子元素設定下劃線
}
ul :nth-child(even){
font-weight: bold; // 選擇ul的偶數子元素 設定字型加粗(下標從1開始)
}
可以看到,以上每一個偽類選擇器與前一個選擇器並沒有直接連在一起,都有一個空格,那連在一起表示什麼意思呢?拿 :first-child來舉例,:last-child和 :nth-child都是類似的原理
ul :first-child 表示選擇ul裡的第一個子元素
ul:first-child 表示選擇第一個ul元素
以下為 ul:first-child
如果我們需要對子元素的選擇器屬性進行校驗,希望選擇ul裡的第一個子元素,並且是li,那麼就可以這樣定義
ul li:first-child
但是如果第一個元素與選定的元素不匹配,那麼設定的樣式就不會生效
// css
div p:first-child {
color: brown // 先找到div的第一個子元素,發現它並不是p元素,所以樣式不生效
}
// html
<div>
<div>div----千與千尋的神隱</div>
<p>p----起風了</p>
<p>p----龍貓</span>
<h6>h6----天空之城</h6>
<div>div----魔女宅急便</div>
</div>
那如果,我們想要選擇div下面的第一個p元素呢?此時就可以使用 :first-of-type
// 表示選擇div下p元素的第一個子元素
div p:first-of-type {
color: brown
}
那如果沒有限定指定的子元素型別,所有的不同型別的子元素都會被設定樣式
// css
div :first-of-type {
color: brown
}
與 :first-of-type 類似的還有以下兩種選擇器,分別是 :last-of-type(選擇某種型別的最後一個子元素),:nth-of-type(按指定規則選擇元素)
// css
div :first-of-type {
color: brown
}
div :last-of-type {
text-indent: 10px;
}
div :nth-of-type(2n+1) {
text-decoration: underline;
}
來一個表格總結以下以上六種結構偽類選擇器
選擇符 | 簡介 | 備註 |
---|---|---|
E :first-child | 選擇E元素的第一個子元素 | E A:first-child(選擇E元素的第一個子元素,且該子元素是A型別元素) |
E :last-child | 選擇E元素的最後第一個子元素 | E A:last-child(選擇E元素的最後第一個子元素,且該子元素是A型別元素) |
E :nth-child(n) | 選擇E元素的指定規則元素,比如 1、2、3這樣的數位,even(偶數)、odd(基數)這樣的關鍵字,n或者2n+1這樣的表示式 | E A:nth-child(n)(選擇E元素中符合指定規則的子元素,且該子元素是A型別的元素) |
E :first-of-type | 選擇E元素中不同型別的子元素中的第一個 | E A:first-of-type(選擇E元素中子元素為A,A元素中的第一個) |
E :last-of-type | 選擇E元素中不同型別的子元素中的最後一個 | E A:last-of-type(選擇E元素中子元素為A,A元素中的最後一個) |
E :nth-of-type(n) | 選擇E元素的不同型別的指定規則 | E A:nth-of-type(選擇E元素中子元素為A,A元素的指定規則) |
以上的屬性選擇器和結構偽類選擇器都是操作元素本身,那接下來這個選擇器就很神奇,它會新增一個新的不存在的元素,並操作,一起來看看偽元素選擇器。
偽元素選擇器有兩個,::before,在元素的前面新增一個行內元素,::after,在元素的後面新增一個行內元素,需要新增兩個冒號,為了相容,也可以只寫成一個冒號
設定偽元素,必須的屬性是 content,其它的屬性可以根據自己的需要設定,它常見的有以下幾種用途,新增一個小圖示,比如圓點,箭頭
實現程式碼如下
// css
div {
position: relative;
}
div::after {
position: absolute;
top: 7px;
left: 70px;
content: '';
display: block;
width: 7px;
height: 7px;
border-right: 1px solid #333;
border-top: 1px solid #333;
transform: rotate(45deg)
}
// html
<div>檢視更多</div>
或者設定滑鼠滑動後新增一個遮罩層,效果顯示如下
實現程式碼如下
// css
div{
position: relative;
width: 200px;
height: 200px;
margin-right: 60px;
}
img {
width: 100%;
height: 100%;
}
div::after {
display: none;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url(./src/broadcast.png) rgba(0,0,0,.5) center center no-repeat
}
div:hover::after{
display: block;
}
// html
<div>
<img src="./src/pig.jpg">
</div>
css3增加的以上選擇器可以減少html的結構,更加靈活的獲取需要的元素