css的復合選擇器與特性
在本篇學習資料中，將深入了解css的相關概念，上一篇介紹的3種基本選擇器的基礎上，學習3種由基本選擇器復合構成的選擇器，然后再介紹css的兩個重要的特性。
1、復合選擇器
復合選擇器就是兩個或多個基本選擇器，通過不同的方式連接成的選擇器。
復合選擇器的三種類型：交集選擇器、並集選擇器、后代選擇器。
（1）交集選擇器
“交集”復合選擇器由兩個選擇器直接連接構成；其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器；這兩個選擇器之間不能有空格。
例如：下圖聲明了 p、.special、p.special這三種選擇器：
案列代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>交集復合選擇器</title>
<style type="text/css">
p{
color:blue;
}
p.special
{
color:red;
}
.special:
{
color:green;
}
</style>
</head>
<body>
<p>普通段落文本（藍色）</p>
<h3> 普通標題文本（黑色）</h3>
<p class="special">指定了.special類別的段落文本（紅色）</p>
<h3 class="special">指定了.special類別的段落文本(綠色)</h3>
</body>
</html>
案例代碼中定義了p 標記的樣式，也定義“.special”類別的樣式，此外還單獨定義了p.special用於特殊的控制，而在這個p.special中定義的風格樣式僅僅適合用於<p class="special">，而不會影響使用.special的其他標記。
（2）並集選擇器
並集選擇器簡稱“集體聲明”；並集選擇器是多個選擇器通過逗號連接而成的。
案列演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>並集選擇器</title>
<style type="text/css">
h1,h2,h3,h4,h5,p{
color:green;
font-size:1px;
}
h2.special,.special,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>案例文字1</h1>
<h2 class="special">案例文字2</h2>
<h3>案例文字3</h3>
<h4>案例文字4</h4>
<h5>案例文字5</h5>
<p>案例文字p1</p>
<p class="special">案例文字p2</p>
<p id="one">案例文字p3</p>
</body>
</html>
案列中可以看到所有行的顏色都是綠色，而且字體大小均為15px。這種集體聲明的效果與單獨聲明的效果完整相同 h2.special 、.special 和#one的聲明並不會影響前一個的集體聲明，第二行和最后兩行在綠色和大小為15px的前提下使用了下划線進行突出。
（3）后代選擇器
css選擇器中，還可以通過嵌套的方式對特殊位置的html 標記進行聲明，例如當<p>與</p>之間包含<span></span>標記時，就可以使用后代選擇器進行相應的控制。后代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔。當標記發生嵌套時，內層的標記就成為外層標記的后代。
例如，假設有下面的代碼：
<p>外層的文字，<span>中間的文字<b>內層的文字</b></span></p>
外層是<p>標記，里面嵌套了<span>標記，<span>標記中又嵌套了<b>標記，則稱<span>是<p>的子元素，<b>是<span> 的子元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>后代選擇器</title>
<style type="text/css">
p span{
color:blue;
}
span{
color:yellow;
}
</style>
</head>
<body>
<p>嵌套使<span>用css（藍色）</span>標記的方法</p>
嵌套之外的<span>標記（黃色）</span>不生效
</body>
</html>
通過將span選擇器嵌套在p選擇器中進行聲明，顯示效果只適合用於<p>和</p>之間的<span>標記，而其外的<span>標記並不產生任何效果；只有第一行中<span>和</span>之間的文字變成了藍色，而第二行文中 <span>和</span>之間的文字則是按照第二條css樣式規則設置的，即為黃色。
**選擇器的嵌套在css編寫中可以大大減少對class和ID的的生聲明。
在css2中還規定了一種符合選擇器，稱為“子選擇器”，也就是只對直接后代有影響的選擇器，而對子孫以及多層的后代不會產生作用。
**子選擇器和后代選擇器的語法區別在於使用大於號連接：
<p>外層的內容，<span>中間的內容b>內層的內容</b></span></p>
假設上面的內容css設置為：
p>span{
color:yellow;
}
效果是僅有“中間的內容”這幾個字變為黃色，因為span是p的直接后代，b是p的“孫子”不在選中范圍內。
2、CSS的繼承特性
css的繼承指的是子標記可以會繼承父標記的所有的樣式風格，並可以在父標記樣式風格的基礎上再加上修改，產生新的樣式，且子標記的樣式風格完全不會影響父標記。
子標記會繼承父標記中的樣式：
<p>老羅是<b>NB</b>類型的人</p>
假設上面的內容css設置為:
p{
color:green;
text-decoration：underline;
}
b{
color:red;
}
案列效果為：
上圖可以看到b繼承了下划線樣式，還改變了顏色 。而且子標記的樣式風格完全不會影響父標記，這樣就可以實現CSS樣式的共用。
3、CSS的層疊特性
層疊特性可概括為各樣式間的優先級順序，當產生沖突時以優先級高的為准。
各個樣式優先級排行：
行內樣式>ID樣式>class樣式>標記樣式
當兩個類別樣式優先級相同時，此時以寫在前者為准（寫在前面>寫在后面）。如：<p class="p1 p2">此時p1樣式優先</p>
以上內容部分出自www.ptpress.com.cn