二：以理论结合实践方式梳理前端 CSS 3 ——— 样式表选择器
样式表选择器
CSS选择器用于选择你想要的元素的样式的模式
基本选择器
（1）元素选择器
这里所说的元素，其实就是我们常说的 HTML 元素，我们可以通过元素选择器为指定类型的 HTML 元素设置样式
<html>
<head><style>/* 指定 标签内的文字颜色为灰色 */body { color: gray; }/* 指定 标签内的文字颜色为菊蓝色 */
h1 { color: cornflowerblue; }style>
head>
<body><h1>Title Hereh1> <p>Paragraph Herep>
body>
html>
- 覆盖与继承
根据 CSS 规则，子元素将会 继承 父元素所拥有的样式【重要】
也就是说，当我们给 元素定义 color 为 gray 时，子元素 和 的 color 也为 gray
然而，重新定义的子元素样式将会 覆盖 继承的样式【重要】
也就是说，当我们给 元素定义 color 为 cornflowerblue 时，它会覆盖 color 为 gray 的样式设置
- 选择器分组
现在考虑这样一个问题，假如我们需要将所有的标题都变成菊蓝色，那么我们可以像下面这样定义样式表：
h1 { color: cornflowerblue; }
h2 { color: cornflowerblue; }
h3 { color: cornflowerblue; }
h4 { color: cornflowerblue; }
h5 { color: cornflowerblue; }
h6 { color: cornflowerblue; }
这样的定义虽然清晰易懂，但是未免也太过于繁琐，所以我们可以将其合并写成下面的形式：
h1,h2,h3,h4,h5,h6 { color: cornflowerblue; }
这样的写法我们称为 选择器分组，把所有具有相同声明的元素放在一起，从而使得定义更加简洁
- 声明分组
既然我们可以对选择器进行分组，那么我们也可以对样式声明进行分组吗？答案是肯定的！
还是考虑这样一个问题，假如我们要让段落的背景颜色变成黑色且字体颜色变成白色，那么一个简单的声明如下：
p { background: black; }
p { color: white; }
这样可以吗？当然可以，但是当声明增多时，也同样太过于繁琐
所以我们可以将同一个元素的声明合并在一起，这样的写法我们称为 声明分组
p {background: black;color: white;
}
（2）类选择器
类选择器根据 class 属性的值选择特定元素，只需要在类名前加上一个点号（ . ）即可
<html>
<head><style>.important { color: cornflowerblue; }style>
head>
<body><h1 class="important">这是一个重要的标题h1> <h1>这是一个标题h1> <p class="important">这是一个重要的段落p> <p>这是一个段落p>
body>
html>
（3）id 选择器
id 选择器根据 id 属性的值选择特定元素，只需要在 id 前加上一个井号（ # ）即可
<html>
<head><style>#important { color: cornflowerblue; }style>
head>
<body><h1>这是一个标题h1> <p id="important">这是一个重要的段落p>
body>
html>
层次选择器
（1）后代选择器
后代选择器可以帮助我们选择某个元素的 所有后代元素，一般的语法规则如下：
selector1 selector2 {property: value;...
}
上面的语法表示只选择 selector1 中的后代元素 selector2，而对一般的 selector2 不起作用
<html>
<head><style>p span {color: blue;}style>
head>
<body><h1>我是标题，<span>没有变成蓝色span>h1><p>我是段落，<span>变成蓝色span>p>
body>
html>
（2）子代选择器
与后代选择器相比，子代选择器只对某个元素的 所有子代元素 起作用，一般的语法规则如下：
selector1 > selector2 {property: value;...
}
上面的语法表示只选择 selector1 中的子代元素 selector2，而对一般的 selector2 不起作用
<html>
<head><style>p > strong {color: red;}style>
head>
<body><p>这是段落，<strong>变成红色strong>p><p>这是段落，<span>这是强调，<strong>没有变成红色strong>span>p>
body>
html>
（3）通用兄弟选择器
通用兄弟选择器可以帮助我们选择 在某个元素之后的所有兄弟元素，一般的语法规则如下：
selector1 ~ selector2 {property: value;...
}
上面的语法表示只选择在 selector1 之后的所有兄弟元素 selector2，而对一般的 selector2 不起作用
<html>
<head><style>h1 ~ p {color: green;}style>
head>
<body><h1>这是一个标题，不会变成绿色h1><p>这是一个段落，将会变成绿色p><h3>这是一个副标题，不会变成绿色h3><p>这是另一个段落，将会变成绿色p>
body>
html>
（4）相邻兄弟选择器
与通用兄弟选择器相比，相邻兄弟选择器只对 在某个元素之后的下一个兄弟元素 起作用，一般的语法规则如下：
selector1 + selector2 {property: value;...
}
上面的语法表示只选择在 selector1 之后的下一个兄弟元素 selector2，而对一般的 selector2 不起作用
<html>
<head><style>h1 + p {color: yellow;}style>
head>
<body><h1>这是一个标题，不会变成黄色h1><p>这是一个段落，将会变成黄色p><h3>这是一个副标题，不会变成黄色h3><p>这是另一个段落，不会变成黄色p>
body>
html>
属性选择器
属性选择器允许根据 元素的属性和属性值 来选择元素，它的基本语法如下：
selector[属性选择器][...] {property: value;...
}
属性选择器的取值如下：
| 属性选择器 | 描述 |
|---|---|
| attribute | 选择具有指定属性的元素 |
| attribute=value | 选择具有指定属性且属性值为 value 的元素 |
| attribute*=value | 选择具有指定属性且属性值中包含 value 的元素 |
| attribute^=value | 选择具有指定属性且属性值以 value 开头的元素 |
| attribute$=value | 选择具有指定属性且属性值以 value 结尾的元素 |
| attribute~=value | 选择具有指定属性且属性值中包含指定词汇 value 的元素 |
| attribute|=value | 选择具有指定属性且属性值中以指定词汇 value 开头的元素 |
其中，*= 与 ~=、^= 与 |= 之间的区别仅仅在于 “词汇” 二字，它表示什么意思呢？
“词汇” 是指 独立的 字符串，意思就是这段字符串的前后不能出现除 - 之外的其它符号，否则不能匹配
"https://www.example.com">空的链接
伪元素
伪元素（pseudo-element）可以向某些选择器设置特殊的效果，基本语法如下：
selector::pseudo-element {property: value;...
}
常见的伪元素如下：
| 伪元素 | 描述 |
|---|---|
| first-letter | 向文本的第一个字添加特殊样式，只能用于块级元素 |
| first-line | 向文本的第一个行添加特殊样式，只能用于块级元素 |
| before | 在元素之前添加特殊样式 |
| after | 在元素之后添加特殊样式 |
| selection | 对选中文本添加特殊样式 |
一个简单的例子如下：
<html>
<head><style>p::first-letter { font-size: xx-large; }style>
head>
<body><p>这是一个段落，很长很长的段落p><p>然后这是另外一个段落，也是很长很长的段落p>
body>
html>
利用伪元素，我们还可以用一个元素画出五角星，例子如下：
<html>
<head><style>.star {width: 0px;height: 0px;border-bottom: 9.51px solid yellow;border-left: 3.09px solid transparent;border-right: 3.09px solid transparent;position: relative;}.star::before, .star::after {content: "";width: 0px;height: 0px;border-bottom: 9.51px solid yellow;border-left: 13.09px solid transparent;border-right: 13.09px solid transparent;}.star::before {transform: rotate(-36deg);position: absolute;top: 8.6px;left: -13.3852px;}.star::after {transform: rotate(36deg);position: absolute;top: 8.6px;left: -12.7948px;}style>
head>
<body><div class="star">div>
body>
html>
伪类
伪类（pseudo-class）可以向某些选择器添加特殊的效果，其基本语法如下：
selector:pseudo-class {property: value;...
}
（1）动态伪类选择器
| 语法 | 描述 |
|---|---|
| link | 选择未被访问的锚点元素 |
| visited | 选择已被访问的锚点元素 |
| hover | 选择鼠标悬浮的元素 |
| active | 选择已被激活的元素 |
| focus | 选择获得焦点的元素 |
一个例子如下：
<html>
<head><style>/* a:hover 必须置于 a:link 和 a:visited 之后 *//* a:active 必须置于 a:hover 之后 */a:link { color: red } /* 未访问的链接显示红色 */a:visited { color: green } /* 已访问的链接显示绿色 */a:hover { color: blue } /* 鼠标移动到链接上显示蓝色 */a:active { color: yellow } /* 选定的链接显示黄色 */style>
head>
<body><a href="https://www.baidu.com/">百度链接a>
body>
html>
（2）元素状态伪类选择器
| 语法 | 描述 |
|---|---|
| checked | 选择已被选中的按钮元素 |
| enabled | 选择启用的表单元素 |
| disabled | 选择禁用的表单元素 |
一个例子如下：
<html>
<head><style>input:checked + span { color: cornflowerblue; }style>
head>
<body><form action="#"><label><input type="checkbox" value="apple" /><span>Applespan>label><label><input type="checkbox" value="orange" /><span>Orangespan>label><label><input type="checkbox" value="pear" /><span>Peerspan>label>form>
body>
html>
（3）结构伪类选择器
| 语法 | 描述 |
|---|---|
| first-child | 选择作为父元素的第 1 个子元素的元素 |
| nth-child(n) | 选择作为父元素的第 n 个子元素的元素 |
| last-child | 选择作为父元素的最后一个子元素的元素 |
| only-child | 选择作为父元素的唯一一个子元素的元素 |
| first-of-type | 选择作为父元素内具有指定类型的第 1 个子元素 |
| nth-of-type(n) | 选择作为父元素内具有指定类型的第 n 个子元素 |
| last-of-type | 选择作为父元素内具有指定类型的最后一个子元素 |
| only-of-type | 选择作为父元素内具有指定类型的唯一一个子元素 |
| root | 选择作为根元素的元素，例如 html:root |
| empty | 选择没有子元素的元素 |
一个例子如下：
<html>
<head><style>h1:only-child {color: deepskyblue;}h3:first-child {color: skyblue;}p:last-child {color: lightskyblue;}span:last-child {color: lightblue;}style>
head>
<body><div class="header"><h1>Helloh1>div><hr/><div class="section"><h3>Eternity in an hourh3><p>To see a world in a grain of sand,p><p>And a heaven in a wild flower,p><p>Hold infinity in the palm of your hand,p><p>And eternity in an hour.p>div><hr/><div class="footer"><h3>Hello Worldh3><p>Say Hello To Tomorrowp><p>Say Goodbye To Yesterdayp><span>Thank you for listeningspan>div>
body>
html>
（4）目标伪类选择器
| 语法 | 描述 |
|---|---|
| target | 被指定 URL 指向的元素 |
一个例子如下：
<html>
<head><style>* { margin: 0; padding: 0; }a { color: rgba(245, 245, 245, 0.8); text-decoration: none; }a:link, a:visited, a:hover, a:active { text-decoration: none; }.menu {list-style-type: none;overflow: hidden;}.menu > li {float: left;width: 100px;height: 25px;border: 0.1px solid lightskyblue;background-color: cornflowerblue;}.menu > li:hover {background-color: lightskyblue;}.content {list-style-type: none;position: relative;}.content > li {position: absolute;}.poem {width: 400px;height: 80px;color: rgba(255, 255, 255, 0.8);border: 0.5px solid lightskyblue;background-color: cornflowerblue;}#spring { z-index: 4; }#summer { z-index: 3; }#autumn { z-index: 2; }#winter { z-index: 1; }#spring:target { z-index: 5; }#summer:target { z-index: 5; }#autumn:target { z-index: 5; }#winter:target { z-index: 5; }.flex {display: flex;flex-direction: row;justify-content: center;align-items: center;}style>
head>
<body><ul class="menu"><li class="flex"><a href="#spring">春a>li><li class="flex"><a href="#summer">夏a>li><li class="flex"><a href="#autumn">秋a>li><li class="flex"><a href="#winter">冬a>li>ul><ul class="content"><li id="spring"><div class="flex poem">春游芳草地div>li><li id="summer"><div class="flex poem">夏赏绿荷池div>li><li id="autumn"><div class="flex poem">秋饮黄花酒div>li><li id="winter"><div class="flex poem">冬吟白雪诗div>li>ul>
body>
html>
（5）否定伪类选择器
| 语法 | 描述 |
|---|---|
| not(selector) | 排除符合要求的元素 |
一个例子如下：
<html>
<head><style>p:not(.important) { color: gray; }style>
head>
<body><p>我是一个段落p><p class="important">我是一个重要的段落p>
body>
html>
| 基本选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有HTML元素 |
| E | 元素选择器 | 选择指定类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
| selector1, selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
| 层次选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器（包含选择器） | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 |
| E~F | 通用选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
| 动态伪类选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 |
| E:active | 用户行为选择器 | 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 |
| E:hover | 用户行为选择器 | 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
| E:focus | 用户行为选择器 | 选择匹配的E元素，而且匹配元素获取焦点 |
| 目标伪类选择器 | 功能描述 |
|---|---|
| E:target | 选择匹配E的所有元素，且匹配元素被相关URL指向 |
| 元素状态选择器 | 类型 | 功能描述 |
|---|---|---|
| E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或者单选按钮表单元素 |
| E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
| E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
| 结构伪类选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 |
| E:root | 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
| E F:nth-child(n) | 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0 |
| E F:nth-last-child(n) | 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型子元素，且该子元素匹配E元素 |
| E:empty | 选择没有子元素的元素，而且该元素也不包含任何文本节点 |
- ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式
- :nth-child(n) 中参数只能是n，不可以用其他字母代替
- :nth-child(odd) 选择的是奇数项，而使用 :nth-last-child(odd) 选择的却是偶数项
| 否定伪类选择器 | 功能描述 |
|---|---|
| E:not(F) | 匹配所有除元素F外的E元素 |
| 属性选择器 | 功能描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！