概要

3.CSS常用选择器 - 图1

1、全局选择器

可以与任何元素匹配

* {
  margin: 0;
  padding: 0;
}

2、元素选择器

HTML文档中的元素，p、b、div、a、img、body等。元素选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

p{
  font-size:14px;
}

1、所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。 2、无论这个标签藏得多深，一定能够被选择上。、 3、选择的所有，而不是一个。

3、类选择器

规定用圆点来定义，针对你想要的所有元素使用。

<h2 class="oneclass">你好</h2>
.oneclass{
  width:800px;
}

class属性的特点：

类选择器可以被多种元素使用
类名不能以数字开头
同一个标签可以使用多个类选择器，用空格隔开
```
<h3 class="classone classtwo">我是一个h3啊</h3>
```
4、ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以#来定义。 ```css
你好

mytitle{

color:red; }

特别强调的是：
> HTML页面，不能出现相同的ID，哪怕他们不是一个类型也不行。比如页面上有一个ID为 yao 的p元素，一个id为yao的div元素，是非法的！
> ID名字不能以数字开头。
<a name="vuozV"></a>
## 5、关系选择器
<a name="pRf68"></a>
### 后代选择器
`E F { }` 选择所有被E元素包含的F元素，中间用空格隔开。
```css
<ul>
  <li>宝⻢</li>
  <li>奔驰</li>
</ul>
<ol>
  <li>奥迪</li>
</ol>
ul li{
  color:green;
}

子代选择器

E>F { }选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

<div> 
  <a href="#">⼦元素1</a>
  <p>
    <a href="#">孙元素</a>
  </p>
  <a href="#">⼦元素2</a>
</div>
div>a{
  color:red；
}

6、合并选择器

语法：选择器1，选择器2，……{}
作用：提取共同的样式，减少重复代码

.header,.footer{
  height:300px;
}

7、选择器优先级

css中用四位数字表示权重：

元素选择器：0001
类选择器：0010
id选择器：0100
内联样式：1000

优先级从高到低：行内样式 > ID选择器 > 类选择器 > 元素选择器

Q：VSCode 中html代码有两个相同的id，为什么不报错？
A：
Q：后代选择器和子代选择器的区别？
A：后代选择器选择的是父类下面所有指定的子代，子代选择器选择是父代直系的子代

3.CSS常用选择器

概要