css选择器最常用的类型

CSS中常用的四种选择器类型是：

标签选择器：用于标签类型

ID选择器：用于特定标签

类选择器：用于所有所需的标签

后选择器选择器：用空格分隔

1.标签选择器：选择器的名称代表了HTML页面上的标签

标签选择器选择了页面上所有该类型的标签，因此它们往往描述“共同特征”，可以是“个性””无法描述特定元素。

示例：

p{font-size:14px;

<body>

css

</body>

再比如，如果你想把“学习完Android，继续学习前端”这句话中的“前端”改为红色字体，可以使用标签来改变“Frontends”“包含这两个词，然后将标签选择器添加到标签中。

代码如下：

<!DOCTYPEhtml><html><head><title>文档</title>span{color:red;}</head><body>

学完Android，继续学习前端

</body></html>

【结】注意事项是：

（1）所有标签都可以是选择器。
例如ul、li、label、dt、dl、input、div等。

（2）无论这个标签隐藏的有多深，它一定会被选中。

(3)选择全部，而不是选择一个。

2.ID选择器：必须用#定义（名称自定义）。

可用于特定标签，且只能使用一次。
CSS中的ID选择器是用“#”定义的。

示例：

<head><title>文档</title>#mytitle{border:3pxdashedgreen;}</head>

然后使用ID在其他地方引用它：

<body>Hello</body>

id选择器的选择器是“#”。

每个HTML标记都可以有一个ID属性。
指定该标签的名称。
该标签的名称可以任意选择，但是：

(1)它只能包含字母、数字和下划线。

(2)必须以字母开头。

（3）名称不得与标签相同。
例如，id不能被称为body、img或a。

(4)严格区分大小写，即h.aa和AA是两个不同的ID

这里还特别强调的是，HTML页面中不能出现相同的ID，即使它们不是同一类型。
例如，如果页面上有一个ID为pp的p和一个ID为pp的div，那就是非法的！

一个标签可以被多个CSS选择器选择：

例如，同一个标签可以同时使用标签选择器和ID选择器。
（使用了分层）如下：

请点击输入图片描述

然后通过网站：

请点击输入图像描述

例如，假设选择器显示“文本为红色且位于标签选择显示“此文本是绿色的”。
那么你听谁的呢？

事实上，CSS有非常严格的计算公式，并且可以处理冲突。

一个标签可以被多个CSS选择器选择并协同工作。
这就是“级联”的第一层含义

3.类选择器：使用点来定义所有所需标签的类选择器。
优点：灵活。

在CSS中，.用于表示类。
对于示例：

.oneclass/*定义类选择器*/{width:800px;}</head>

然后使用其他地方引用的class：

<body>Hello</body>

和id很相似，所有标签都可以携带ID属性和类属性。
不过，ID属性只能被特定标签引用一次。

类属性属性：

功能1：类选择器可以被多个标签使用。

功能2：同一个标签可以使用多个类选择器。
用空格分隔。
例如：

我是h3

但不能写成：

我是h3

使用类选择器的示例：

使用类选择器可以改变一个人的CSS级别判定。

需要注意的是：

（1）不要试图用一个类名来写出某个特定标签的所有样式。
这个标签应该包含更多的类来完成这个标签的样式。

(2)每个类应尽可能小，并具有“公共”概念，以允许使用更多标签。

例如：

.lv{color:green;}.da{font-size:30px;}.underline{text-decoration:underlined;

然后让每个标签选择它想要使用的类选择器：

="lvda">第1段

=“吕线”>段落2

="daxian">第3段

问题：我应该使用id还是class？

答案：尽可能经常使用该类，除非在非常特殊的情况下可以使用ID。

原因：ID被js使用。
也就是说，js需要通过ID属性来获取标签。
因此，CSS层面尽量不要使用id，否则js会变得繁琐。
另一方面，具有ID的元素被假定具有动态效果。

例如：

请点击输入图片描述

如上图所示，两者CSS和JS都包含在内。
如果使用相同的ID，沟通就会变得困难。

记住这句话：风格基于类，行为基于ID。
这意味着class属性由CSS使用，id属性由JS使用。

以上三种选择器的区别：

标签选择器针对页面上的标签类型。

ID选择器仅适用于特定标签（一个），ID是该标签在该页面上的唯一标识符。

类选择器可以被多种标签使用。

4.后代选择器：定义它们时用空格分隔它们。

对于EF格式，这意味着作为E元素后代的所有F元素都具有此样式。
空格表示后代。

后代选择器是一种平衡：相似性和特征的平衡。
如果您想更改特定部分中所有内容的样式，则需要考虑后代选择器。

后代选择器描述了祖先结构。

这个定义可能有点难以理解。
让我们看一个例子。

示例1：

.div1p{color:red;}

空格代表后代。
div1p代表.div1的所有p后代。

我想在这里强调：这两个标签不必是连续的并且彼此相邻，只要它们保持后代关联即可。
换句话说，后代将选择的，不一定是儿子。

示例：

h3bi{color:red;

上面代码的意思是：定义样式

标记内的标记内的标记。

类似地：h3、b和i标签不需要连续相邻，只要保持后代的关联即可。

效果：

请点击输入图片描述

或者有以下写法：

请点击输入图片描述

上面的写法中，

标签和标签不是彼此相邻，但他们维持血统关系。

还有以下写法：（包括class选择和ID选择都可以）

请点击输入图片描述

正如开头提到的：后代选择器描述了一个祖先结构。
举个例子来说明这句话：

<!DOCTYPEhtml>

<html>

<head>

<title>文档</title>

divdivp{

科罗拉多州r:红色;

}

.div2{...}

.div3{...}

.div4{...

</head>

<body>

我是什么颜色？

</body>

</html>

上面CSS中的divdivp也可以使文本变成红色。
通过浏览器的检查元素，我们可以看到p元素的祖先列表：

请点击输入图片描述

css选择器有几种

CSS中有很多选择器，例如类别选择器、标签选择器、id选择器、后代选择器、子选择器、伪类选择器、通用选择器、组选择器等。
常见的选择器包括ID选择器，主要有三类：选择器、类选择器、标签选择器。
ID选择器：您可以为标有特定ID的HTML元素指定特定样式。
根据元素ID选择元素，元素ID是唯一的，这意味着相同的ID在同一个文档页面中只能出现一次。
标签选择器：整个HTML页面是由很多不同的标签组成的，标签选择器决定哪些标签使用相应的CSS样式。
类选择器：如果有多个元素将实现该元素，逐一定义元素会导致页面上出现过多的重复代码。
这种现象被称为“多类综合症”。
将样式应用于所有元素。
后代选择器：也称为包含选择器，用于选择特定元素或元素组的后代。
父元素的选择放在前面，子元素的选择放在后面，以分开。
可以从多个层的多个位置来区分祖先-后代关系。
子选择器：子选择器仅引用其直接后代，或者您可以将其视为作用于子元素的第一个后代。

css有哪三大基本选择器

1.标签选择器

p{color:red;

什么是标签选择器？

使用指定的标签名称，查找当前界面中所有具有该名称的标签并设置属性。

注意：

标签选择器选择当前界面中的所有标签。
一、界面上所有同名的标签不能单独选择

只要是HTML中的标签，就可以作为标签选择器

2.id选择器

#ID{color:red;

什么是ID选择器？

利用指定标签的ID，在当前界面中查找具有该ID的标签并设置属性。

注意：

任何HTML标签都有和ID属性

ID在同一个界面中是唯一的，不能重复

编写ID选择器时，需要在ID前面添加#号

>

ID的名称有一定的标准只能由字母、数字和下划线组成

ID的名称不能以数字开头

ID的名称不能与HTML标签相同

如果只是设置样式的问题，则不用We-ID，因为之前开发时为js保留了ID。

3.类选择器

.class{color:red;

什么是类选择器？

根据指定标签的类，在当前界面中找到该类的标签，并设置属性

注释

每个HTML标签都有一个类属性

同一个接口中类属性可以重复

编写类选择器时，需要在类名前添加数字

类名有一定的限制。
规范只能由字母、数字和下划线组成

类名称不能以数字开头

类的名称可能与HTML标签不同

>

类专门为特定类型的标签设置样式

一个标签可以同时绑定多个类属性

="p1p2p3">测试段落因此三个类属性bind

类选择实践，通过不同的组合实现不同的效果