復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確的目標元素標簽。
[toc]
## 1. 交集選擇器
交集選擇器是并且的意思,交集選擇器由兩個選擇器構成,其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,語法如下:
```css
p.one {...} ? 選擇的是:類名為 .one 的段落標簽。 ?
```
用的相對來說比較少,不太建議使用。
<br/>
## 2. 并集選擇器
并集選擇器是各個選擇器通過**逗號**連接而成的,任何形式的選擇器(包括標簽選擇器、class類選擇器id選擇器等),都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用并集選擇器為它們定義相同的CSS樣式。語法如下:
```css
.one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。 通常用于集體聲明。
```
<br/>
## 3. 后代選擇器
后代選擇器又稱為包含選擇器,用來選擇元素或元素組的后代,其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間用**空格**分隔。當標簽發生嵌套時,內層標簽就成為外層標簽的后代。語法如下:
```css
.class h3 {...}; 子孫后代都可以這么選擇。 或者說,它能選擇任何包含在內的標簽。
```
<br/>
## 4. 子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個```> ```進行連接,注意,符號左右兩側各保留一個空格。語法如下:
```css
.demo > h3 {color: red;} 說明 h3 必須.demo的親兒子。
```
必須是親兒子,不能是孫子、重孫子之類。
<br/>
## 5. 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果, 可以選擇第1個,第n個元素。
<br/>
### 5.1 鏈接偽類選擇器
* ```:link /*未訪問的鏈接 */```
* ```:visited /*已訪問的鏈接 */```
* ```:hover /* 鼠標移動到鏈接上 */```
* ```:active / *選定的鏈接 */```
注意寫的時候,他們的順序盡量不要顛倒 按照 lvha 的順序。
```css
a { ? /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { ? /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候,由原來的 灰色 變成了紅色 */
}
```
<br/>
### 5.2 位置偽類選擇器
:first-child、:last-child 、 :nth-child(n)、:nth-last-child(n) 具體用法查看CSS手冊。
### 5.3 目標偽類選擇器
:target,具體用法查看手冊。
### 5.4 屬性選擇器
類似于 div[class^=font],具體用法查看手冊。
### 5.5 偽元素選擇器
1. E::first-letter文本的第一個單詞或字(如中文、日文、韓文等)
2. E::first-line 文本第一行;
3. E::selection 可改變選中文本的樣式;
4. E::before和E::after 在E元素內部的開始位置和結束位創建一個元素,該元素為行內元素,且必須要結合content屬性使用。
**`html\偽元素選擇器.html`**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span::before {
content: "楚喬是"; /* 添加的內容默認為行內元素 */
}
span::after {
content: "的";
}
</style>
</head>
<body>
<span>燕洵</span>
</body>
</html>
```
* E:after、E:before 在舊版本里是偽元素,CSS3的規范里`:`用來表示偽類,`::`用來表示偽元素,但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before,這樣做的目的是用來做兼容處理。
* `:` 與 `::`區別在于區分偽類和偽元素
之所以被稱為偽元素,是因為他們不是真正的頁面元素,html沒有對應的元素,但是其所有用法和表現行為與真正的頁面元素一樣,但實際上是css樣式展現的行為,因此被稱為偽元素。在html頁面中是無法對偽元素的結構進行審查的。
- 0 學前必讀
- CSS是什么?
- 如何引用CSS
- 內聯樣式表
- 行內式
- 外部樣式表
- 三種引用方式的比較
- CSS語法規范
- 選擇器
- 基礎選擇器
- 復合選擇器
- CSS注釋
- 字體樣式font屬性
- 標簽顯示模式display屬性
- 塊級元素
- 行內元素
- 行內塊元素
- 三種顯示模式的轉換
- 行高line-height屬性
- CSS三大特性
- 背景background屬性
- 盒子模型
- 邊框border
- 內邊距padding
- 外邊距margin
- 外邊距的合并
- content的高度和寬度
- 盒子模型布局的穩定性
- 圓角邊框border-radius
- 盒子陰影box-shadow
- 浮動float
- 普通流
- 浮動float
- 版心和布局
- 布局流程
- 常見布局方式
- 清除浮動
- 定位postion
- 定位屬性
- 疊放次序z-index
- 元素的顯示與隱藏
- 用戶界面樣式
- 溢出的文字隱藏
- CSS精靈技術
- 什么是精靈技術?
- 精靈技術的使用
- 滑動門
- web字體
- 字體圖標
- icon圖標
- BFC
- 優雅降級和漸進增強
- HTML5新增的元素和特性
- CSS3盒模型
- 過渡、變形、動畫
- 彈性布局
- 對齊
- 網站優化三大標簽