css所有标签及其属性汇总 css奇数偶数选择器 _生活百科

玩过前端的一般都会接触CSS选择器。在CSS中，选择器是选取需设置样式的元素的模式。
CSS选择器可以分成这些大类：

基本选择器
复合选择器
伪类选择器
伪元素选择器

每个大类中又可以细分一些具体的选择器。
1.1 基本选择器-通配选择器通配符选择器常用 “*”号表示，它是所有选择器里作用范围最广的，能匹配所有的HTML元素。
语法：
{属性名: 属性值;}举例：

文章插图
通配选择器
最终效果：

文章插图
最终效果
初看感觉这个通配选择器很鸡肋，但是到后面清除样式时，会起到比较大的作用，暂时先不用管，只要了解一下有这个选择器就行。
1.2 基本选择器-元素选择器元素选择器是指用HTML标签名称作为选择器，按标记元素分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名 {属性名: 属性值;}举例：

文章插图
元素选择器
最终效果：

文章插图
最终效果
元素选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能实现差异化设置，就像上面的例子，所有p标签都受到了影响。
1.3 基本选择器-类选择器类选择器的作用是根据元素的class值，来选中某些元素。
语法：
.类名 {属性名: 属性值;}举例：

文章插图
类选择器
最终效果：

文章插图
最终效果
类选择器有这些注意事项：

元素的class属性值不带“.”，但是CSS的类选择器要带“.”；
class值，是我们自定义的，按照标准，不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”；
一个元素不能写多个class属性；
一个元素的class属性，能写多个值，要用空格隔开。

1.4 基本选择器-id选择器id选择器的作用是根据元素的id属性值，来准确的选中某一个元素。
语法：
#id值 {属性名: 属性值;}举例：

文章插图
id选择器
最终效果：

文章插图
最终效果
id选择器有这些注意事项：

id属性值尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头，不要包含空格、区分大小写；
一个元素只能拥有一个id属性，多个元素的id属性值不能相同；
一个元素可以同时拥有id和class属性。

有些较真的同学可能会说多个元素写了相同的id，浏览器也能正常渲染。但是实际工作开发中一般都需要用js写一些具体的业务逻辑，这个时候遇到两个拥有相同id的元素，就会比较崩溃。
2.1 复合选择器-交集选择器交集选择器的作用是选中同时符合多个条件的元素。交集有并且的含义，通俗理解：即…又…
语法：
选择器1选择器2选择器3...选择器n {属性名: 属性值;}举例：

文章插图
交集选择器
最终效果：

文章插图
最终效果
交集选择器有这些注意事项：

有标签名，标签名必须写在前面；
id选择器理论上可以作为交集选择器的条件，但实际应用中几乎不用，因为没有意义；
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素；
用的最多的交集选择器是：元素选择器配合类名选择器，例如上面例子中 h2.backend

2.2 复合选择器-并集选择器并集选择器的作用是选中多个选择器对应的元素，又称分组选择器。所谓并集就是或者的含义，通俗理解：要么…要么
语法：
选择器1,选择器2,选择器3,选择器n {属性名: 属性值;}举例：

文章插图
并集选择器
最终效果：

文章插图
最终效果
并集选择器有这些注意事项：

并集选择器一般竖着写；
任何形式的选择器，都可以作为并集选择器的一部分；
并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 复合选择器-后代选择器后代选择器的作用是选中指定元素中，符合要求的后代元素。
语法：
选择器1 选择器2 选择器3 选择器n {属性名: 属性值;}举例：

文章插图
后代选择器
最终效果：

文章插图
最终效果
后代选择器有几个注意事项：

后代选择器，最终选择的是后代，不会将过程中的祖先一起选中；
儿子、孙子、重孙子，都算是后代；
结构一定要复合的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6。

2.4 复合选择器-子代选择器子代选择器的作用是选中指定元素中符合要求的子元素（儿子元素）。
语法：
选择器1>选择器2>选择器3>... 选择器n {属性名: 属性值;}举例：

文章插图
子代选择器
最终效果：

文章插图
最终效果
子代选择器有以下注意点：

子代选择器，最终选中的是子代，不是父级；
子、孙子、重孙子、重重孙子…统称后代，子就是指儿子。（和后代选择器的区别）

2.5 复合选择器-相邻兄弟选择器相邻兄弟选择器的作用是选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着该元素的下一个，可以理解成睡在我下铺的兄弟。
语法：
选择器1+选择器2 {属性名: 属性值;}举例：

文章插图
相邻兄弟选择器
最终效果：

