從零開始前端學習[29]:Css3中新增加的選擇器一
阿新 • • 發佈：2018-12-26
Css3中新增加的選擇器
- 以前的選擇器
- 新增加的選擇器
以前的選擇器
萬用字元選擇器
*{margin:10px auto;padding:10px}
ID選擇器:
#main{width:100px;height:100px;background:blue;}
class類選擇器
.main{width:1200px;height;50px;background:green;}
標籤選擇器
a{color:red;font:bold 22px/30px ""}
組合選擇器
.main div #box1{width:100px;height:100px;background:#152345}
後代選擇器
.main .p_style{color:white;font:bolder 18px/22px "";width:100px;height:22px}
子代選擇器
.main>p{width:100px;height:100px;box-shadow:0 0 10p 0 blue}
毗鄰選擇器
div+p{height:100px;width:100px;border:1px solid green;}
屬性選擇器
E[attr=val][attr]{height:100px;width:100px;border:1px solid green;} div[class~="somebody"]{height: 100px; width: 100px;} //屬性包含選擇器
偽類選擇器
div:hover{height: 100px; width: 100px; background: deeppink;}
新增加的選擇器
關聯選擇器
E1~E2(選擇E1後面緊鄰的E2元素)//注意與毗鄰選擇器的區別其會跳過中間其他的，而毗鄰選擇器如果遇到下一個標籤不是，則終止
.box1 p~p{ background: deeppink; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title 顯示如下:
模糊包含選擇器
模糊包含也就是類似於我們的正則表示式:
1:特殊符號^，表示以什麼開頭
^="text" 以text作為開頭的類選擇器
p[class^="text"]{ height: 100px; width: 100px; background: deeppink; }
2:特殊符號$表示以什麼結尾
$="text" 以text作為結尾的選擇器
p[class$="text"]{ height: 100px; width: 100px; background: deeppink; }
3：特殊符號*，表示包含什麼
*="text"只要包含text的，
p[class$="text"]{ height: 100px; width: 100px; background: deeppink; }
注意這三種運算子與屬性運算子之間的區別，如果屬性運算子E[class~=”aaaa”],aaaa表示的是一個完整的類名，而上述的三種其實都是在類名字串中所做的一些模糊匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px ;margin: 20px auto}
.main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}
.main div p,.main div div{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}
.main .box1 p[class^="head"]{background: greenyellow} /* ^表示以head開頭的模糊匹配*/
.main .box1 p[class$="footer"]{background: deeppink} /* $表示以footer結尾的模糊匹配*/
.main .box1 p[class*="middle"]{background: blue} /* *表示包含middle的類*/
.main .box1 p[class~="p1_1"]{background: brown} /*表示屬性中必須是一個完整的名字*/
</style>
</head>
<body>
<div class="main">
<div class="box1">
模糊匹配選擇器
<p class="headtext1"></p>
<p class="textfooter"></p>
<p class="textmiddlefooter"></p>
<div></div>
<p class="p1 p1_1 p1_2"></p>
<p></p>
</div>
</div>
</body>
</html>
新增加的偽類選擇器:first-of-type，last-of-type，only-of-type,nth-of-type(n),nth-last-of-type
first-of-type主要是篩選出父類中所有相同的子元素，然後選出其中的第一個
p:first-of-type{background:blue};
從父元素中篩選出所有的p元素，然後將第一個賦值
last-of-type主要是篩選出所有相同的子元素，然後對最後一個進行賦值
p:last-of-type{background:green}
篩選出父級中所有的p元素，然後對最後一個進行賦值
only-of-type主要篩選出父級元素中所有的標籤，判斷裡面是否是唯一的，如果是唯一的則選出，如果不是唯一的，則不會選中
pre:only-of-type{background:deeppink}
篩選出父級中唯一的pre標籤
nth-of-type(n);按照順序的方式， 主要是篩選出所有相同的子元素，然後選中其中的第n個元素，注意下表從1開始
p:nth-of-type(3){background:black;}
按照順序的方式,主要是篩選出所有相同的子元素，然後選中其中的第3個p元素
nth-last-of-type(n);按照逆序的方式，主要是篩選出所有相同子元素，然後按照逆序的形式選中其中的第n個元素,注意下標從1開始
p:nth-last-of-type(3){background:gold;}
按照逆序的方式,主要是篩選出所有相同的子元素，然後選中其中的第3個p元素
程式碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px ;margin: 20px auto}
.main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}
.main div p,.main div div,.main div pre{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}
.main div p:first-of-type{background: green}
.main div p:last-of-type{background: blue}
.main .box1 pre:only-of-type{background: deeppink}
.main div p:nth-of-type(5){background: gold}
.main div p:nth-last-of-type(3){background: darkmagenta}
</style>
</head>
<body>
<div class="main">
<div class="box1">
first-of-type<br>
last-type-of<br>
only-of-type
<div>1</div>
<p >2</p>
<p >3</p>
<p >4</p>
<pre>5</pre>
<p >6</p>
<p>7</p>
<div>8</div>
<p >9</p>
<p>10</p>
<p >11</p>
<p>12</p>
</div>
</div>
</body>
</html>顯示如下所示:
偽類選擇器child系列之only-child,last-child,nth-child,nth-last-child；
首先child是子類的意思，這組偽類選擇器也就是選中在某個位置的子類，注意是從1開始的下標，子類標籤對應的位置和其偽類對應都要相互對應，中間不能包括文字或其他標籤
only-child排列在第一個位置的標籤的選擇
.main div div:first-child{background: green}
注意這裡的div必須是排列在父類中的第一個元素
last-child排列在最後一個元素
.main div p:last-child{background: darkmagenta}
注意這裡的p必須是排列在父類中的最後一個元素
nth-child(n)
.main div p:nth-child(3){background: blue}
注意這裡的p必須是排列在父類中的第三個元素，並且元素對應的標籤是p
nth-last-child(n)
.main .box1 pre:nth-last-child(8){background: deeppink}
注意這裡的p必須是排列在父類中的倒數第8個元素，並且元素對應的標籤是pre
例項程式碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px ;margin: 20px auto}
h3{text-align: center}
.main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00;text-align: center}
.main div p,.main div div,.main div pre{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}
.main div div:first-child{background: green}
.main div p:nth-child(3){background: blue}
.main .box1 pre:nth-last-child(8){background: deeppink}
.main div p:last-child{background: darkmagenta}
</style>
</head>
<body>
<div class="main">
<h3>first-child, last-child, nth-child,nth-last-child</h3>
<div class="box1">
<div>1</div>
<p >2</p>
<p >3</p>
<p >4</p>
<pre>5</pre>
<p >6</p>
<p>7</p>
<div>8</div>
<p >9</p>
<p>10</p>
<p >11</p>
<p>12</p>
</div>
</div>
</body>
</html>
以上就是關於新增加的一些偽類選擇器