<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
ul>li::before{
/* */
content: "";
/* display:设置元素的性质 */
width: 50px;
height: 2px;
/* 设置背景颜色 */
background-color: yellow;
display: block;
}
ul>li::after{
/* 设置元素内容 */
content: "";
/* display:设置元素的性质 */
width: 50px;
height: 2px;
/* 设置背景颜色 */
background-color: red;
display: block;
}
</style>
</head>
<body>
<!-- 伪元素：通过css设置元素=》一般用于实现某些效果，但是直接添加在html中会打乱结构
::before=》在...之前添加元素
::after=》在...之前添加元素
注意：伪元素选择器必须与content属性一起使用-->
<ul>
<li>
lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</body>
</html>伪选择器的介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪选择器t</title>
<style>
/* 效果是鼠标悬停在p、a的字体变成红色 */
p:hover>a{
/* 选择鼠标悬停的对象是p时，设置样式作用的对象是a */
color: red;
}
p{
width: 200px;
height: 40px;
background-color: green;
}
.text:link{
color: aqua;
}
.text:valid{
color: black;
}
.text:hover{
color: red;
}
.text:active{
color: blueviolet;
}
</style>
<!--:link=》未访问时
:hover=》设置鼠标悬停时的样式 ,所有元素都可以使用
:active=》鼠标按下为松开,其他元素也是可以的
：visiited=》鼠标松开，被访问时
顺序：：link>:visited>:hover>:active-->
</head>
<body>
<p class="text">xvssbxxfb
<!-- <a href="#">勇找吴法。</a> -->
</p>
<a href="#" class="text">以兼自是通。</a>
<a href="#">以卑不</a>
</body>
</html>复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<!-- 复合选择器：多个选择器组合来选中一个元素
交集：选择器选中了相同的元素. =》重点优先级
并集 -->
<style>
#afirst {
color: brown;
}
ul>.first #afirst{
color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="first">
<p><a href="#" id="afirst">lorem1</a></p>
</li>
<li>
<p><a href="#" id="asecond">lorem2</a></p>
</li>
<li>
<p><a href="#">lorem3</a></p>
</li>
<li>
<p><a href="#">lorem4</a></p>
</li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
