CSS选择器和层叠性
層疊式樣式表，用來給HTML標簽添加樣式的語言。美化頁面，實現布局。
css3選擇器
標簽選擇器和id選擇器、類選擇器、復合選擇器、偽類選擇器
標簽選擇器和id選擇器
標簽選擇器：直接使用元素標簽名當作選擇器，將選擇頁面上所有該種標簽；通常用于標簽的初始化。
ul{/* 去掉無序列表的小圓點 */list-style: none;}a{/* 去掉超級鏈接的下劃線 */text-decoration: none;}id：#id
標簽的id屬性，是這個標簽的唯一標識。id只能由數字、字母、下劃線和短橫構成，且不能以數字開頭，字母區分大小寫，但一般用小寫字母。
類選擇器
class屬性：.class
同一個標簽可以同時屬于多個類，類名用空格隔開
<div class="aaa ddd">多個類名用空格隔開</div>同一個類可以屬于不同的標簽
<p class="warning">我是段落</p> <div class="warning">我是div</div>復合選擇器
| 選擇器名稱 | 示例 | 示例的意義 |
| 后代選擇器 | .box .spec | 選擇類名為box的標簽內部的類名為spec的標簽 |
| 交集選擇器 | li.spec | 選擇既是li標簽，也屬于spec類的標簽 |
| 并集選擇器 | ul,ol | 選擇所有ul和ol標簽 |
其中：使用空格表示”后代“
偽類
添加到選擇器的描述性詞語，指定要選擇的元素的特殊狀態，eg：超級鏈接擁有4個特殊狀態
| 偽類 | 意義 |
| a:link | 沒有被訪問的超級鏈接 |
| a:visited | 已經被訪問過的超級鏈接 |
| a:hover | 正在被鼠標懸停的超級鏈接 |
| a:active | 正在被激活的超級鏈接（按下按鍵還沒有松開的狀態） |
以上，使用時的順序不能被打亂，必須嚴格遵守以上的順序。
元素關系選擇器
| 名稱 | 舉例 | 意義 |
| 子選擇器 | div>p | div的子標簽p （父子關系） |
| 相鄰兄弟選擇器 | img+p | 圖片后面緊跟著的段落將被選中 |
| 通用兄弟選擇器 | p~span | p元素之后的所有同層級span元素 |
序號選擇器
| 舉例 | 意義 |
| :first-child | 第一個子元素 |
| :last-child | 最后一個子元素 |
| :nth-child(3) | 第三個子元素 |
| :nth-of-type(3) | 第三個某類型子元素 |
| :nth-last-child(3) | 倒數第三個子元素 |
| :nth-last-of-type(3) | 倒數第三個某類型子元素 |
屬性選擇器
| 舉例 | 意義 |
| img[alt] | 選擇有alt屬性的img標簽 |
| img[alt=”故宮“] | 選擇alt屬性是故宮的img標簽 |
| img[alt^="北京"] | 選擇alt屬性以北京開頭的img標簽 |
| img[alt$="夜景"] | 選擇alt屬性以夜景為結尾的img標簽 |
| img[alt*="美"] | 選擇有alt屬性中含有美字的img標簽 |
| img[alt~="手機拍攝"] | 選擇有alt屬性中有空格隔開的手機拍攝字樣的img標簽 |
| img[alt|="參賽作品"] | 選擇有alt屬性以”參賽作品-“開頭的img標簽 |
CSS3新增偽類
| 偽類 | 意義 |
| :empty | 選擇空標簽 |
| :focus | 選擇當前獲得焦點的表單元素 |
| :enabled | 選擇當前有效的表單元素 |
| :disabled | 選擇當前無效的表單元素 |
| :checked | 選擇當前已經勾選的單選按鈕或者復選框 |
| :root | 選擇根元素，即<html>標簽 |
偽元素
虛擬動態創建的元素 用”：：“表示
::before：創建一個偽元素，其將成為匹配選中的元素的第一個子元素，必須設置content屬性表示其中的內容
::after：創建一個偽元素，其將成為匹配選中的元素的最后一個子元素，必須設置content屬性表示其中的內容
::selection：用于文檔中被用戶高亮的部分（使用鼠標圈選的部分）
::first-letter：會選中某元素中（必須是塊級元素）第一行的第一個字母
::first-line：會選中某元素中（必須是塊級元素）第一行的全部文字
層疊性
多個選擇器可以同時作用于同一個標簽，效果疊加
權重：
id選擇器 > 類選擇器 > 標簽選擇器
復雜的選擇器可以通過計算個數（id，class，標簽）的形式，計算權重
/* 權重 (2,0,1) */ #box1 #box2 p{ }!important提升權重：
若要將某個選擇器的某條屬性提升權重，可以在屬性后面寫!important
.box1 .box2 .box3 p{color: blue !important; }總結
以上是生活随笔為你收集整理的CSS选择器和层叠性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 特斯拉Q2业绩不及预期 盘后股价下跌11
- 下一篇： CSS 基本样式