CSS选择器
标签选择器
可以同时给多个同类型标签设置属性。
<!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>Document</title>
<style>
div{
color: blue;
font-size: 20px;
}
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<div>张三</div>
<div>李四</div>
<div>王二麻子</div>
<p>关羽</p>
<p>马可波罗</p>
<p>貂蝉</p>
</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>Document</title>
<style>
.c-red{
color: red;
}
.c-blue{
color: blue;
}
</style>
</head>
<body>
<div class="c-red">张三</div>
<div>李四</div>
<div>王二麻子</div>
<p class="c-red"> 关羽</p>
<p>马可波罗</p>
<p class="c-blue">貂蝉</p>
</body>
</html>
ID选择器
使用方法同class,但只能用一次
伪类选择器
用于给某些选择器添加特殊的效果。
链接伪类选择器
- :link /未访问的链接/
- :visited /已访问的链接/
- :hover /鼠标移动到连接上/
- :active /选定的链接/
顺序尽量不要颠倒,按照lvha的顺序
<!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>Document</title>
<style>
a:link{
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited{
font-size: 16px;
color: blue;
font-weight: 700;
}
a:hover{
font-size: 16px;
color: red;
font-weight: 700;
}
a:active{
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#">链接</a>
<a href="#">登录</a>
</div>
</body>
</html>
结构(位置)伪类选择器
- :first-child :选取属于其父元素的首个子元素的制定选择器
- :last-child :选取属于其父元素的最后一个子元素的制定选择器
- :nth-child(n) :选取其父元素的低N个子元素,不论元素的类型,even:偶数,odd:奇数
- :nth-last-child(n) :选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:first-child{
color: blue;
}
li:last-child{
color: red;
}
li:nth-child(5){
color: burlywood;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:nth-child(even){ /*也可用2n*/
color: burlywood;
}
li:nth-child(odd){ /*也可用2n+1*/
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>
目标伪类选择器
- :target : 用于选取当前活动的目标元素