目錄
1.複合選擇器
複合選擇器包括交集選擇器、並集選擇器、後代選擇器和子選擇器等；
1.1 交集選擇器；
可以將一個標籤設置成多個共同的屬性值；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集選擇器</title>
<style type="text/css">
/* 設置字體大小爲20px; */
p{
font-size: 20px;
}
/* 設置字體顏色爲紅色 */
.c{
color:red;
}
/* 將兩個屬性合併在一起的選擇器，且可以增加額外的屬性，作用於運用了class選擇器的字段 */
p.c{
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
<p id="p3" class="c">段落三</p>
<h1 id="h1" class="c">字體一</h1>
<h2 id="h2">字體二</h2>
<div id="d1">方塊1</div>
</body>
</html>
這裏的段落三擁有font-size:20px的屬性以及color:red的屬性，現在要求段落三還需要添加額外的屬性，這時可以用到交集選擇器；
運行結果：
1.2並集選擇器；
可以簡單的將多個標籤增加同一種屬性；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>並集選擇器</title>
<style type="text/css">
/* 設置字體大小爲20px; */
p{
font-size: 20px;
}
/* 設置字體顏色爲紅色 */
.c{
color:red;
}
/* 將兩個屬性合併在一起的選擇器，且可以增加額外的屬性，作用於運用了class選擇器的字段 */
p.c{
text-decoration: underline;
}
/* 將所有的標籤都加上背景色 */
p,h1,#d1{
background-color: gray;
}
</style>
</head>
<body>
<p id="p1" class="c">段落一</p>
<p id="p2">段落二</p>
<p id="p3">段落三</p>
<h1 id="h1">字體一</h1>
<h2 id="h2">字體二</h2>
<div id="d1">方塊1</div>
</body>
</html>
運行效果：
1.3後代選擇器；
如下，若將含有p標籤的後代所有的span設置爲紅色，其他span標籤不變，則用到後代選擇器；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
color:yellow;
}
/* 將含有p標籤的span設置爲紅色，其他span標籤不變 */
p span{
color:red;
}
</style>
</head>
<body>
<div>一層<p>二層<span>三層</span></p></div>
<span>二代</span><br/>
<div>三代</div><br/>
</body>
</html>
運行結果：
1.4子選擇器；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 將含有div的第一代span設置爲紅色，後面的span不動 */
div>span{
color:red;
}
</style>
</head>
<body>
<div>
<span>一層</span>
<p><span>二層</span></p>
</div>
</body>
</html>
運行結果：
2.繼承特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c{
color:red;
}
</style>
</head>
<body>
<h1>Java技術</h1>
<ul>
<!-- 將第一層設置爲紅色，後面的HTML,CSS,JS等都會設置爲紅色 -->
<li class="c">網頁基礎
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaSript</li>
</ul>
</li>
<li>動態網頁</li>
<li>J2SE框架</li>
</ul>
</body>
</html>
運行效果：
3.層疊特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
color:blue;
}
.red{
color:red;
}
#d{
color:green;
}
</style>
</head>
<body>
<!-- 標記選擇器 -->
<p>第一行文本</p>
<!-- 類別選擇器>標記選擇器 -->
<p class="red">第二行文本</p>
<!-- ID選擇器>類別選擇器>標記選擇器 -->
<p class="red" id="d">第三行文本</p>
<!-- 行內樣式>ID選擇器>類別選擇器>標記選擇器 -->
<p style="color:yellow" class="red" id="d">第四行文本</p>
</body>
</html>
運行結果：
由此可見：行內樣式>ID選擇器>類別選擇器>標記選擇器