css选择器总结
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>选择器</title>
<style type="text/css">
div {
color: rebeccapurple;
font-size: 15px;/*标签选择器*/
}
#one {color: gray;}/*id选择器*/
.two {color: blue;}/*class选择器*/
*{
color:red;/*通配选择器*/
}</style>
</head>
<body>
<div id="one" class="two">
第一个div
</div>
</body>
</html>
id属性是唯一的,class不唯一
四个选择器的优先级:
ID > class > 标签 > 通配符
标签选择器(根据标签的名称获取)、ID选择器(获取的是ID属性)、类选择器(class属性)、通用选择器(通配符)
包含选择器代码:
<!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>选择器2</title>
<style type="text/css">
div.one { color: aqua;
background: blue;border: 1px;
}
#two { color:pink;background: rgb(0, 255, 128);border: 1px black}
div.list>ul{
color:pink;background: rgb(255, 0, 81);border: 1px black;
width:"200px" ;height:"200px"
}</style>
</head>
<body>
<div class="one">
这是第一个div标签
</div>
<div id="two">
这是第二个div标签
</div>
<div class="list">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</div>
</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 type="text/css">
.one[class]{
color: bisque;
}
input[type="text"]{
color: blueviolet;}
input[type^="e"]
{color:green;}
</style>
</head>
<body>
<div class="two">
这是第一个div标签
</div>
<div class="one">
这是第二个div标签
</div>
<p><input type="text" name="" value="张三"></p>
<p><input type="password" name="" value="李四"></p>
<p><input type="email" name="" value="王五"></p>
<div id="ehree"> 最后一个标签</div>
</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 type="text/css">
a:link { color:aqua;}
a:visited{ color:gray}
a:hover{ color:blue}
a:active{ color:royalblue}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点我
</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 type="text/css">
p::before{content: "张三";
color: red;
}
p::after{content: "李三";
color: rgb(0, 255, 132);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
注:要使用伪元素选择器一定要加上content属性