CSS3複雜選擇器的詳解
- 高洛峰原創
- 2017-03-24 11:22:241564瀏覽
今天把影片裡的CSS3複雜選擇器部分看完了，來整理一下學到的知識點。
1、兄弟選擇器：同一位置級別，可稱為兄弟元素
a、相鄰兄弟選擇器：next
#緊緊接在【目前元素之後的】(一個)，指定選擇器的元素
語法：透過「+」作為結合符
eg: p+p ->緊接在p後面的p元素
<!-- demo.html -->
<html>
<head>
<title></title>
</head>
<body>
<p>这是第一个段落</p>
<div id="d1">这是一个div</div>
<span>这是一个span</span>
<p class="p1">这是第二个段落</p>
<b>Hello World</b>
<p class="p2">这是第三个段落</p>
</body>
</html>
/*demo.css*/
div+p{
background: yellow;
}
#d1+p{
background: red;
}
span+.p1{
background: blue;
}b、通用兄弟選擇器：next_all
符合某元素【後面所有】的滿足指定選擇器的兄弟元素
語法：使用「~」作為結合符
eg：p~p{} ->匹配p後面所有的p
2、屬性選擇器：使用元素所附帶的屬性，用於選擇器當中，作為選擇元素的條件
語法：[屬性相關內容]
eg：[id] ->具備id屬性的所有元素
p[id] -> ;具備id屬性的p元素
a、[id],p[id]
b、p[id][class] ->既具備id又具備class的p元素
c、p[id="p1"] ->id值為"p1"的p元素
d、p[class~="value"]
e、p[class^=" b"] ->符合class屬性值以b開始的p標記
f、p[class*="b"] ->符合class屬性值中包含b的p標記
g、p[ class$="b"] ->符合class屬性值以b結尾的p標記
<!-- demo.html -->
<html>
<head>
<title></title>
</head>
<body>
<p class="clear p1 myself">
这是第四个段落
</p>
<div class="userContent">
文本内容
</div>
</body>
</html>
/*demo.css*/
p[class]{
color: #e4393c;
}
p[class~='p1']{
background-color: #cd2c2d;
color: #fff;
}
div[class ^= "us"]{
background-color: #bfb;
}
div[class$="t"]{
background-color: #bfb;
color: #333;
}3、偽類別選擇器
a、目標偽類：突顯活動的HTML錨點
文法：:target
b、元素狀態偽類別：多數用在表單元素上
1
偽類別：多數用在表單元素上
1
偽類：多數用在表單元素上
1偽類：多數用在表單元素上 1
偽類：多數用在表單元素上
、:enabled ->符合每個啟用的元素
2、:disabled ->符合每個已停用的元素
3、:checked ->符合已選取的表單元素(只選取的表單元素(只選取適用於checkbox,radio)
c、結構偽類別
:first-child ->符合屬於其父元素中的第一個子元素 2、; last-child ->符合屬於其父元素中的最後一個子元素
3、:empty ->符合沒有子元素的元素(文字內容或空格也算子元素) 4、: only-child ->符合屬於其父元素中的唯一子元素 d、否定偽類別：符合非指定選擇器的元素
語法：:not(selector)<!-- demo01.html 目标伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<a href="#Tom">猫和老鼠(Tom and Jerry)</a>
<a href="#Atongmu">铁臂阿童木</a>
<a href="#BlackCat">黑猫警长</a>
<br>
<a name="Tom">第一部：Tom and Jerry</a>
<p style="height: 500px;">Tom and Jerry</p>
<div id="Atongmu" style="height: 500px;">我是阿童木</div>
<div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>
</body>
</html>
/*demo01.css*/
a:target,div:target{
background-color: #bfb;
font-size: 20pt;
}<!-- demo02.html 结构伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<p>This is a p</p>
</div>
<div id="d3">
This id d3
</div>
<div id="d4">
<b>first</b>
<b>second</b>
<b>third</b>
<b>last</b>
</div>
</body>
</html>
/*demo02.css*/
div{
width: 100px;
height: 100px;
}
b{
display: block;
}
div:empty{
background-color: #bfb;
}
p:only-child{
background-color: #fbf;
}
b:first-child{
font-size: 2em;
color: #fbb;
}
b:last-child{
font-size: 3em;
font-weight: normal;
color: #bbf;
}<!-- demo03.html 伪元素状态伪类 -->
<html>
<head>
<title></title>
</head>
<body>
用户名称：<input type="text"><br>
用户昵称：<input type="text" disabled value="请输入您的昵称">
<br>
性别：<input type="radio" name="rdoGender">男
<input type="radio" name="rdoGender">女
</body>
</html>
/*demo03.css*/
input:enabled{
color: red;
}
input:disabled{
border: 1px solid #f00;
}
input[name=rdoGender]:checked{
background-color: #bfb;
}<!-- demo04.html 否定伪类 -->
<html>
<head>
<title></title>
</head>
<body>
<div>
用户名称：<input type="text"><br>
用户密码：<input type="password"><br>
<input type="submit" value="提交">
<input type="button" value="按钮">
</div>
</body>
</html>
/*demo04.css*/
input:not(:last-child){
border: 1px solid #f00;
}
<!-- demo.html 为元素选择器 -->
<html>
<head>
<title></title>
</head>
<body>
<p>
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
</p>
<span>
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
</span>
</body>
</html>
/*demo.css*/
p{
width: 200px;
border: 1px solid #bfb;
margin: 10% auto;
text-indent: 5px;
}
span{
/*float: right;*/
/*display: inline-block;*/
position: absolute;
top: 300px;
left: 500px;
}
p:first-letter{
font-size: 20pt;
color: #fbb;
}
p:first-line{
font-style: italic;
}
span:first-line{
font-style: italic;
background-color: #ffb;
}
p::selection{
background-color: #bbf;
color: #fbf;
}###以上就是我在影片中學到的所有內容，若有錯誤或不足，希望瀏覽者提出，及時指正。 。 ######今天是我開通部落格的第二天，這是我寫的第一篇文章，在這裡發表完全是當做自己的學習筆記，希望可以記錄自己的成長。 ###以上是CSS3複雜選擇器的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！