- 属性选择器
E[attrbuite]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
border: 1px solid gray;
}
/* E[attr] */
li[id]{
border: 2px solid red;
}
/* E[attr=value] */
li[class=blue]
{
border: 2px solid red;
}
/* E[attr*=value]正则表达式匹配,包含有value的E标签 */
li[class*=red]
{
border: 2px solid red;
}
/* E[attr^=value]正则表达式匹配,包含有value的E标签并且以value开头的 */
/* E[attr$=value]正则表达式匹配,包含有value的E标签并且以value结尾的 */
</style>
</head>
<body>
<ul>
<li class="red" id="l"></li>
<li class="blue" ></li>
<li class="yellow"></li>
<li class="green" ></li>
<li class="darkred" ></li>
</ul>
</body>
</html>
- 兄弟伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* +
+ :获取当前元素相邻的满足条件的元素,此元素后第一个元素
~:获取当前元素满足条件的兄弟元素,就是此元素后的所有元素
*/
li{
list-style: none;
}
.first+li{
color: hotpink;
}
.second~li{
color: brown;
font-size: 30pxb;
}
</style>
</head>
<body>
<ul>
<li class="first">C</li>
<li class="second">C++</li>
<li>C#</li>
<li>JAVA</li>
</ul>
</body>
</html>
- 相对于父元素的解构伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
list-style: none;
margin-top: 20px;
font-size: 15px;
}
/* E:first-child查找E元素的父级元素中的第一个E元素,不会过滤其他类型的元素*/
li:first-child{
color: red;
}
/* E:last-child查找E元素的父级元素中的最后一个E元素 */
li:last-child{
color:salmon;
}
/* E:first-of-type查找E元素的父级元素中的第一个E元素,过滤掉其他类型的元素 */
li:first-of-type
{
color: seagreen;
}
/* nth:nth-child()指定索引位置,索引值从1开始 还有nth-of-type()跟上面一样de*/
li:nth-child(6)
{
background: sienna;
}
li:nth-child(even)
{
background: blue;
}
/* 取前5个元素 */
li:nth-of-type(-n+5)
{
background: slateblue;
}
</style>
</head>
<body>
<ul>
<div></div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
- 锚链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2>div{
width: 200px;
height: 30px;
border:1px solid red;
}
h2:target
{
color: red;
}
.left
{
float: left;
position: fixed;
width: 20%;
height: 500px;
}
.right{
float: right;
width: 60%;
}
</style>
</head>
<body>
<div class="left">
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
</div>
<div class="rihgt">
<h2 id="one">1
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</h2>
<h2 id="two">2
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</h2>
<h2 id="three">3<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></h2>
<h2 id="four">4<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></h2>
<h2 id="five">5<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>9</h2>
<h2>0</h2>
</div>
</body>
</html>
- 伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 200px;
}
div:nth-of-type(1){
width: 300px;
height: 200px;
background: red;
float: left;
}
div:nth-of-type(1)::after{
content: "";
}
div:nth-of-type(2)::before{
display: block;
/* 必须设置content */
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
margin: -10px;
background-color: white;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<!-- before和after默认位行级元素 -->
<div></div>
<div></div>
</body>
</html>