文章目录
- 前言
- 一、CSS基础知识
- 二、选择器
-
- 1.选择器
- 2.基本选择器
-
- 2.1 标签选择器
- 2.2 类选择器
- 2.3 id选择器
- 2.4 通配符选择器
- 2.5 基本选择器总结
- 3.复合选择器
-
- 3.1 后代选择器
- 3.2 子元素选择器
- 3.3 并集选择器
- 3.4 相邻兄弟选择器
- 3.5 总结复合选择器
- 4.伪类选择器
-
- 4.1 动态伪类选择器
- 4.2 UI假元素状态选择器
- 4.3 假结构选择器
- 4.4 否定伪类选择器
- 5.伪元素选择器
-
- 5.1 :before选择器
- 5.2 :after选择器
- 5.3 :first-line选择器
- 5.3 :first-letter 选择器
- 6.属性选择器
- 三、伪元素和伪类
前言
提示:以下是学习前端以来整理的一些。CSS选择器知识点。知识主要来自黑马程序员Pink老师，内容是他们自己的理解，如果有错误，请纠正评论区，谢谢~~
一、CSS基础知识
<head> <style> h4 {
color: blue; font-size: 100px; } </style> </head> 属性是指定对象设置的样式属性，如字体大小、文本颜色等 英语和属性值之间用英语:分开 用英语多个键值对； 进行区分
二、选择器
1.选择器
基本选择器(由单个选择器组成):标签选择器、类选择器id 选择器和通配符选择器 复合选择器：后代选择器、子选择器、并集选择器、相邻兄弟选择器、伪选择器
2.基本选择器
2.1 标签选择器
<head> <style> p {
color: blue; font-size: 100px; } </style> </head> 设置页面中的所有p标签color和font-size样式 优点：可以快速统一设置页面中同类型标签的样式。 缺点：不能设计差异化风格，只能选择所有当前标签。
2.2 类选择器
<head> <style> .one {
color: blue; font-size: 100px; } </stle>
</head>
<body>
<div class="one"></div>
</body>
div标签设置了class属性，属性值为one，我们通过".one"的形式修改标签样式 ① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 ② 可以理解为给这个标签起了一个名字，来表示。 ③ 长名称或词组可以使用来为选择器命名。 ④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。 ⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。 ⑥ 命名规范：见附件（ Web 前端开发规范手册.doc） 记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。
<div class="red font20">亚瑟</div>
(1) 在标签class属性中写多个类名 (2) 多个类名中间必须用空格分开 (3) 这个标签就可以分别具有这些类名的样式 多类名开发中使用场景 (1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面. (2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类. (3) 从而节省CSS代码,统一修改也非常方便.
2.3 id选择器
<head>
<style>
#one {
color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<div id="one"></div>
</body>
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
id 选择器和类选择器的区别 ① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。 ② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。 ③ id 选择器和类选择器最大的不同在于使用次数上。 ④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。
2.4 通配符选择器
*
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
通配符选择器不需要调用，自动就给所有的元素使用样式
2.5 基础选择器总结
| 基础选择器 | 作用 | 特点 | 用法 |
|---|---|---|---|
| 标签选择器 | 设置所有相同的标签的属性 | 不能差异化选择 | p{color: red;} |
| 类选择器 | 设置一个或多个标签 | 可以根据需求选择 | .nav{color: red;} |
| id选择器 | 一次只能设置一个 | id属性只能在每个html文档中出现一次 | #nav{color :red;} |
| 通配符选择器 | 设置所有标签 | 选择的太多，有部分不需要 | *{color:red;} |
3.复合选择器
3.1 后代选择器
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。 当标签发生嵌套时，内层标签就成为外层标签的后代。
<head>
<style>
ul li {
color: blue;
font-size: 100px;
}
</style>
</head>
li 是 ul 的后代元素
元素1 元素2 {
样式声明
}
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和 元素2 可以是任意基础选择器
3.2 子元素选择器
元素1 > 元素2 {
样式声明
}
div > p {
样式声明
} /* 选择 div 里面所有最近一级 p 标签元素 */
元素1 和 元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器
3.3 并集选择器
元素1,元素2 {
样式声明
}
ul,div {
样式声明
} /* 选择 ul 和 div标签元素 */
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
3.4 相邻兄弟选择器
h + p {
样式声明
} /* 选择h元素后的所有p元素 */
h元素与p元素是兄弟，两者有共同的父亲
3.5 复合选择器总结
| 选择器 | 作用 | 特征 | 用法 |
|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 符号是空格 |
| 子代选择器 | 选择最近的一级元素 | 只能是亲儿子 | 符号是大于 |
| 并集选择器 | 选择某些同样式的元素 | 可以用于集体声明 | 符号是逗号 |
| 相邻兄弟选择器 | 选择某些同样式的元素 | 可以用于集体声明 | 符号是加号 |
4.伪类选择器
4.1 动态伪类选择器
：选择 的超链接（超链接点击之前） ：选择 的超链接（链接被访问过之后） ：选择 的超链接（鼠标按住不放， 即鼠标点击标签，但是不松手时） ： 选择 的超链接（鼠标悬浮在超链接上）
链接添加特殊效果：hover、：active、：active、：link
<head>
<style>
a：hover {
color: blue;
font-size: 100px;
}
</style>
</head>
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
获取具有焦点的表单元素
input:focus {
background-color:yellow;
}
:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 input 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
4.2 UI元素状态伪类选择器
UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作
获取被选中的单选按钮
input[type="radio"]:checked {
background-color:yellow;
}
4.3 结构伪类选择器
具体代码例子：https://www.cnblogs.com/guangzan/p/10306167.html
：，等价于E:nth-child(1) ：，等价于E:nth-last-child(1)
：元素E所在文档的，等价于html标签选择器（在html文档中）
。
：父元素E的。 ：选择父元素E的。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的
： ： ：，与E:nth-of-type(1)等同 ：，与E:nth-last-of-type(1)等同
： ： ：
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 结构伪类选择器很容易遭到误解，需要特别强调。如：
注意：结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
4.4 否定伪类选择器
E:not(F)：匹配所有除元素F外的E元素
input:not([type="submit"]) {
border: 1pxsolidred;
}//对form中所有input加边框，但又不想submit也起变化
参考文章：https://zhuanlan.zhihu.com/p/142522917
5.伪元素选择器
5.1 :before选择器
：，必须配合content属性来指定要插入的具体内容。 例子传送门：https://blog.csdn.net/qq_40660787/article/details/80256202
5.2 :after选择器
，使用方法与:before选择器相同。 例子传送门：https://blog.csdn.net/qq_40660787/article/details/80256202
5.3 :first-line选择器
::first-line 伪元素用于向文本的首行添加特殊样式。 例子传送门：https://www.w3school.com.cn/css/css_pseudo_elements.asp
5.3 :first-letter 选择器
::first-letter 伪元素用于向文本的首字母添加特殊样式。 例子传送门：https://www.w3school.com.cn/css/css_pseudo_elements.asp
在最新的CSS3标准中，把伪对象的格式改成了双冒号，即::before，::after，这是为了和伪类分开。早期的浏览器，比如IE8，只支持单冒号的伪对象。如果为了往下兼容，可以使用单冒号伪对象，如果只兼容IE9以上的现代浏览器，可以使用双冒号伪对象。
6.属性选择器
属性选择器例子：https://www.w3school.com.cn/css/css_selector_attribute.asp
| 属性选择器 | 用法 |
|---|---|
| input[type] | 选择具有type属性的input元素，例如< input type=“text”> |
| input[type][name] | 选择具有type和name属性的input元素，例如< input type=“text” name=“a”> |
| input[type = “radio”] | 选择type属性值为radio的input元素，例如< input type=“radio”> |
| 选择class属性值包含rad的input元素（）， | |
| 例如< input class=“aa raddd”>匹配失败， | |
| 选择class属性值以radio-开头的input元素或属性值为radio， | |
| 例如< input class=“radio-sf”>< input class=“radio”>，而 < input class=“radio sf”>匹配失败 | |
| ] | 选择class属性值以radio开头的input元素， |
| 例如 ,而< input class=“ra diosf”>匹配失败 | |
| ] | 选择class属性值以radio结尾的input元素，例如< input class=“raadd adradio”> |
| ] | 选择class属性值包含radio的input元素，例如< input class=“raddradioadd”> |
[abc^=“def”] 、[abc$=“def”] 、[abc*=“def”]这三个选择器是CSS3新增选择器，又名为子串匹配属性选择器，匹配属性值是是否以字符串开头结尾或者包含字符串，即[abc*=“def”]可以匹配"defaaa"，然而[abc~=“def”]匹配的属性值要包含def单词，即"ad def hag"才能匹配成功，"defaaa"匹配失败
PS：伪类选择器、伪元素选择器、属性选择器属于复合选择器吗？
三、伪元素和伪类
伪类和伪元素是用来修饰不在文档树中的部分
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。