交集選擇器
交集選擇器由兩個選擇器直接連接構(gòu)成，其中第一個選擇器必須是元素選擇器，第二個選擇器必須是類選擇器或者 ID 選擇器，兩個選擇器之間必須連續(xù)寫，不能有空格。
交集選擇器選擇的元素必須是由第一個選擇器指定的元素類型，該元素必須包含第二個選擇器對應(yīng)的 ID 名或類名。交集選擇器選擇的元素的樣式是三個選擇器樣式，即第一個選擇器;
語法：
元素選擇器 . 類選擇器｜ #ID 選擇器 {
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
}
語法說明：“類選擇器｜ ID 選擇器”表示使用類選擇器，或者使用 ID 選擇器。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用交集選擇器設(shè)置樣式 </title>
<style>
/* 元素選擇器設(shè)置邊框和下外邊距樣式 */
div {
border: 5px solid red;
margin-bottom:20px;
}
/* 交集選擇器設(shè)置背景顏色 */
div.txt {
background:#33FFCC;
}
/* 類選擇器設(shè)置字體格式 */
.txt {
font-style:italic;
}
</style>
</head>
<body>
<div> 元素選擇器效果 </div>
<div class="txt"> 交集選擇器效果 </div>
<span class="txt"> 類選擇器效果 </p>
</body>
</html>
并集選擇器
并集選擇器也叫分組選擇器或群組選擇器，它是由兩個或兩個以上的任意選擇器組成的，不同選擇器之間用“，”隔開，實現(xiàn)對多個選擇器進(jìn)行“集體聲明”。
并集選擇器的特點是所設(shè)置的樣式對并集選擇器中的各個選擇器都有效。
并集選擇器的作用是把不同選擇器的相同樣式抽取出來，然后放到一個地方作一次性定義，從而簡化了 CSS 代碼量。
語法：
選擇器 1,
選擇器 2,
選擇器 3,
{
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
}
語法說明：選擇器的類型任意，既可以是基本選擇器，也可以是一個復(fù)合選擇器。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用并集選擇器設(shè)置樣式 </title>
<style>
div {
margin-bottom:10px;
border:3px solid red;
}
span {
font-size:26px;
}
p {
font-style:italic;
}
/* 使用并集選擇器設(shè)置元素的公共樣式 */
span,
.p1,
#d1 {
background:#CCC;
}
</style>
</head>
<body>
<div id="d1"> 這是 DIV1</div>
<div> 這是 DIV2</div>
<p class="p1"> 這是段落一 </p>
<p> 這是段落二 </p>
<span> 這是一個 SPAN</div>
</body>
</html>
后代選擇器
后代選擇器又稱包含選擇器，用于選擇指定元素的后代元素。使用后代選擇器可以幫助我們更快更確切地找到目標(biāo)元素。
語法：
選擇器 1 選擇器 2 選擇器 3 {
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
}
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用后代選擇器設(shè)置樣式 </title>
<style>
#box1 .p1 { /* 后代選擇器 */
background:#CCC;
}
#box2 p { /* 后代選擇器 */
background:#CFC;
}
</style>
</head>
<body>
<div id="box1">
<p class="p1"> 段落一 </p>
<p class="p2"> 段落二 </p>
</div>
<div id="box2">
<p class="p1"> 段落三 </p>
<p> 段落四 </p>
</div>
<p class="p1"> 段落五 </p>
<p> 段落六 </p>
</body>
</html>
子元素選擇器
后代選擇器可以選擇某個元素指定類型的所有后代元素，如果只想選擇某個元素的所有子元素，則需要使用子元素選擇器。
語法：
選擇器 1> 選擇器 2 {
屬性 1: 屬性值 1;
屬性 2: 屬性值 2;
}
語法說明：“>”稱為左結(jié)合符，在其左右兩邊可以出現(xiàn)空格，“選擇器 1> 選擇器 2”的含意為“選擇作為選擇器 1 指定元素的所有選擇器 2 指定的子元素”.
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 子元素選擇器應(yīng)用示例 </title>
<style>
h1>span {
color:red;
}
</style>
</head>
<body>
<h1> 這是非常非常 <span> 重要 </span> 且 <span> 關(guān)鍵 </span> 的一步。</h1>
<h1> 這是真的非常 <em><span> 重要 </span> 且 <span> 關(guān)鍵 </span></em> 的一步。</h1>
</body>
</html>
相鄰兄弟選擇器
如果需要選擇緊接在某個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
語法:
選擇器 1+ 選擇器 2 {
屬性 1: 屬性值 1;
屬性 2: 屬性值 2;
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 相鄰兄弟選擇器應(yīng)用示例 </title>
<style>
h1+p {
color:red;
font-weight:bold;
margin-top:50px;
}
p+p{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1> 這是一個一級標(biāo)題 </h1>
<p> 這是段落 1。</p>
<p> 這是段落 2。</p>
<p> 這是段落 3。</p>
</body>
</html>
屬性選擇器
在 CSS 中，我們還可以根據(jù)元素的屬性及屬性值來選擇元素，此時用到的選擇器稱為屬性選擇器。屬性選擇器的使用主要有 2 種形式，
語法:
屬性選擇器 1 屬性選擇器 2...{
屬性 1: 屬性值 1;
屬性 2: 屬性值 2;
}
元素選擇器屬性選擇器 1 屬性選擇器 2... {
屬性 1: 屬性值 1;
屬性 2: 屬性值 2;
}
語法說明：屬性選擇器的寫法是 [ 屬性表達(dá)式 ]，其中屬性表達(dá)式可以是一個屬性名，也可以是“屬性＝屬性值”等這樣的表達(dá)式.
屬性選擇器的應(yīng)用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 屬性選擇器的應(yīng)用 </title
<style>
[title] {/* 選擇具有 title 屬性的元素 */
color: #F6F;
}
a[href][title]{/* 選擇同時具有 href 和 title 屬性的 a 元素 */
font-size: 36px;
}
img[alt] {/* 選擇具有 alt 屬性的 img 元素 */
border: 3px #f00 solid;
}
p[align="center"] {/* 選擇 align 屬性等于 center 的 p 元素 */
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<h2> 應(yīng)用屬性選擇器樣式：</h2>
<h3 title="Helloworld">Helloworld</h3>
<a title=" 首頁 "href="#"> 返首頁 </a><br/><br/>
<img src="miaov.jpg" alt="logo" />
<p align="center"> 段落一 </p>
<hr />
<h2> 沒有應(yīng)用屬性選擇器樣式
<h3>Helloworld</h3>
<a href="#"> 返首頁 </a><br/><br/>
<img src="miaov.jpg">
<p align="right"> 段落二 </p>
</body>
</html>
到此這篇關(guān)于CSS復(fù)合選擇器的具體使用方法的文章就介紹到這了,更多相關(guān)CSS復(fù)合選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
