CSS 选择器的常见用法

 目录

二、单选择器

1、id选择器

 2、类选择器

 3、通配符选择器

 4、标签选择器

三、组合选择器

1、后代选择器

 2、子选择器

一、CSS 选择器是什么？

CSS选择器是一种用于定位HTML（或XML）文档中某些元素的模式，CSS选择器可以根据标记名称、类、ID、属性等特征来选择元素。使用CSS选择器可以方便地对页面元素进行样式设置和操作。常见的CSS选择器包括：

- 类选择器：以“.”开头，匹配所有class属性值为指定值的元素。
- ID选择器：以“#”开头，匹配所有id属性值为指定值的元素。
- 标签选择器：匹配所有指定标记名称的元素。

- 通配符选择器：使用 * 的定义, 选取所有的标签
- 后代选择器：用空格隔开两个选择器，匹配符合第二个选择器且在第一个选择器范围内的元素。
- 子元素选择器：用“>”隔开两个选择器，匹配符合第二个选择器且为第一个选择器的子元素的元素。

二、单选择器

1、id选择器

• id选择器使用 HTML 元素的 id 属性选择元素
• id选择器只能选择唯一的特定的元素，因为它在HTML页面中时唯一的
• 选择特定的id元素，可以使用#后面加元素id

style>
    #ha {
        color: green;
   }
</style>
<div id="wahh">哇哈哈</div>

 2、类选择器

• 差异化表示不同的标签
• 可以让多个标签的都使用同一个标签.

<style>
    .blue {
        color: blue;
   }
</style>
<div class="blue">猪猪侠</div>
<div>猪猪侠/div

 3、通配符选择器

• 使用 * 的定义, 选取所有的标签

* {
 color: red;
}

 4、标签选择器

• 能快速为同一类型的标签都选择出来.
• 但是不能差异化选择

<style>
p {
    color: red;
}
div {
    color: green;
}
</style>
<p>大头儿子</p>
<p>大头儿子</p>
<p>大头儿子</p>
<div>小头爸爸</div>
<div>小头爸爸</div>
<div>小头爸爸</div>

三、组合选择器

1、后代选择器

• 后代选择器选择某个元素内部的元素
• 使用空格分隔

.col p{
	color:green;
}

将.col子类的所有p标签元素颜色设置为绿色 

 2、子选择器

• 使用大于号分割
• 只选亲儿子, 不选孙子元素

<div class="two">
    <a href="#">1</a>
    <p><a href="#">2</a></p>
</div

.two>a {
    color: red;
}

 所以这块只选择了 1 

注意：
后代选择器和子选择器的区别是：
1.选择符号不同，后代选择器使用空格，字选择器使用>;
2.选择范围不同，后代选择器选择该元素的所有子元素，子选择器只能选择直接子元素