CSS几种常见选择器

前言：什么是css选择器,在css中选择器是一种模式，用于匹配HTML文档中的某些元素并且应用到这些元素上。我们可以通过选择器给特定的元素设置样式，我们最最最常用的选择器就是类选择器了，最最最少用的就是通用选择器了！下面我就挑几个常见常用的选择器，过过最近写文章的‘瘾’！

几种常见的选择器

1. 元素选择器（element selector）
2. 类选择器（class selector）
3. ID选择器（id selector）
4. 属性选择器（attribute selector）
5. 后代选择器（descendant selector）
6. 子元素选择器（child selector）
7. 相邻兄弟选择器（adjacent sibling selector）
8. 通用选择器（universal selector）

1、元素选择器

使用HTML元素名称作为选择器，例如 p、h1、div 等等

元素选择器就是通过元素名来给元素设置样式的

比如,如果我选择所有的段落<p>元素给它设置样式为红色字体，如下：

p{
    color：red;
    
}

2、类选择器

以 . 开头，后跟类名。例如，.classname { }。

重点说一下，这个选择是我们最最最常用的选择器，类选择器简单理解就是：我添加了一个选择器。然后我想给哪个元素设置样式我就在哪个元素上调用这个类选择器

要使用类选择器就要在html元素中添加一个class选择器，并指定一个类名，最后在css中使用点号（.）加上类名，如下所示：

.buttonRed{
      color:red;
}

//这是html中的按钮
<button calss = "buttonRed"></button>

3、ID选择器

以 # 开头，后跟ID名称。例如，#idname { }。

这个也比较常用，ID选择器简单理解就是：固定给某一元素设置样式

ID选择器就是通过html元素ID属性来选择元素的一种选择器，通过元素ID来为这个元素添加特定的样式，如下：

#buttonRed{
      color:red;
}

//这是html中的按钮
<button id = "buttonRed"></button>

4、属性选择器

通过属性和属性值来选择元素。例如，[attribute="value"]。

这个比较少用，看需求，需求用得到就用

属性选择器是一种选择器，可以通过元素的属性及其属性值来选择元素。它们使用方括号语法来指定要匹配的属性和值。如下：

/* 选择所有带有 "data-" 属性的元素 */
[data] {
  color: blue;
}

/* 选择所有 "src" 属性值以 "https://" 开头的图片 */
img[src^="https://"] {
  border: 1px solid black;
}

/* 选择所有 "alt" 属性值包含 "cat" 的图片 */
img[alt*="cat"] {
  width:

属择器是比较常用的一个选择器了，我这的案例只有三个，如果还想知道更多，就度娘一下吧！

5、后代选择器

通过子元素层级关系来选择元素。例如，div p { }。

这个比较常用

CSS后代选择器用于选择某个元素的所有后代元素。这个不好解释，简单理解就是，在某个元素后面的哪个元素，好吧，直接看案例，如下：

div p {
  color: red;
}

//后代选择器，给p元素添加样式
<div >
    <p">Nihao</p>

</div>

6、子元素选择器

仅选择直接子元素。例如，div > p { }

div > p {
  color: red;
}

//子元素选择器，给p元素添加样式
<div >
    <p">Nihao</p>

</div>

7、相邻兄弟选择器

选择与指定元素紧随其后的第一个同级元素。例如，h1 + p { }。

兄弟相邻选择器用于选取紧接在另一个元素后面的元素，且二者有共同的父元素

<p></p>
<h1></h1>


p + h1 {
  color: red;
}

8、通用选择器

匹配所有元素。例如，* { }。        

通用选择器会匹配页面所有的元素给所有的元素设置样式；

在编写代码的时候应该避免使用通用选择器，因为过多的使用通用选择器会使得页面加载缓慢，继而影响了客户的阅读感觉

* {
  border: 1px solid black;
}

总结一下，掌握选择器，在写样式的时候真的很舒畅，赶紧卷起来！