CSS选择器及三大特性

最新推荐文章于 2023-11-05 21:10:18 发布

m0_68642393

最新推荐文章于 2023-11-05 21:10:18 发布

阅读量1.1k

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_68642393/article/details/126688824

版权

选择器分类

选择器分为基础选择器和复合选择器两大类

基础选择器

基础选择器是由单个选择器组成的
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

1.1 标签选择器（元素选择器）

是以HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式

标签名称{
    属性名1:属性值1;
    属性名2:属性值2;
    属性名3:属性值3;
    ……
}

作用：将某一类标签全部选择出来
优点：能快速为页面中的同类型标签设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签

1.2 类选择器

如果要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）

语法：

.类名 {
    属性名1:属性值1;
    属性名2:属性值2;
    属性名3:属性值3;
    ……
}

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名
可以理解为给标签取了一个名字
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量见名知意

1.3 通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

语法：

*{ 属性1：属性值1；属性2：属性值2；}

注：但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

1.4 id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

语法：

#id名{ 属性1：属性值1；属性2：属性值2；}

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

注：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

1.5 属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

语法：

[标签名称] { 属性1：属性值1；属性2：属性值2；}

注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS 选择器参考手册：

选择器	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attributeI=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。

复合选择器

1.1 简介

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

1.2 后代选择器（* *）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

语法：

元素1 元素2 （ 样式声明 ）

上述语法表示选择元素1里面的所有元素2（后代）

注意：元素1和元素2 中间用空格隔开；元素1是父级，元素2是子级，最终选择的是元素2；

元素2可以是儿子辈，也可以是孙子辈，只要是元素1的后代即可；元素1和元素2 可以是任意基础选择器。

1.3 子元素选择器（>）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单来说就是亲儿子

语法：

元素1>元素2 （ 样式声明 ）

上述语法表示选择元素1里面所有直接后代（子元素）元素2

注意：

元素1和元素2 中间用大于号隔开
元素1 是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，孙子与重孙之类的都不是

1.4 并集选择器（，）

并集选择器可以选择多组标签，同时为其定义相同的样式。

并集选择器是各选择器通过英文（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 （ 样式声明 ）

注意：

元素1与元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

1.5 链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素

伪类选择器书写最大的特点是用冒号（：）表示，:hover、:visited、:link、 :active

因为伪类选择器很多，比如有链接伪类、结构伪类等

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 鼠标指针位于其上的链接 */
a:active /* 选择活动的链接（鼠标按下未弹起） */

1.6 focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

所谓交单就是光标，一般情况类元素才能获取，所以focus只针对表单元素

input:focus {
    background-color:yellow;
}

伪类选择器总结：

伪类选择器	作用	应用对象
:hover	定义标记在鼠标悬停(划过)时的样式	所有显示标记
:link	定义标记在超链接状态下的样式	a标签
:focus	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
:visited	定义标记被访问过后的样式	a标签
:active	定义标记在选定时刻下的样式	a标签

CSS的三大特性

CSS三大特性之层叠性

相同选择器给设置相同的样式，此时样式就会覆盖（层叠）另一个冲突样式。层叠样式主要解决样式冲突。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

CSS三大特性之继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业。

使用继承可以简化代码，将CSS样式的复杂性减低
子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）

行高的继承

body{
    /*font : 字号/行高 字体样式*/
    font:12px/1.5 'Microsoft YaHei';
}
div{
    font-size:14px;
}

子元素继承了父元素body的行高1.5

这个1.5 就是当前元素文字大小 font-size的1.5倍

CSS三大特性之优先级

当同一个元素指定多个选择器，就会优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重

选择器	选择器权重	简单权重值
继承或者*	0，0，0，0	0
元素选择器	0，0，0，1	1
类选择器，伪类选择器	0，0，1，0	10
ID选择器	0，1，0，0	100
行内样式style=“”	1，0，0，0	1000
!important重要的	∞无穷大	∞无穷大