1.Grouping Selectors 分組選擇器
在樣式表中有很多具有相同樣式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
為了盡量減少代碼，你可以使用分組選擇器。
每個選擇器用逗號分隔.
在下面的例子中，我們對以上代碼使用分組選擇器：
h1,h2,p
{
color:green;
}
2.嵌套選擇器
它可能適用于選擇器內部的選擇器的樣式。
選擇器的嵌套，在CSS中可以大大減少對class和id的聲明，因此，在構建頁面的HTML時，通常只給外層標記定義class或者id，內層標記能通過嵌套表示的則利用嵌套的方式，從而，不需要再定義新的class或者id，只有當子標記無法利用此規則時，才進行單獨的聲明
在下面的例子設置了三個樣式：
- 為所有p元素指定一個樣式
- 為所有class="marked"的元素指定一個樣式
- 為所有class="marked"元素內的p元素指定一個樣式
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
3.后代選取器
后代選取器匹配所有值得元素的后代元素。
以下實例選取所有 <p> 元素插入到 <div> 元素中:
···
<style>
div p {
background-color: yellow;//只要div后面的p就會顯示背景色，不管多靠后
}
</style>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
<div>test<p>neibu PP</p></div>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
···
4.子元素選擇器
與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。(只有親孩子一代才行)
···
<style>
div>p {
background-color: yellow;
}
</style>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div>
<p>My best friend is Mickey.</p>
···
5.相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
<style>
div+p {
background-color: yellow;
}
</style>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>//顯示黃色
<p>I will not be styled.</p>
6.后續兄弟選擇器
后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。
<style>
div~p {
background-color: yellow;
}
</style>
<p>之前段落，不會添加背景顏色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
7.** 偽類(Pseudo-classes)**
CSS偽類是用來添加一些選擇器的特殊效果。
<style>
a:link {
color: #000000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}
a.aaa:hover {//class也可以作為偽類的，這個時候，第二個鏈接，鼠標放上去顯示藍色而不會是紅色，第一個會顯示紅色
color: blue;
}
</style>
<a href="/css/" target="_blank">這是一個鏈接</a>
<a class="aaa" href="/css/" target="_blank">這是一個鏈接</a>
- CSS - :first - child偽類(:last-child)
您可以使用 :first-child 偽類來選擇元素的第一個子元素
···
<style>
p:first-child {
color: blue;
}
</style>
<p>This is some text.</p>//只有它顯示藍色，匹配了p的第一個元素的選擇器
<p>This is some text.</p>
···
選擇相匹配的所有<p>元素的第一個 <i> 元素
p > i:first-child
{
color:blue;
}
選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素
p:first-child i
{
color:blue;
}
具體的偽類：
- :checked 選擇器
:checked 選擇器匹配每個選中的輸入元素（僅適用于單選按鈕或復選框）(選擇上后，放大了選擇框)
<style>
input:checked {
height: 50px;
width: 50px;
}
</style>
<input type="radio" checked="checked" value="male" name="gender" /> Male
<br>
<input type="radio" value="female" name="gender" /> Female
<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike
<br>
<input type="checkbox" value="Car" /> I have a car
- :disabled 選擇器
:disabled 選擇器匹配每個禁用的的元素（主要用于表單元素）
設置所有type="text"的禁用的輸入元素的背景顏色為灰色
<style>
input[type="text"]:enabled {
background: #ffff00;
}
input[type="text"]:disabled {
background: #dddddd;
}
</style>
First name:
<input type="text" value="Mickey" />
<br> Last name:
<input type="text" value="Mouse" />
<br> Country:
<input type="text" disabled="disabled" value="Disneyland" />
<br>
- :empty 選擇器
:empty選擇器選擇每個沒有任何子級的元素（包括文本節點）
p:empty
{
background:#ff0000;
}
- :first-of-type (:last-of-type)選擇器
:first-of-type選擇器匹配元素其父級是特定類型的第一個子元素。
<style>
p:first-of-type {
background: #ff0000;
}
</style>
<h1>This is a heading</h1>
<p>The first paragraph.</p>//這是第一個匹配P的
<p>The second paragraph.</p>
<p>The third paragraph.</p>
- :in-range 選擇器
:in-range 選擇器用于標簽的值在指定區間值時顯示的樣式。
注意： :in-range 選擇器只作用于能指定區間值的元素，例如 input 元素中的 min 和 max 屬性。
<style>
input:in-range {
border: 2px solid green;//如果在范圍內，顯示綠色
}
input[type="number"]:out-of-range {
border: 2px solid red;//如果超出數字范圍，顯示紅色
}
</style>
<h3>:in-range 選擇器實例演示。</h3>
<input type="number" min="5" max="10" value="7" />
- :invalid 選擇器
:invalid 選擇器用于在表單元素中的值是非法時設置指定樣式。
注意： :invalid 選擇器只作用于能指定區間值的元素，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段, 合法的數字字段等。
<style>
input:invalid {
border: 2px solid red;//如果輸入錯誤，
顯示紅色，如果輸入正確的email的話，顯示正常邊框色
}
</style>
<h3> :invalid 選擇器實例演示。</h3>
<input type="email" value="supportEmail" />
:not 選擇器
:not(selector) 選擇器匹配每個元素是不是指定的元素/選擇器。
:not(p)
{
background:#ff0000;
}:nth-child() 選擇器
:nth-child(n)選擇器匹配父元素中的第n個子元素。
:nth-last-child() 選擇器
:nth-last-of-type(n)選擇器匹配同類型中的倒數第n個同級兄弟元素。
n可以是一個數字，一個關鍵字，或者一個公式。
:read-only 選擇器
-:required 選擇器
:required 選擇器在表單元素是必填項時設置指定樣式。
表單元素可以使用 required 屬性來設置必填項。
注意： :required 選擇器只適用于表單元素: input, select 和 textarea。:hover 選擇器
:hover在鼠標移到鏈接上時添加的特殊樣式。
提示: :hover 選擇器器可用于所有元素，不僅是鏈接。:first-letter 選擇器
:first-letter選擇器用來指定元素第一個字母的樣式。
8.屬性選擇器
例子1，把包含標題（title）的所有元素變為藍色
<style>
[title]
{
color:blue;
}
</style>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" >runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
實例2,改變了標題title='runoob'元素的邊框樣式
<style>
[title=runoob] {
border: 5px solid green;
}
</style>
<h2>將適用:</h2>
<img title="runoob" src="logo.png" width="270" height="50" />
<br>
<a title="runoob" >runoob</a>
<hr>
<h2>將不適用:</h2>
<p title="greeting">Hi!</p>
<a class="runoob" >runoob</a>
表單樣式
屬性選擇器樣式無需使用class或id的形式:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
