CSS中的伪类选择器、颜⾊、度量单位、⽂本字体及⽂本样式设置1、伪类选择器
伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
选择器名称说明CSS版本:root根元素选择器选择⽂档中的根元素3 :first-child⼦元素选择器选择元素中第⼀个⼦元素2
:last-child⼦元素选择器选择元素中最后⼀个⼦元素3
:only-child⼦元素选择器选择元素中唯⼀⼦元素3 :only-of-type⼦元素选择器选择指定类型的唯⼀⼦元素3 :nth-child(n)⼦元素选择器选择指定 N 个⼦元素3
:enabled UI 选择器选择启⽤状态的元素3
:disabled UI 选择器选择禁⽤状态的元素3
:checked UI 选择器选择被选中 input 勾选元素3
:default UI 选择器选择默认元素3
:valid UI 选择器验证有效选择 input 元素3
:invalid UI 选择器验证⽆效选择 input 元素3
:required UI 选择器有 required 属性选择元素3
:optional UI 选择器⽆ required 属性选择元素3 :link动态选择器未访问的超链接元素1
:visited动态选择器已访问的超链接元素1
:hover动态选择器悬停在超链接上的元素2
:active动态选择器激活超链接上的元素2
:foucs动态选择器获取焦点的元素2
:not其他选择器否定选择的元素3
:empty其他选择器选择没有任何内容的元素3
:lang其他选择器选取包含 lang 属性的元素2
:
css 属性选择器target其他选择器选取 URL ⽚段标识指向元素3
结构性伪类选择器
结构性伪类选择器能够根据元素在⽂档中的位置选择元素。这类元素都有⼀个前缀（:）。
根元素选择器
:root {
border: 1px solid red;
}
解释：匹配⽂档中的根元素，基本不怎么⽤，因为总是返回<html>元素。
⼦元素选择器
ul > li:first-child {
color: red;
}
解释：选择第⼀个⼦元素。
ul > li:last-child {
color: red;
}
解释：选择最后⼀个⼦元素。
ul > li:only-child {
color: red;
}
解释：选择只有⼀个⼦元素的那个⼦元素。
div > p:only-of-type {
color: red;
}
解释：选择只有⼀个指定类型的⼦元素的那个⼦元素。:nth-child(n) 系列
ul > li:nth-child(2) {
color: red;
}
解释：选择⼦元素的第⼆个元素。
ul > li:nth-last-child(2) {
color: red;
}
解释：选择⼦元素倒数第⼆个元素。
div > p:nth-of-type(2) {
color: red;
};
解释：选择特定⼦元素的第⼆个元素。
div > p:nth-last-of-type(2) {
color: red;
};
解释：选择特定⼦元素的倒数第⼆个元素。
UI 伪类选择器
UI 伪类选择器是根据元素的状态匹配元素。
:enabled
:
enabled {
border: 1px solid red;
}
解释：选择启⽤状态的元素。
:disabled
border: 1px solid red;
}
解释：选择禁⽤状态的元素。
:checked
:checked {
display: none;
}
解释：选择勾选的 input 元素。
:default
:default {
display: none;
}
解释：从⼀组类似的元素中选择默认元素。⽐如 input 被勾选的即默认的。:valid 和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
解释：输⼊验证合法与不合法显⽰时选择的元素。
:required 和:optional
input:required {
border: 1px solid blue;
}
input:optional {
border: 1px solid green;
}
解释：根据是否具有 required 属性选择元素。
动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
:link 和和 visited
a:link {
color: red;
}
a:visited {
color: orange;
}
解释：:link 表⽰未访问过的超链接，:visited 表⽰已访问过的超链接。
:hover
a:hover {
color: blue;
}
解释：表⽰⿏标悬停在超链接上。
a:active {
color: green;
}
解释：表⽰⿏标按下激活超链接时。
:focus
input:focus {
border: 1px solid red;
}
解释：表⽰获得焦点时。
其他伪类选择器
:not
a:not([href*="baidu"]) {
color: red;
}
解释：否定选择器，反选。
:empty
:empty {
display: none;
}
解释：匹配没有任何内容的元素。
:lang
:lang(en) {
color: red;
}
解释：选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果⼀致。:target
:target {
color: red;
}
解释：定位到锚点时，选择此元素。
:
:selection
::selection {
color: red;
}
解释：这是⼀个伪元素选择器，当选择⽂字时触发选择。CSS3 版本下的选择器。2、CSS 颜⾊设置
颜⾊表⽅案
颜⾊的表现形式主要有三种⽅式：颜⾊名称、⼗六进制代码和⼗进制代码。
p {
color: red;
}
解释：这是将⼀个段落内的⽂字设置为红⾊，采⽤的是英⽂颜⾊名称。问题是，其他各种颜⾊我们将如何设置？
在古⽼的 HTML4 时，颜⾊名称只有 16 种。
颜⾊名称⼗六进制代码⼗进制代码含义
black#0000000,0,0⿊⾊
silver#c0c0c0192,192,192银灰⾊
gray#808080128,128,128灰⾊
white#ffffff255,255,255⽩⾊
maroon#800000128,0,0栗⾊red#ff0000255,0,0红⾊
purple#800080128,0,128紫⾊
fuchsia#ff00ff255,0,255紫红
green#0080000,128,0绿⾊
lime#00ff000,255,0闪光绿
olive#808000128,128,0橄榄⾊
yellow#ffff00255,255,0黄⾊
navy#0000800,0,128海军蓝
blue#0000ff0,0,255蓝⾊
teal#0080800,128,128⽔鸭⾊
aqua#00ffff0,255,255浅绿⾊
// 红⾊的⼗六进制⽅案
p {
color: #ff0000;
}
⼗进制表⽰⽅法就⽐较多样化，有四种⽅案：
函数说明⽰例rgb(r,g,b)⽤ RGB 模型表⽰颜⾊rgb(0,128,128)
rgba(r,g,b,a)同上，a 表⽰透明度 0~1 之间rgba(0,128,128,0.5)
hsl(h,s,l)⽤ HSL 模型（⾊相、饱和度和透明度）来表⽰颜⾊hsl(120,100%,30%)
hsla(h,s,l,a)同上，a 表⽰透明度 0~1 之间hsla(120,100%,30%,0.5)
p {
color: rgb(112, 128, 114);
color: rgba(0, 128, 128, 0.5);
color: hsl(120, 100%, 30%);
color: hsla(120, 100%, 30%, 0.5);
}
⽬前⼜有⼀个疑问，这些值从哪⾥获取。除了颜⾊表之外，想要微调⾃⼰的颜⾊值。我们可以使⽤ photoshop 等平⾯设计软件的调⾊板获取相应的值。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论