CSS 选择器的常见用法

叁歲伎倆 2023-10-13 17:21 61阅读 0赞

**目录**

二、单选择器

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、类选择器 ###

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

### 3、通配符选择器 ###

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

* {
     color: red;
    }

### 4、标签选择器 ###

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

## 三、组合选择器 ##