css专栏 02.选择器 01.基本选择器

 

# 01.基本选择器

[toc]{type: "ol", level: [3]}

### html结构
> 元素没有选择器时，会与其父标签保持一致
```html
<div id="d1" class="c1 c2">
    div
    <p>
        div_p
    </p>
    <span>
        div_span
    </span>
</div>
<p id="p1" class="c3">p1</p>
<span id="span1" class="c1">span1</span>
<span id="span2" class="c2">span2</span>
```
![基本选择器-html结构](01.基本选择器-html结构.png)


### id选择器
> 找到id是d1的标签，改变文本颜色
```css
#d1 {
    color: brown;
}
```
![基本选择器-id选择器](01.基本选择器-id选择器.png)


### 类选择器
> 找到类中包含c1/c2/c3的标签，改变文本颜色
> 同时具备多个类属性时，按照载入顺序覆盖
```css
.c1 {
    color: darkgoldenrod;
}
.c2 {
    color: green;
}
.c3 {
    color: blue;
}
```
![基本选择器-类选择器](01.基本选择器-类选择器.png)


### 元素｜标签选择器
> 改变所有p标签的颜色 一般不用
```css
p {
    color: coral;
}
```
![基本选择器-元素｜标签选择器](01.基本选择器-元素｜标签选择器.png)


### 通用选择器
> 改变所有标签的颜色 基本不用
```css
* { 
    color: dodgerblue 
}
```
![基本选择器-通用选择器](01.基本选择器-通用选择器.png)


### 同时使用
> 不包含通用选择器

![基本选择器-同时使用](01.基本选择器-同时使用.png)