CSS 伪类和伪元素

类

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

言

熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。

伪类与伪元素

先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类与伪元素的区别

这里通过两个例子来说明两者的区别。

下面是一个简单的html列表片段：

<ul>
 <li>我是第一个</li>
 <li>我是第二个</li></ul>

如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：

<ul>
 <li class="first-item">我是第一个</li>
 <li>我是第二个</li></ul>
li.first-item {
 color: orange}

如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。

li:first-child {
 color: orange}

下面是另一个简单的html段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：

	<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
 font-size: 5em;}

如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。

<p>Hello World, and wish you have a good day!</p>
p:first-letter {
 font-size: 5em;}

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

伪元素是使用单冒号还是双冒号

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。

实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。

伪类与伪元素的具体用法

这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：

某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

作者：向建峰_Javan

链接：http://www.imooc.com/article/details/id/254506

"巧用CSS ::before 创建带透明阴影效果的图标按钮：实战指南"

引言

在Web前端设计中，CSS的伪元素`::before`为我们提供了无尽的创新可能，尤其在创建独特且富有交互性的UI组件时，例如带有透明阴影效果的图标按钮。本文将深入解析如何利用`::before`伪元素结合CSS3的阴影属性，实现一种新颖、美观且实用的图标按钮设计，让你的用户界面更加生动和有趣。

---

一、理解CSS ::before 伪元素

css
.button {
  position: relative;
}
.button::before {
  content: "";
  /* 这里将添加用于生成图标的样式 */
}

`::before`是CSS中的一个伪元素，它可以在元素内容的前面插入额外的内容。这意味着我们可以在不修改HTML结构的前提下，通过CSS添加样式化的图形或内容。这对于创建自定义图标按钮极为有用。

二、创建基础图标按钮

css
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  border: none;
  cursor: pointer;
}

.button::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}

这段代码创建了一个带有白色三角形图标的绿色按钮。

---

三、为图标按钮添加透明阴影效果

css
.button:hover::before {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

若要实现更高级的效果，比如让阴影随着鼠标悬停而变化，我们可以使用`:hover`伪类：

四、拓展应用场景与个性化定制

- **自定义形状图标**：只需修改`::before`内的`border`属性即可创建不同形状的图标。

- **动态过渡效果**：结合`transition`属性，可以为阴影效果添加平滑过渡。

- **响应式设计**：针对不同屏幕尺寸，调整阴影大小及透明度，提升用户体验。

---

结论

通过巧妙地运用CSS `::before`伪元素以及`box-shadow`属性，我们成功地制作出了一款具有透明阴影效果的图标按钮。这样的实践不仅提升了网站或应用的视觉吸引力，同时也增强了其交互性。希望本篇指南能帮助你在实际项目中灵活运用这些技巧，创作出更多令人眼前一亮的设计。在前端的世界里，想象力和技术的融合才是无限可能的源泉。

在线咨询

上一篇：vue前端正确显示日期
下一篇：校园BBS系统的设计与实现「含源码」

您的项目需求

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