CSS3-7.4-CSS3新增選擇器
選擇器：
熟練地使用這些選擇器，可以少寫很多的class名稱以及id名稱，極大地提高了代碼整潔度
CSS3新增選擇器
1.屬性選擇器
2.結構僞類選擇器
3.狀態僞類選擇器
4.其他選擇器
一：屬性選擇器
- 屬性選擇器是針對元素屬性進行選擇的
- 利用DOM(文檔對象模型)實現元素過濾，通過DOM的相互關係來匹配特定的元素屬性
- 可以減少文檔內對class屬性和id屬性的定義
部分屬性選擇
1.E[att]：選擇具有att屬性的E元素
2.E[att=“val”]：選擇具有att屬性且屬性值等於val的E元素
3.E[att^=“val”]：選擇具有att屬性且屬性值以val開頭的字符串的E元素
4.E[att$=“val”]：選擇具有att屬性且屬性值以val結尾的字符串的E元素
5.E[att*=“val”]：選擇具有att屬性且屬性值爲包含val的字符串的E元素
1、E[att]
- 選擇具有att屬性的E元素
2、E[att=“val”]
- 選擇具有att屬性且屬性值等於val的E元素
3、E[att^=“val”]
- 選擇具有att屬性且屬性值以val開頭的字符串的E元素
4、E[att$=“val”]
- 選擇具有att屬性且屬性值以val結尾的字符串的E元素
5、E[att*=“val”]
- 選擇具有att屬性且屬性值爲包含val的字符串的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style type="text/css">
/* 選擇具有title屬性的p
設置字體爲pink */
div p[title]{
color: pink;
}
/* 選擇具有select屬性且屬性值是select的option
設置字體爲white */
div option[select="select"]{
color: white;
}
/* 選擇具有select屬性且屬性值以sel開頭的option
設置背景爲red */
div option[select^="sel"]{
background-color: red;
}
/* 選擇具有disabled屬性且屬性值以led結尾的option
設置字體爲粗 */
div option[disabled$="led"]{
font-weight: bold;
}
/* 選擇具有disabled屬性且屬性值含有led的option
設置背景爲藍色 */
div option[disabled*=led]{
background-color: blue;
}
</style>
</head>
<body>
<div>
<p title="study">前端學習</p>
<select name="kuangjia">
<option>框架</option>
<option select="select">Bootstrap</option>
<option disabled="disabled">JQuery</option>
<option>AngularJS</option>
</select>
</div>
</body>
</html>
效果動態圖
二：結構僞類選擇器
- 結構僞類選擇器利用DOM實現元素過濾
- 通過DOM的相互關係來匹配特定的元素
- 可以減少文檔內對class屬性和id屬性的定義
部分結構僞類選擇器
1.E:nth-child(n)：匹配父元素的第n個子元素E
2.E:first-of-type：匹配同類型中的第一個同級兄弟元素E
3.E:only-child：匹配父元素僅有的一個子元素E
4.E:empty：匹配沒有任何子元素（包括text節點）的元素E
1、E:nth-child(n)
- 匹配父元素的第n個子元素E
2、E:first-of-type
- 匹配同類型中的第一個同級兄弟元素E
3、E:only-child
- 匹配父元素僅有的一個子元素E
4、E:empty
- 匹配沒有任何子元素（包括text節點）的元素E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>結構僞類選擇器</title>
<style type="text/css">
/* 選定父類中的第二個元素 */
div p:nth-child(2){
color: pink;
}
/* 選定父類中第一個同類型子元素 */
div p:first-of-type{
font-style: italic;
}
/* 選定父元素僅有一個子元素 */
div h1:only-child{
text-decoration: underline;
}
/* 選定沒有任何子元素的元素 */
div p:empty{
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<h2>標題二</h2>
<p>段落一</p>
<p>段落二</p>
<p></p>
</div>
<div>
<h1>標題一</h1>
</div>
</body>
</html>
效果圖
三：狀態僞類選擇器
- 狀態僞類選擇器也叫UI狀態僞類選擇器
- 常用於表單控件
- 頁面中被禁用的輸入框
- 選中頁面中被選中的複選框
常見的UI狀態僞類選中器
1.E:enabled：匹配用戶界面上處於可用狀態的元素E
2.E:disabled：匹配用戶界面上處於禁用狀態的元素E
3.E:checked：匹配用戶界面上處於選中狀態的元素E
1、E:enabled
- 匹配用戶界面上處於可用狀態的元素E
2、E:disabled
- 匹配用戶界面上處於禁用狀態的元素E
3、E:checked
- 匹配用戶界面上處於選中狀態的元素E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>狀態僞類選擇器</title>
<style type="text/css">
/* 選中可操作的input */
input:enabled{
font-weight: bold;
}
/* 選中被禁用的input */
input:disabled{
background-color: red;
}
/* 選中被選中的input */
input:checked{
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<form action="" method="post">
請輸入用戶名:
<input type="text" name="username" value="" placeholder="用戶名"> <br> <br>
請輸入密碼:
<input type="password" name="password" value="123" disabled="disabled"> <br> <br>
愛好:
<input type="checkbox" name="like" value="bk" checked="checked"> 籃球
<input type="checkbox" name="like" value="fb" > 足球
<input type="checkbox" name="like" value="si"> 游泳
</form>
</body>
</html>
效果動態圖
四：其他選擇器
CSS3其他選擇器
1.E~F:兄弟選擇器，選擇E元素所有兄弟元素F
2.E:not(s)：否定僞類選擇器，匹配不含有s選擇符的元素E
3.E:after/E::after：設置在對象後發生的內容
1、E~F
- 兄弟選擇器
- 選擇E元素所有兄弟元素F
2、E:not(s)
- 否定僞類選擇器
- 匹配不含有s選擇符的元素E
3、E:after/E::after
- 設置在對象後發生的內容
- 必須定義content屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3其他選擇器</title>
<style type="text/css">
/* 兄弟選擇器
選擇p元素所有兄弟元素span */
div p~span{
font-weight: bold;
}
/* 否定僞類選擇器
選擇不含有s選擇符的元素p */
p:not(span){
text-decoration: line-through;
}
/* 設置在對象後發生的內容 */
.span:after{
background: #f00;
color: #00f;
content:" ,這是添加的內容";
}
</style>
</head>
<body>
<div>
<p>第一個p標籤</p>
<p>第二個p標籤</p>
<span class="span">第一個span標籤</span> <br>
<span>第二個span標籤</span>
</div>
</body>
</html>
效果圖
