CSS选择器
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器相关的知识，希望对你有一定的参考价值。
CSS选择器
div标签
div标签是一个块级标签，形式为：<div></div>，是一个容器，可以嵌套其他的标签；若不与CSS结合使用，作用和<p>标签相似，通常会和CSS结合进行页面的布局。
1.1 基本选择器
作用：在CSS中定位页面中的标签
1.1.1 标签名选择器
格式为：
标签名{
样式属性: 值;
}
1.1.2 类选择器
若使用类选择器，则标签中必须有class属性。
格式为：
.类名{
样式属性: 值;
}
1.1.3 id选择器
若使用id选择器，则标签中必须有id属性。
格式为：
#id名{
样式属性: 值;
}
1.1.4 通配符选择器
格式为：
*{
样式属性: 值;
}
1.2 复合选择器
1.2.1 属性选择器
| 样式 | 含义 |
|---|---|
| 标签名[属性名] | 选择含有给定属性的标签 |
| 标签名[属性名=值] | 选择等于给定属性值的标签 |
| 标签名[属性名^=值] | 选择给定属性值是以某个字符开头的 |
| 标签名[属性名$=值] | 选择给定属性值是以某个字符结尾的 |
| 标签名[属性名*=值] | 选择包含给定属性值的标签 |
上述属性选择器中，标签名都可以省略，如果省略则表示可以匹配满足条件的任意元素。
例如，下面是.html文件中的代码：
<p>春眠不觉晓</p>
<p class="p1">春眠不觉晓</p>
<p>处处闻啼鸟</p>
<p class="p2">处处闻啼鸟</p>
<p>夜来风雨声</p>
<p id="abc-d1">夜来风雨声</p>
<p>花落知多少</p>
<p id="abc-d2">花落知多少</p>
如果要选择让p标签中含有class属性的标签的文字颜色成为橘色，CSS样式如下：
p[class]{
color: orange;
}
如果要选择让p标签中含有[class=“p2”]的标签的文字颜色成为粉色，CSS样式如下：
p[class=p2]{
color: pink;
}
如果要选择让p标签中含有id属性，且id属性值以abc开头的标签的文字颜色变成深粉色，CSS样式如下：
p[id^=abc]{
color: violet;
}
如果选择让p标签中含有id属性，且id属性值以d2结尾的标签的文字颜色变成深蓝色，CSS样式如下：
p[id$=d2]{
color: rgb(16, 98, 180);
}
如果选择让p标签中含有class属性，且属性值包含p的标签的文字颜色变成亮绿色，CSS样式如下：
p[class*=p]{
color: springgreen;
}
1.2.2 关系选择器
1.2.2.1 子元素选择器
子元素择器主要用来选择某个元素的第一级子元素，子元素选择器用>进行连接
例如，.html文件中代码如下：
<div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</div>
选择div标签下面的p标签中的文字颜色变成红色，CSS样式为：
div > p{
color: red;
}
1.2.2.2 相邻兄弟选择器
相邻兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。相邻兄弟关系选择器用+、~进行连接。
（1）临近兄弟选择器
该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，第二个元素必须紧跟第一个元素。相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用。
例如，.html文件中代码如下：
<body>
<div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</body>
CSS样式如下：
p + span{
color: peru;
}
（2）普通兄弟选择器
普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用。
例如，.html文件中代码如下：
<body>
<div>
<p>橘猫吃不胖</p>
<p>橘猫吃不胖</p>
</div>
<p>橘猫吃不胖</p>
<p>橘猫吃不胖</p>
</body>
CSS样式如下：
div ~ p{
color: powderblue;
}
1.2.3 并集选择器
复合选择器用逗号“,”分隔。
例如：
<div class="jm">橘猫吃不胖</div>
<span>橘猫吃不胖</span>
<p id="p1">橘猫吃不胖</p>
CSS样式为：
.jm,#p1,span{
color: deeppink;
font-size: 20px;
}
1.2.4 后代选择器
后代选择器可以同时选择某元素下面的子孙后代，中间用空格隔开。
格式：
父级 子集{
属性: 值;
}
例如：.html文件中代码如下：
<div id="jm">
<div>
<p id="p1">橘猫吃不胖</p>
</div>
<p id="p2">橘猫吃不胖</p>
</div>
<p>橘猫吃不胖</p>
CSS样式为：
/* 选择id名为jm的div中的p标签 */
#jm p {
font-family: 宋体;
}
1.2.5 伪类选择器
1.2.5.1 超链接的伪类
| 样式 | 含义 |
|---|---|
| a:hover | 当鼠标悬停在目标对象上时的样式 |
| a:visited | 已经访问过的超链接的样式 |
| a:link | 超链接未被访问的样式 |
| a:active | 激活超链接时的样式 |
例如，下面是.html文件中的代码：
<a href="#" class="a1">春眠不觉晓</a><br>
<a href="#" class="a2">处处闻啼鸟</a><br>
<a href="#" class="a3">夜来风雨声</a><br>
<a href="#" class="a4">花落知多少</a>
CSS样式为：
/* 当鼠标悬停在上面时背景显示为深绿色 */
/* 截图时鼠标不显示在屏幕上 */
.a1:hover {
background-color: forestgreen;
}
/* 已经被访问过的超链接文字颜色显示为蓝色 */
.a2:visited {
color: deepskyblue;
}
/* 未被访问过的超链接背景颜色为深粉色 */
.a3:link {
background-color: fuchsia;
}
/* 激活超链接时超链接的字为50像素 */
/* 截图时鼠标不显示在屏幕上 */
.a4:active {
font-size: 50px;
}
1.2.5.2 段落的伪类
| 样式 | 含义 |
|---|---|
| p:first-line | 修改段落第一行的样式 |
| p:first-letter | 修改段落首字母的样式 |
例如，.html文件中代码如下：
<p class="p1">橘猫吃不胖<br>橘猫吃不胖</p>
<p class="p2">橘猫吃不胖</p>
CSS样式如下：
.p1:first-line {
/* 段落第一行字体大小为40像素 */
font-size: 40px;
}
.p2:first-letter {
/* 段落第一个字颜色为深粉色 */
color: hotpink;
}
1.2.5.3 结构化伪类选择器
| 样式 | 含义 |
|---|---|
| :root | 匹配文档的根元素，在HTML中，页面的根元素是<html>，也就是说该选择器设置的样式，对页面的所有元素均有效。对于不需要该样式的元素，可以单独设置样式进行覆盖。 |
| :not(element) | 匹配不是指定元素的元素 |
| :only-child | 匹配只有一个子元素的元素 |
| :first-child | 匹配父元素中的第一个子元素 |
| :last-child | 匹配父元素中的最后一个子元素 |
| :nth-child(n) | 匹配父元素中正数第n个元素 |
| :nth-last-child(n) | 匹配父元素中倒数第n个元素 |
举例说明：
:root .html文件中代码：
<p>静夜思</p>
CSS样式：
:root {
/* 让页面上所有的文字字体大小为20像素 */
font-size: 20px;
}
:not .html文件中代码如下：
<div>
<p>橘猫</p>
<p>吃不胖</p>
<div>橘猫吃</div>
<div>不胖</div>
</div>
CSS样式：
/* 注意div与:not()选择器之间有一个空格，否则可能不起作用 */
div :not(p){
color: red;
}
:only-child .html文件中代码如下：
<div>
<p>床前明月光</p>
<p>疑是地上霜</p>
<div>
<p>举头望明月</p>
</div>
</div>
<div>
<p>低头思故乡</p>
</div>
CSS样式：
/* div与:only-child选择器之间有一个空格，否则可能不起作用 */
div :only-child {
/* 将只有一个标签的div标签选择出来，并修改文字颜色为蓝色 */
color: slateblue;
}
:first-child :last-child .html文件中代码如下：
<div>
<span>静夜思</span>
<p>李白</p>
<div>床前明月光</div>
</div>
CSS样式：
/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* 选择div标签中第一个元素，将其背景颜色改为橙色 */
div :first-child {
background-color: orange;
}
/* 选择div标签中最后一个元素，将其文字颜色变为粉色 */
div :last-child {
color: plum;
}
:nth-child(n) :nth-last-child(n) .html文件中代码如下：
<div>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
</div>
CSS样式如下：
/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* div中正数第二个元素背景颜色变为粉色 */
div :nth-child(2) {
background-color: pink;
}
/* div中倒数第三个元素文字颜色变为红色 */
div :nth-last-child(3){
color: red;
}
1.2.5.4 伪元素选择器
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有：before伪元素选择器和:after伪元素选择器。
| 样式 | 含义 |
|---|---|
| :before | 在匹配的元素之前添加指定的内容，要和content结合使用 |
| :after | 在匹配的元素之后添加指定的内容，要和content结合使用 |
格式为：
元素::before{
content: "插入的内容"/url();
}
例如，.html文件中代码如下：
<p>床前明月光</p>
<p>疑是地上霜</p>
CSS样式如下：
p::before {
/* 在所有p标签前面添加“静夜思” */
content: "静夜思";
}
以上是关于CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章