文章插图
最终效果
有一点需要注意，相邻兄弟选择器选择的是下面的兄弟。
2.6 复合选择器-通用兄弟选择器通用兄弟选择器的作用是选中指定元素后，符合条件的所有兄弟元素。可以理解成虽在我下铺的所有兄弟。
语法：
选择器1~选择器2 {属性名: 属性值;}举例：

文章插图
通用兄弟选择器
最终效果：

文章插图
最终效果
也需要注意，通用兄弟选择器选择的是下面的兄弟，和相邻兄弟选择器是一样的。
2.7 复合选择器-属性选择器属性选择器的作用是选中属性符合一定要求的元素。
语法：

# 选中具有某个属性的元素[属性名] {属性名: 属性值;}# 选中包含某个属性，且属性值等于指定值的元素[属性名="值"] {属性名: 属性值;}# 选中包含某个属性 ， 且属性值以指定的值开头的元素[属性名^="值"] {属性名: 属性值;}# 选中包含某个属性，且属性值以指定的值结尾的元素[属性名$="值"] {属性名: 属性值;}# 选中包含某个属性，且属性值包含指定值的元素[属性名*="值"] {属性名: 属性值;}

举例：

文章插图
属性选择器
最终效果：

文章插图
最终效果
3 伪类选择器伪类选择器的作用是选中特殊状态的元素。其中伪是指虚假的，不是真的。所以伪类可以理解成像类（class），但不是类，是元素的一种特殊状态。
3.1 伪类选择器-动态伪类是比较常用的伪类选择器类型。
语法：

:link超链接未被访问的状态:visited超链接访问过的状态:hover鼠标悬停在元素上的状态:active元素激活的状态:focus获取焦点的元素

举例：

文章插图
动态伪类
最终效果：

文章插图
最终效果
3.2 伪类选择器-结构伪类结构伪类之所以这样命名，是因为需要先确定元素结构，根据结构选择特定的元素。
常用的语法：

:first-child 所有兄弟元素中的第一个:last-child 所有兄弟元素中的最后一个:nth-child(n) 所有兄弟元素中的第n个:first-of-type 所有同类型兄弟元素中的第一个:last-of-type 所有同类型兄弟元素中的最后一个:nth-of-type(n) 所哟同类型兄弟元素中的第n个:nth-last-child(n) 所有兄弟元素中的倒数第n个:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个:only-child 选择没有兄弟的元素（独生子女）:only-of-type 选择没有同类型兄弟的元素:root 根元素:empty 内容为空元素（空格也算内容）

关于n的值：

0或不写：什么都选不中 — 几乎不用；
n：选中所有子元素 — 几乎不用；
1~正无穷的整数：选中所对应序号的子元素；
2n 或 even：选中序号为偶数的子元素；
2n+1 或 odd：选中序号为奇数的子元素；
-n+3：选中前3个。

举例：

文章插图
结构伪类
最终效果：

文章插图
最终效果
3.3 伪类选择器-否定伪类否定伪类的作用是排除满足条件的元素。
语法：
:not(选择器)排除满足括号中条件的元素举例：

文章插图
否定伪类
最终效果：

文章插图
最终效果
3.4 伪类选择器-UI伪类用来选中特定状态的UI，和前面介绍的动态伪类有点类似。
语法：

:checked 被选中的复选框或单选按钮:enable 可用的表单元素（没有disabled属性）:disabled 不可用的表单元素（有disabled属性）

举例：

文章插图
UI伪类
最终效果：

文章插图
没选中状态

文章插图
选中状态
3.5 伪类选择器-目标伪类目标伪类的作用是选中锚点指向的元素。
语法：
:target 选中锚点指向的元素举例：

文章插图
目标伪类
最终效果：

文章插图
最终效果
3.6 伪类选择器-语言伪类语言伪类的作用是选中特定语言的目标，当然不是根据内容自动判定语言类型，而是通过lang这个属性。
语法：
:lang() 根据指定的语言选择元素（本质是看lang属性的值）举例：

文章插图
语言伪类
最终效果：

文章插图
最终效果
4 伪元素选择器伪元素选择器的作用是选中元素中的一些特殊位置。
常用伪元素：

::first-letter 选中元素中的第一个文字::first-line 选中元素中的第一行文字::selection 选中被鼠标选中的内容::placeholder 选中输入框的提示文字::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）

举例：

文章插图
伪元素选择器
最终效果：

文章插图
最终效果
总结【css所有标签及其属性汇总 css奇数偶数选择器】以上就是CSS选择器的介绍，初看好像很多，不过多用几次很快就能记住。CSS选择器的功能非常丰富，合理使用合适的选择器，会让代码的可靠性得到保障。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：