---
dir:
    order: 2
---

# CSS选择器

## 选择器

### 通配选择器

```css
*{color: red;}
```

### 元素选择器

```css
html {
    color: black;
}

p {
    color: gray;
}

h2 {
    color: silver;
}
```

### 类选择器

```css
.div {
    color: red;
}
```

### ID选择器

```css
#test {
    color: red;
}

div#test {
    color: red;
}
```

### 属性选择器

#### 简单属性选择器

```css
h1[class] {
    color: red;
}

img[alt] {
    color: red;
}

a[href][title] {
    color: red;
}

#div[class] {
    color: red;
}

.box[id] {
    color: red;
}

[class] {
    color: red;
}
```

#### 具体属性选择器

```css
a[href="http://www.baidu.com"][title="baidu"] {
    color: red;
}

[class="test box"] {
    color: red;
}

[id="tox"] {
    color: red;
}
```

#### 部分属性选择器

> [!info]
>
> 信息文字

```css
/* 选择class属性值在用空格分隔的词列表中包含词语"b" 的所有元素 */
[class~="b"]
```

> ![!info]
>
> 选择class属性值等于b或以b-开头的所有元素

```css
[class |="b"] /* class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足 */
[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素  
```

### 分组选择器

```css
h1,p{color: red;}
```

### 后代选择器

```css
ul li{color: red;}
div p, ul li{color: red;}
ul > li{color: red;}
```

### 兄弟元素选择器

> [!warning]
>
> 相邻兄弟选择器(IE6-不支持)

```css
div + p{color: red;}    
```

> [!warning]
>
> 两个元素之间的文本内容不会影响相邻兄弟结合符起作用
>
> 通用兄弟选择器(IE7-不支持)

选择匹配的F元素，且位于匹配的E元素后的所有匹配的同级F元素

```css
div ~ p {color:red;}
```

