当前位置：首页 > news >正文

前端（四）css选择器、css的三大特性

news 2025/7/3 20:16:02

css选择器、css的三大特性

文章目录

css选择器、css的三大特性
一、css介绍
二、css选择器
- 2.1 基本选择器
- 2.2 组合选择器
- 2.3 交集并集选择器
- 2.4序列选择器
- 2.5属性选择器
- 2.6伪类选择器
- 2.7伪元素选择器
三、css三大特性
- 3.1 继承性
- 3.2 层叠性
- 3.3 优先级

一、css介绍

CSS全称为Cascading Style Sheet层叠样式表，是专门用来为HTML标签添加样式的。样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等。
在没有css以前html的样式都需要在每个标签后面设置属性，这样非常的繁琐，有了scc以后只需要完成统一的样式设置就可以批量化的设置标签的样式。

css引入有四种方式：

#内行式
<p style="color:red">hello</p>#嵌入式
<head><style>p{color: red;}</style>
</head>
<body><p>hello</p>
</body>#导入式
#css文件中为p{color: red;}
<head><style>@import "css/mystyle.css";#或者@import url("css/mystyle.css");</style>
</head>
<body><p>hello</p>
</body>#外链式
#css文件中为p{color: red;}
<head><link rel="stylesheet" href="css/mystyle.css">
</head>
<body><p>hello</p>
</body>

导入式的方式存在一些问题：

导入式是css2.1特有的，对于不兼容css2.1的浏览器来说就是无效的
导入式会先加载页面，再加载样式，因此如果页面内容很大，可能会先出现无样式的页面，隔一段时间再出现完整的页面从而降低用户体验

在css中可以使用如下的方式进行注释：

/*这是注释*/

二、css选择器

选择器的目的是通过某种方式选中标签从而完成对标签样式的修改。

2.1 基本选择器

id选择器以#开头，p1为标签的id名。但需要注意的是id名是唯一的，标签的id名不能重复，因此id资源十分珍贵，一般留给js代码使用，css样式不推荐使用。另外id名由字母、数字、部分特殊字符组成，且不能以数字开头，更不能是html关键字如p，a，img。

<!--id选择器-->
<style>#p1{color: red;}
</style>

类选择器以.开头，p1为标签的类名。类名的命名规则和id相同，一个标签可以有多个类，例如<p class=“p1 p2”></p>。

<!--类选择器-->
<style>.p1{color: red;}
</style>

标签选择器只需直接写标签名即可。标签选择器会选择页面所有相同类型的标签，但是只有html的标签才能作为标签选择器。

<!--标签选择器-->
<style>p{color: red;}
</style>

通配符选择器可以选中页面的所有标签，需要注意的是通配符选择器使用时会遍历页面的所有标签，如果页面内容非常大，会导致效率降低的问题。

<!--通配符选择器-->
<style>*{color: red;}
</style>

2.2 组合选择器

后代选择器以空格作为间隔，空格前后可以是基本选择器的任意一种。后代选择器可以选中某个标签的所有满足要求的子标签，如下代码中后代选择器选中的是类为p1的标签中子标签为p并且子标签p中所有id为p2的子标签。

<!--后代选择器-->
<style>.p1 p #p2{color: red;}
</style>

相邻选择器以+号作为间隔，+前后可以是基本选择器的任意一种。相邻选择器的作用是选择某个标签相邻的下一个标签，如下代码中相邻选择器选中的是类为p1的标签相邻的下一个p标签。

<!--相邻选择器-->
<style>.p1+p{color: red;}
</style>

下级选择器以>作为间隔，>前后可以是基本选择器的任意一种。下级选择器可以选中某个标签下一层嵌套中满足要求的子标签，如下代码中下级选择器选中的是类为p1的标签中下一层嵌套中子标签为p并且子标签p中的下一层嵌套的所有id为p2的子标签。

<!--下级选择器-->
<style>.p1>p>#p2{color: red;}
</style>

向后选择器以_{作为间隔，}前后可以是基本选择器的任意一种。向后选择器可以选中某标签后面所有满足要求的标签。如下代码中向后选择器选中的是类为p1的标签后面所有的p标签。

<!--向后选择器-->
<style>.p1~p{color: red;}
</style>

2.3 交集并集选择器

交集并集选择器前后同样可以为基本选择器的任意一种。
交集选择器将多个基本选择器连在一起写(不过有标签选择器的话，标签选择器要写在前面)，其功能是选中满足多个条件的标签，如下代码中交集选择器选中的是标签为p且类为p1，p2的标签。

