前面介绍了一些简单的选择器，本篇博客继续介绍选择器相关内容。
伪类
- 伪类的作用：用来表示元素的一种特殊的状态，如：访问过的超链接、未访问过的超链接；当我们需要为处于这些状态的元素设置样式时，就需要使用伪类。
- 所有的伪类都以:开头。
几个常用的伪类：
:link：表示正常链接（未访问过的链接）。:visited：表示访问过的链接，浏览器通过历史记录来判断一个链接是否被访问过，由于涉及到用户的隐私，所以使用visited伪类只能设置字体的颜色。:hover：表示鼠标移入时的状态；必须置于:link和:visited之后，才是有效的。:active：链接被点击时的状态；必须置于:hover之后，才是有效的。:focus：获取焦点，表示文本框进入输入状态。::selection：对被鼠标选中的文字设置样式。
代码演示：
- 将访问过的连接设为红色，没访问过的连接设为蓝色。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪类</title>
<style type = "text/css">
/*
* 未访问过的连接
*/
a:link {
color:blue;
}
/*
* 访问过的连接
*/
a:visited {
color:red;
}
</style>
</head>
<body>
<a href = "http://www.baidu.com">百度一下</a>
<br />
<a href = "http://www.hehe.com">呵呵</a>
</body>
</html>
- 鼠标移入时，变为黄色，点击连接时，变为绿色。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪类</title>
<style type = "text/css">
/*
* 未访问过的连接
*/
a:link {
color:blue;
}
/*
* 访问过的连接
*/
a:visited {
color:red;
}
/*
* 鼠标移入
*/
a:hover {
color:yellow;
}
/*
* 点击链接
*/
a:active {
color:green;
}
</style>
</head>
<body>
<a href = "http://www.baidu.com">百度一下</a>
<br />
<a href = "http://www.hehe.com">呵呵</a>
</body>
</html>
- 文本框进入输入状态时，背景变为绿色。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪类</title>
<style type = "text/css">
/*
* 文本框进入输入状态
*/
input:focus {
background-color: green;
}
</style>
</head>
<body>
<input></input>
</body>
</html>
- 鼠标选中的文字背景变为绿色。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪类</title>
<style type = "text/css">
/*
* 鼠标选中的文字
*/
p::selection {
background-color:green;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
李贺 <br />
<p>
男儿何不带吴钩，收取关山五十州。 <br />
请君暂上凌烟阁，若个书生万户侯？ <br />
</p>
</center>
</body>
</html>
伪元素
- 伪元素作用：使用伪元素来表示元素中的一些特殊的位置。
常用的伪元素：
:first-letter：表示元素中第一个字符位置。:first-line：元素中第一行。:before：表示元素最前边的部分，开始标签之后，内容之前的部分；一般before都需要结合content一起用，通过content可以向before位置添加一些内容，这些内容不可被选中。
代码演示：
- 第一个字特殊显示。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪元素</title>
<style type = "text/css">
/*
* 选中第一个字
*/
p:first-letter {
font-size:20px;
color:green;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
李贺 <br />
<p>
男儿何不带吴钩，收取关山五十州。
</p>
<p>
请君暂上凌烟阁，若个书生万户侯？ <br />
</p>
</center>
</body>
</html>
- 第一行特殊显示。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>伪元素</title>
<style type = "text/css">
/*
* 选中第一个行
*/
p:first-line {
font-size:20px;
color:yellow;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
李贺 <br />
<p>
男儿何不带吴钩，收取关山五十州。 <br />
请君暂上凌烟阁，若个书生万户侯？ <br />
</p>
</center>
</body>
</html>
属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素。
常用方法如下：
元素[属性名] {}：选取含有指定属性名的元素。元素[属性名 = "属性值"] {}：选取含有指定属性值的元素。元素[属性名 ^= "属性值"]：选取属性值以指定内容开头的元素。元素[属性名 $= "属性值"] {}：选取属性值以指定内容结尾的元素。元素[属性名 *= "属性值"] {}：选取属性值包含指定内容的元素。
兄弟元素选择器
前一个 + 后一个 {}：可以选中一个元素后紧挨着的指定的兄弟元素。前一个 ~ 后一个 {}：可以选中一个元素后所有的兄弟元素。
代码演示：
- 选中第一个兄弟元素。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>兄弟元素选择器</title>
<style type = "text/css">
/*
* 选中第一个兄弟元素
*/
p + span {
font-size:30px;
background-color: green;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
<p>
<p>李贺 </p>
<span>男儿</span>何不带吴钩，收取<span>关山</span>五十州。 <br />
请<span>君</span>暂上凌烟阁，若个<span>书生</span>万户侯？ <br />
</p>
</center>
</body>
</html>
- 选中后边所有兄弟元素。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>兄弟元素选择器</title>
<style type = "text/css">
/*
* 选中所有兄弟元素
*/
p ~ span {
font-size:30px;
background-color: green;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
<p>
<p>李贺 </p>
<span>男儿</span>何不带吴钩，收取<span>关山</span>五十州。 <br />
请<span>君</span>暂上凌烟阁，若个<span>书生</span>万户侯？ <br />
</p>
</center>
</body>
</html>
否定伪类
- 作用：可以从已选中的元素中剔除某些元素。
- 语法：
:not(选择器) {}。
代码演示：
- 为所有的p元素设置一个北京颜色为绿色，除了class为hehe的。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>否定伪类</title>
<style type = "text/css">
p:not(.hehe) {
font-size:20px;
background-color: green;
}
</style>
</head>
<body>
<center>
<h3>南园十五首·其五</h3>
<p class = "hehe">李贺 </p>
<p>
男儿何不带吴钩，收取关山五十州。
</p>
<p>
请君暂上凌烟阁，若个书生万户侯？
</p>
</center>
</body>
</html>
样式的继承
- 在CSS中，祖先元素上的样式，也会被它的后代元素所继承。
- 利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
- 并不是所有的样式都被会子元素继承。如：背景相关的样式都不会被继承。
选择器优先级
当使用不同的选择器选中同一个元素时，并且设置不同的样式时，这是样式之间将会产生冲突。最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定。
选择器优先级规则：
- 内联样式：1000；
- id选择器：100；
- 类和伪类：10；
- 元素选择器：1；
- 通配选择器：0；
- 继承的样式没有优先级；
- 当选择器中包含多种选择器时，需要将多种选择器的优先级相加作为最终的优先级。但是注意：选择器的优先级计算不会超过它的最大的数量级，例如10个优先级为10的选择器相加不能超过100；
- 如果选择器的优先级一样，则选择靠后的样式。
- 并集选择器的优先级是单独计算的。
- 可以在样式的最后添加一个!important，则此时该样式将会获得一个最高的优先级，但是不建议使用。使用了import，js都无法对其进行修改。
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
