CSS3 選擇器
Holle！最近很多人再問CSS選擇器重要嗎？有什麼作用？閱本篇文章君知曉 ?
| 文章目錄名稱 |
|---|
| 選擇器概念 |
| 類選擇器 |
| ID 選擇器 |
| 包含選擇器 |
| 子選擇器 |
| 優點 | 缺點 |
|---|---|
| 詳情如下 | 詳情如下 |
1.選擇器概念
作用： 減少對 HTML類 和 ID 的依賴，使編寫網頁更加輕鬆簡單。
通俗來講選擇器就是很明確地告訴瀏覽器要去渲染 HTML 節點中某個位置的樣式，相當於路標、指示牌。
每種選擇器都存在不同的指示作用，但最終是能夠指向到具體的位置。
拿路標指示牌來說吧，道路上看到那麼多的路標，作用不同，但你最終可以到達目的地。
不同的選擇器有不同的作用，使用什麼選擇器只會讓你感受到不同的實現路徑。
具體沒有什麼最有用，只有什麼比較合適去使用。
2.常見選擇器及應用
2.1標籤選擇器
優點：使用簡單，直接引用不需要添加屬性
缺點：影響範圍大，容易干擾不同的結構，精度不夠
p{
font-size:14px; /*字體大小爲14px*/
color:#444; /*字體顏色爲深灰色*/
}
效果如下
小結：css3 定義了一個特殊類型的選擇器：通配器，他使用（*）表示，用來匹配所有標籤。一般使用通配器使用通配器選擇器統一標籤的樣式。
2.2類選擇器(又名class選擇器)
/*顏色類*/.red { color: #f00; }
/*下滑線*/.underline {text-decoration: underline; }
代碼如上
效果如下
使用方法手動添加 class 屬性
優點：最常用設計方法，使用靈活，可以爲不同對象
缺點：需要手動添加 class 屬性 操作較麻煩也不利於文檔結構的簡潔
2.3 ID 選擇器
ID 選擇器 以井號 （#）爲前綴 後面 ID 爲 名稱。
應用方法：在標籤中定義 id 屬性 然後設置屬性值 爲 ID
實例設計：
#tangshi {/*ID樣式*/}
width：300px； //固定寬度
border：solid 2px red； //紅色實線邊框
margin：auto； //網頁居中顯示
代碼如上
效果如下
優點：精確匹配使用
缺點：與類選擇器相同需要手動添加id屬性，缺乏靈活性
小結：類選擇器和ID選擇器可以同時作爲一個標籤 ，但ID選擇器優先級高於類選擇器
2.4包含選擇器
簡單選擇器包括 ，標籤選擇器， 類選擇器 和通配選擇器。如果把兩個選擇器組合在一起，就形成了一個
複雜的關係選擇器。在html5文檔結構中，通過關係選擇器可以精確匹配結構中特定的關係元素。
實例設計
1.第一步 新建HTML 5文檔，在< body >內輸入下圖代碼，設計一個簡單的網頁模板結構。
2.第二步 ，在< head > 添加< style type=“text/css” > 標籤，定義一個內部樣式表，然後定義樣式，實現如下設計目標：
*1.定義網頁標題字體大小爲 ：18px；
*2.定義頁腳標題字體大小爲：12px；*
3.第三步 輸入如下代碼，利用包含選擇器限定 h1選擇器的應用範圍。
<style type="text/css">
header h1{font-size:18px;}
footer h1{font-size:12px;}
</style>效果如下：
優點：可以匹配特定結構內指定對象，用於縮小範圍。
缺點：匹配範圍較大，影響的層級不受限制
2.5 子 選擇器
子選擇器使用尖角號(>)連接兩個選擇器，前面選擇器表示要表示的 父元素 後面選擇器表示被包含的匹配子對象
實例設計
第一步 在< BODY >內輸入如下代碼，設計一個簡單的文檔結構
第二步 在< head >標籤內添加 < style type=“text/css”>標籤在內部定義< article >包含內容文本爲大小px的灰色字體
第三步 使用子選擇器定義 < article >包含的內容文字大小爲18px 顏色爲黑色。
如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。
例如，如果您希望選擇只作爲 h1 元素子元素的 strong 元素，可以這樣寫：
article > strong {color:red;}
這個規則會把第一個 h1 下面的兩個 strong 元素變爲紅色，但是第二個 h1 中的 strong 不受影響：
< artcle>This is < artcle >very</ artcle> < artcle>very< /artcle> important.</ artcle>
< artcle>This is < em >really < artcle >very</ artcle>< /em> important.</ artcle>
優點： 比包含選擇器匹配的範圍更小，匹配目標明確
缺點： 比包含選擇器相比，匹配範圍比較有限，用戶需知熟悉文檔結構
語法解釋
您應該已經注意到了，子選擇器使用了大於號（子結合符）。
子結合符兩邊可以有空白符，這是可選的。因此，以下寫法都沒有問題：
h1 > strong
h1> strong
h1 >strong
h1>strong
如果從右向左讀，選擇器 h1 > strong 可以解釋爲“選擇作爲 h1 元素子元素的所有 strong 元素”。
2.6相鄰選擇器
相鄰選擇器使用加號（+）連接兩個選擇器，前面選擇器匹配特定元素，後面選擇器根據關係結構關係
指定同級、相鄰的匹配元素
實例設計
<style type=“text/css”>
<article> p{ font-size： 14px； color：#666； }
h1 + p { font-size： 20px； color：#000 }
</style>
效果如下
各位客官到這裏就結束了！！
猜你想看的：更多複雜選擇器
出處：在校生有森記錄博客
網址：https://mp.csdn.net/mdeditor/102772505
嚴禁轉載！用於學習交流！