<!--交集选择器-->
<style>p.p1.p2{color: red;}
</style>

并集选择器将多个基本选择器用,分隔写在一块，其功能是选中多个标签，如下代码中并集选择器选中的是所有p标签或者类为p1的标签或者类为p2的标签。

<!--并集选择器-->
<style>p,.p1,.p2{color: red;}
</style>

2.4序列选择器

序列选择器可以加在任何基本选择器后面作用是给基本选择器一个筛选条件。

<!--选中所有层级中第一个且为p的标签-->
p:first-child
<!--选中所有层级中最后一个且为p的标签-->
p:last-child
<!--选中所有层级中正数第n个且为p的标签-->
p:nth-child(n)
<!--选中所有层级中倒数第n个且为p的标签-->
p:nth-last-child(n)
<!--选中所有层级中的第一个p标签-->
p:first-of-type
<!--选中所有层级中的最后一个p标签-->
p:last-of-type
<!--选中所有层级中正数第n个p标签-->
p:nth-of-type(n)
<!--选中所有层级中倒数第n个p标签-->
p:nth-last-of-type(n)
<!--选中所有层级中只有一个标签且为p-->
p:only-child
<!--选中所有层级中只有一个p标签-->
:only-of-type

2.5属性选择器

属性选择器的地位相当于基本选择器，可以代替上面选择器中需要使用基本选择器的位置。
属性选择器会把属性中的内容作为字符串对其进行匹配，=表示完全匹配，*表示含有，^表示以其开头，$表示以其结尾。

<!--选中含有class属性的标签-->
[class]
<!--选中class中完全匹配为p1的标签-->
[class="p1"]
<!--选中class中含有p1字符的标签-->
[class*="p1"]
<!--选中class中以p1字符开头的标签-->
[class^="p1"]
<!--选中class中以p1字符结尾的标签-->
[class$="p1"]
<!--选中a标签且a标签中的href属性以https字符开头，这本质是a的标签选择器和属性选择器经过交集选择器拼接在了一起-->
a[href^="https"]

2.6伪类选择器

<!--a标签初始状态文字颜色为红色-->
a:link{color: red;}
<!--a标签被访问过后文字颜色为蓝色-->
a:visited {color: blue;}
<!--鼠标悬停a标签上时背景颜色为绿色-->
a:hover {background-color:green;}
<!--鼠标点击a标签时文字颜色为黄色-->
a:active {color: yellow;}
<!--input文本框聚集时框线消失，背景颜色为粉色-->
input:focus{outline: none;background-color:pink;}

a标签的伪类选择器可以单独出现，也可以一起出现，一起出现时有严格的顺序要求：link，visited，hover，active。
hover是所有其他标签都可以使用的，focus只给input标签使用。

2.7伪元素选择器

<!--选中p标签的首个字母，常用于杂志类文字首字母的调节大小-->
p:first-letter {font-size: 48px;}
<!--p标签内容前面插入新内容，且文本颜色为红色-->
p:before {content: "*";color: red;}
<!--p标签内容后面插入新内容，且文本颜色为红色-->
p:after {content: "?";color: red;}

选择器的组合使用示例：p .p1:first-child~#qq:last-child,div+[class]:last-child p[class$=qq]

三、css三大特性

3.1 继承性

继承性指子标签可以继承父标签的样式，但是只有以color、font-、text-、line-开头的属性才可以继承，a标签的文字颜色和下划线是不能继承别人的，h标签的文字大小是不能继承别人的，如果继承则会在原来字体大小的基础上变大。

3.2 层叠性

层叠性是指如果多个选择器选中了同一个标签且设置的属性产生冲突时会有覆盖效果。例如打开浏览器开发者面板时会看到有效属性被划掉了。

3.3 优先级

当多个选择器选中同一标签且设置的属性产生冲突时，就会涉及到优先级的问题了。
优先级遵守以下的规则：

行内式>嵌入式和外部式(引入css文件的样式)。
直接选中 > 间接选中(即继承而来的)。
如果都是间接选中，那么谁离目标标签比较近，就用谁的。
如果都是直接选中，并且都是同类型的选择器，那么谁写的在后面就用谁的。
如果都是直接选中，并且是不同类型的选择器，那么id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）。
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级：id数多的优先级高；id数相同，则判定类数多的优先级高；id数、class数均相同，则判定标签数多的优先级高；若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高。

另外可以通过important将优先级提升到最高，但是这种方法容易产生代码难以维护的问题。

.p1{color:red !important;}