HTML元素选择器的作用范围,CSS选择器的用法和含义

天下难事，必作于易；天下大事，必作于细

选择器的作用

CSS选择器可用于实现对HTML网页上的元素样式的一对一，一对多或者多对一的控制。

选择器分类(个人理解)

css中的选择器分为以下几类：

1.基本选择器

通过元素的通用属性class、ID和标签本身选择

2.上下文选择器

借助元素之间的关系父子、同胞选择

3.结构伪类选择器

根据文档结构

4.伪类

选择那些不能够被普通选择器选择的文档之外的元素，

例如a标签的hover、actice和visited等

5.伪元素

同伪类一样选择那些不能够被普通选择器选择的文档之外的元素

更像是创建一个不存在在文档结构的元素

伪类前使用:

伪元素使用::

简单选择器选择器

用法

含义

通用选择器

*{}

选择所有的元素

标签选择器

[p/i/em/b/strong·····]{}

选择同标签名的元素

类选择器

.className{}

选择类名为className的元素

ID选择器

#idName{}

选择ID名为idName的元素

就用grid布局实现的的九宫格可以更容易理解选择器的用法

原型样式：

Document

/* 使用九宫格来演示: grid布局实现 */

.box1{

margin:0;

padding:0;

width:300px;

height:300px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:5px;

border:2pxsolid#000;

}

.sbox{

font-size:2rem;

/* background-color: lightskyblue; */

display:flex;

justify-content:center;

align-items:center;

border:2pxsolid black;

}

1

2

3

4

5

6

7

8

9