前端入门-css伪类和伪元素

类（pseudo-class）用于定义元素的特殊状态，伪元素（pseudo-element）用于设置元素指定部分的样式，语法如下：

伪类

selector:pseudo-class {
  property: value;
}

伪元素

selector::pseudo-element {
  property: value;
}

伪类以“:”单个冒号开头，伪元素以“::”两个冒号开头，注意区分它们的，比较容易混淆。

伪元素选择器

常用的伪元素有这些：

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

如下示例：

<html>
<head>
<style>
p::before
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

效果：

同理:after是在结尾插入字符，::after 和 ::before 常和content属性配合使用，用来出入特殊字符等。

伪元素可以是单冒号，可以是双冒号，较规范使用建议是双冒号。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

其它的伪元素可以参考：

https://www.w3school.com.cn/css/css_pseudo_elements.asp

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

伪类按照功能可以分为以下几种：

锚伪类 —— 作用于链接a标签元素，常用来定义链接的不同状态。
表单相关伪类——作用于表单元素，常用来定义表单不同的行为状态。
扩展选择型伪类——按照逻辑规则选择元素，比如选择最后一个子元素，偶数或奇数序列的元素等。
其它伪类

锚伪类

锚伪类主要用于a链接上，比如鼠标经过链接，点击链接后等状态，使用伪类可以定义不同状态下链接的样式，如下示例：

html：

<a>链接</a>

css：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

显示效果：

一般按照 :link、:visited、:hover、:active 的顺序(LVHA)使用，其中:hover 会被其它的伪类覆盖，为了确保:hover生效，:hover 需要放在 :link 和 :visited 之后，:active 之前。

:link 伪类，只有当a链接有href属性且是有效的链接，才会起作用，如下示例：

<a href="#" target="_blank">这是一个链接</a>

href属性改成上面这样时，：link不起作用，按理应该显示红色，但却显示绿色。

:hover 伪类可以在任何元素上使用，其用处很多，比如鼠标经过显示隐藏效果。

如下示例：

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}
div:hover {
  background-color: blue;
}

使用:hover 另一个典型的例子就是，制作下拉菜单，不需要使用JavaScript，如下示例：

demo 演示可以看这里：https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3700/3e1094a1c7b42332b9bdef0d0b0c4a7f/css_dropdown_menu.html

除了以上几种链接相关的伪类，还有一个突出显示当前活动的锚链接——:target 伪类。如下示例：

html

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

css

:target {
		border: 2px solid #D4D4D4;
		background-color: #e5eecc;
}

效果显示：

表单相关伪类

此类伪类都是和表单元素有关的，比如下面这些：

选择器	例子	例子描述
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:in-range	input:in-range	选择具有指定范围内的值得 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:valid	input:valid	选择所有具有有效值的 <input> 元素。

在这里介绍几个常用的，比如:checked，匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项)，如下示例：

html:

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

css

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

效果显示：

注意：不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。

再看另一个 :disabled 伪类，匹配禁用的的表单元素，如下示例：

html：

<form action="#">
  <fieldset id="shipping">
    <legend>非禁用状态</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>禁用状态</legend>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

css：

input
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}

效果：

如上图，可以看到禁用输入框背景色是灰色。

扩展选择型伪类

这类伪类，是用来弥补css选择器的不足，比如如果我想选择当前元素里所有p元素最后一个怎么办？

其它伪类

比如：root、：empty、等，还有其它处在实验阶段的伪类，在这里不一一介绍了。

关于伪类知识，可以参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

https://www.w3school.com.cn/css/css_pseudo_classes.asp

