本文详细介绍了CSS中的伪类选择器，如`:only-child`、`:first-child`、`:nth-child()`等，用于选中特定状态或位置的元素。同时讲解了元素状态相关的伪类，如`:hover`、`:active`等，以及伪元素选择器，如`::before`、`::after`等。还涵盖了CSS优先级规则、样式继承、单位值和文本样式等基础知识，帮助读者深入理解CSS的使用。
1、伪类选择器
（1） 以':'开头，同于其他选择器之后，指明元素在某种状态下才能被选中
:only-child 独生子元素
（2）/* 选中app类下的第一个孩子
.app>*:first-child {
background-color: rgb(60, 161, 207);
}
(3) 选中app类下的第二个孩子
.app>*:second-child {
background-color: rgb(60, 161, 207);
}
（4）选中app类子代下的第n个孩子，n从1开始
.app > *:nth-child(2) {
background-color: rgb(101, 39, 126);
}
（5）选中app类子代下的倒数第n个孩子，n从1开始
.app > *:nth-last-child(2) {
background-color: rgb(101, 39, 126);
}
（6）选中app类子代下的每种类型的第一个元素
.app > *:first-of-type {
background-color: rgb(148, 167, 45);
}
(7) 选中app类子代下每种类型的最后一个孩子
.app > *:first-last-type {
background-color: rgb(147, 45, 167);
}
（8）选中app类子代下每种类型的第n个孩子，n从1开始
.app > *:nth-of-type(2) {
background-color: rgb(147, 45, 167);
}
（9）选中app类子代下每种类型的倒数第n个孩子，n从1开始
.app > *:nth-last-type(3) {
background-color: rgb(147, 45, 167);
}
2、元素状态相关的
（1）：hover-鼠标悬停时的状态
（2）：link-未被访问过的状态
（3）：visited-被访问过的状态
(4) ：active-活动时的状态
（5）:focus-获得焦点时的状态
（6）:checked-按钮被选中时的状态
（7）:default-默认选中时的状态
（8）:enabled-表单项可用时的状态
（9）:disabled-表单项禁用时的状态
（10）:valid-通过表单验证后的状态
(11):invalid-未通过表单验证的状态
（12）:required-必填项的状态
(13)：optional-选填项的状态
(14):in-range-在范围内的状态
（15）:out-of-range-不在范围内的状态
3、伪元素选择器
以'::'开头，用在其他选择器之后
（1）::after-选中标签之后不存在的节点，结合content添加内容
（2）::before-选中标签之前不存在的节点，结合content添加内容
（3）::first-letter-选中标签内容的第一个单词，更改样式
（4）::first-line-选中标签内容的第一行，更改样式
（5）::selection-选中标签内容被选中时，发生样式的改变
4、CSS优先级
采取就近原则
外部样式低于内部样式低于行内样式
特性值：（设置!important表示十分重要，默认选中的意思）
-
eg：background-color: blue ！important;
style 行内样式 1000
id选择器 100
类选择器、属性选择器、伪类选择器 10
元素选择器和伪元素选择器 1
5、样式继承
有些规则会被子元素默认继承，有些不会
会被继承的：font、文本、列表、cursor等
不会被继承的：margin、padding、border等
将可以继承的属性改为不可以继承 -initial
将不可以继承的属性改为可以继承 -inherit
将属性改为默认-unset
p {
color: initial;
color: unset;
border: inherit;
}
6、CSS中的一些单位值
（1）颜色：
关键字：blue、yellow.....
rgb()：三个参数，rgb（0-255,0-255,0-255）红、绿、蓝
rgba()：三个参数，rgb（0-255,0-255,0-255，0-1）红、绿、蓝、透明度（0完全透明）
十六进制：#6个十六进制数组成，每两个数代表一个通道，一个通道的数字相同可以省略一个数（不能调透明度）
如： #000000（可以缩写，相同的省略#000）
HSL
第一个参数：色调：0-360,（0-红色，120-绿色，240-蓝色）
第二个参数：饱和度：0-100%，（0-灰色，100%全彩）
第三个参数：亮度：0-100%，（0-黑色/暗色，100%-亮色）
HSLA：HSL可以调透明度，变成了HSLA
（2）长度宽度大小
百分比
width:50% //占父元素的百分比
绝对值
px、像素、mm、cm、in（英寸）
相对值单位
em
em和当前字体大小相同（一个M的宽度），字体的大小改变，em的单位值跟着变。默认1em=16px.
rem
总是等于默认大小，一般默认大小为16px。
7、文本样式
color：字体颜色
font-size：字体大小
font-style：字体的样式（斜体字）
italic-斜体，oblique-模拟斜体，normal-正常
font-family：字体（宋体、楷体、微软雅黑....）
WebFont商用（花钱） 兼容性不高
font-weight：100-900，默认normal=400，bold=700.字体加粗属性。
lighter比父元素字体更细，bolder比父元素更粗
text-align：字体位置
text-transform：字体变形
none-不变形
uppercase-转换成大写
lowercase-转换成小写
capitalize-首字母大写
full-width：转换为等宽的字体
text-decoration：（可以直接在其中简写以下三种样式）
-
eg:p {
text-decoration: underline solid blue;
}
text-decoration-style：设置线条的样式，solid-画一条实线、double-画一条双实线、dotted-画一条点划线、
dashed-画一条虚线、wavy-画一条波浪线。
text-decoration-color：设置线条的颜色
text-decoration-line：设置在什么方位的线。 none-表示没有文本修饰效果、underline-在文本的下方有一条修饰线
overline-在文本的上方有一条修饰线、line-through 有一条贯穿文本中间的修饰线。
text-shadow：text-shadow为文字添加阴影。可以为文字与"text-decorations"添加多个阴影，
阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
-
eg :text-shadow: 1px 1px 2px pink;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