类

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定(点击时)的链接 */
.tButton:link {color: #FF0000}
.tButton:visited {color: #FF0000}
.tButton:hover {color: #FF0000}
.tButton:active {color: #FF0000}

注意:

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后, 才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后, 才是有效的。

记住, 这四种状态, 在css中, 必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

常用的a链接样式：

a:link,a:visited{text-decoration:none;color:#444;}
a:hover{color:#f00;}

伪元素

:first-line 伪元素

"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式：

:first-letter 伪元素

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

:before 选择器

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

在每个 <p> 元素的内容之前插入新内容：

p:before{
content:"台词：";
}

:after 选择器

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

p:after{
content:"台词：";
}

:selection 对光标选中的元素添加样式。

特殊符号的使用

.label:before{content:"15";margin-right:0.3rem;}

筛选分功能的伪类

:empty 选取没有子元素的元素。比如选择空的 span, 就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空, 不会被这个伪类选中。

:checked 选取勾选状态的 input 元素，只对 radio 和 checkbox 生效。

:disabled 选取禁用的表单元素。

:first-child 选取当前选择器下第一个元素。

:last-child 与first-child 相反, 选取当前选择器下最后一个元素。

:nth-child(an+b) 选取指定位置的元素。比如使用 li:nth-child(2n+1)

:nth-last-child(an+b) 这个伪类和 nth-child 相似, 只不过在计数的时候, 这个伪类是从后往前计数。

:only-child 选取唯一子元素。如果一个元素的父元素只有它一个子元素, 这个伪类就会生效。如果一个元素还有兄弟元素, 这个伪类就不会对它生效。

:only-of-type 选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素, 这个伪类就会生效。这个伪类允许父元素里有其他元素, 只要不和自己一样就可以。

实例:制作首行特效

<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>

实例:制作首字母特效

<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>

子选择器

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

nth-child(①阿拉伯数字 ②odd even ③表达式)

li:nth-child(3n+1){
color: red;
}

实例:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*strong:nth-child(阿拉伯数字2){
选择stong并且strong在家里的排行是老2
}
strong:nth-of-type(阿拉伯数字2){
选择strong但是他只要是类型的第二个就行了
}*/


/*strong:nth-child(2){ /* 没有 */
color: red;
}*/

strong:nth-of-type(2){ /* <strong>我是三哥</strong> */
color: green;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
</div>
</body>
</html>

实例: 各行变色

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li:nth-child(even){
background-color: orange;
}
li:nth-child(odd){
background-color: pink;
}
li:nth-child(5){/*单独给第5个设置了*/
background-color: purple;
}
</style>
</head>
<body>
<button id="btn">新建</button>
<ul id="ul">
<li>明年或有4000亿外资入市 美联储12月或再加息</li>
<li>科技 | 谷歌"临时工"向CEO发公开信 要求提高工资</li>
<li>iOS 12.1.1更新发布：支持更多运营商使用双SIM卡</li>
<li>体育 | 献上膝盖!外籍大神足彩11连中赚3040倍赢不停</li>
<li>三年抱俩！江宏杰宣布福原爱怀二胎 已怀孕6个月</li>
<li>曝林志颖登机后要拿行李 致航班延误惹人怨</li>
<li>库里飙9三分戏耍般轰42+9+7 复出后光速回归巅峰</li>
</ul>


<script type="text/javascript">
btn.onclick = function(){
ul.innerHTML += "<li>陈伟腾的爱豆是kobe</li>";
}
</script>
</body>
</html>

CSS2.1中只能给标签增加：a:link、a:hover、a:visited、a:active

:focus input:focus 选择获得焦点的 input 元素。

:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。

:checked input:checked 选择每个被选中的 <input> 元素。

:enabled input:enabled 选择每个启用的 <input> 元素。

:disabled input:disabled 选择每个禁用的 <input> 元素

:target #news:target 选择当前活动的 #news 元素

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*
伪类选择器我们通常习惯用一个冒号隔开

*/

/*获得焦点*/
input[type="text"]:focus{
border-color: red;
outline: none;
}

/*元素被选中*/
[type="checkbox"]:checked,[type="radio"]:checked{
width: 50px;
height: 50px;
}

/*被禁用的 说白了就是元素有disable属性的标签*/
button:disabled{
background-color: orange;
}
</style>
</head>
<body>
<!--CSS2.1中只能给标签增加：a:link、a:hover、a:visited、a:active
:focus input:focus 选择获得焦点的 input 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:checked input:checked 选择每个被选中的 <input> 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:target #news:target 选择当前活动的 #news 元素
-->
<input type="text" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<button disabled>按钮被禁用</button>
<button>按钮可点击</button>
</body>
</html>

:selection

文本被选中的时候

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div{
width: 600px;
border: 1px solid red;
}


/*伪元素选择器我们习惯用2个冒号*/
/*div:after{
content: "NBA";
}*/


/*首字*/
div::first-letter{
font-size: 48px;
}

/*首行*/
div::first-line{
background-color: orange;
}

/*文本被选中的时候*/
div::selection{/*它必须是2个冒号*/
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<div>可怕的是，库里有手感时，他是无法阻挡的，此后他继续施展外线火力，首节就投出5中4的三分表现。首节他又得到了16分，上一场比赛他首节得到18分，看来复出后库里的状态是迅速又回到了开季的巅峰。库里下去休息时，为勇士建立了7分的优势，结果他在场下没一阵功夫，优势都被骑士重新追赶回去了。重新上阵后，库里还是保持良好的进攻状态，外线又是4中2，而且他在该传球时就果断传，不会拖泥带水。半场最后阶段，骑士突然打出进攻高潮，狂中3分，库里也有回应，但对面还是各种神仙球也进，没办法，上半场勇士暂时落后。</div>
</body>
</html>
:only-child和:only-of-type
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
del:only-child{
/*我选择del标签并且该标签作为div唯一的儿子*/
color: red;
}

del:only-of-type{
/*我选择del标签并且该标签作为div唯一的类型*/
background-color: orange;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
<del>我是五弟</del>
</div>
</body>
</html>

:nth-child和nth-last-child

接伪类

所谓伪类意思就是不是一个真正的类；

语法：

a:link { 属性：值；}

a { 属性：值；}

使用方法：

方法解释link默认状态visited链接访问之后的状态hover鼠标放到链接上的状态active超链接激活的状态，意思就是鼠标按上去不松手的状态focus鼠标点击之后要做的操作

visited

<title>Document</title>

a {

color: red;

}

a:visited {

color: green;

}

</style>

</head>

<body>

<a href="#">北京马哥教育基地</a>

</body>

hover

a {

color: red;

}

a:hover {

color: blue;

}

</style>

</head>

<body>

<a href="#">北京马哥教育基地</a>

</body>

active

a {

color: red;

}

a:active {

color: fuchsia;

}

</style>

</head>

<body>

<a href="#">北京马哥教育基地</a>

</body>

连接导航案例

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Document</title>

.nav {

height: 60px;

background-color: darkgrey;

text-align: center;

}

.nav a {

display: inline-block;

width: 100px;

height: 60px;

text-decoration: none;

color: blue;

}

.nav .public {

color: orange;

}

.nav a:hover {

background-color: silver;

text-decoration: underline;

}

</style>

</head>

<body>

</div>

</body>

</html>

结构伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器

:last-child :选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n):(n 可以是数字、关键词或公式)匹配属于其父元素的第 N 个子元素，不论元素的类型

:nth-last-child(n):选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

<body>

</body>

.cce:first-child {

height: 30px;

background-color: red;

}

在线咨询

上一篇：Web前端开发之HTML简介
下一篇：HTML 表格

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

选择器	例子	例子描述
:first-child	p:first-child	选择所有元素下级的第一个 <p> 元素，且必须是第一个子元素。
:first-of-type	p:first-of-type	选择所有元素下级的首个出现的<p> 元素，不必是第一子元素。
:last-child	p:last-child	选择所有元素下级的最后一个<p> 元素，且必须是最后一个子元素。
:last-of-type	p:last-of-type	选择所有元素下级的最后出现的<p> 元素，不必是最后一个子元素。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择所有元素下级的第二个<p> 元素，且必须是第二个子元素。
:nth-last-child(n)	p:nth-last-child(2)	选择所有元素下级的倒数第二个<p> 元素，且必须是倒数第二个子元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有元素下级的倒数第二个<p> 元素，不必是倒数第二个子元素。
:nth-of-type(n)	p:nth-of-type(2)	选择所有元素下级的第二个<p> 元素，不必是第二个子元素。
:only-of-type	p:only-of-type	代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
:only-child	p:only-child	匹配没有任何兄弟元素的元素。

整合营销服务商

前端入门-css伪类和伪元素

伪元素选择器

伪类按照功能可以分为以下几种：

锚伪类

表单相关伪类

扩展选择型伪类

其它伪类

您的项目需求