css中选择器分为很多个 我们该如何正确使用呢?
首先,我们要了解css中都有哪些选择器:标签选择器、class选择器、id选择器、子代选择器、后代选择器、交集选择器、并集选择器......我们在写代码中该如何正确使用这些选择器呢?
1.标签选择器
这是一个很简单的选择器 给大家写个列子
这段代码中 div 就是属于一个标签选择器。
<!DOCTYPE html>
<html lang="en">
<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>标签选择器</title>
<style>
div{ width: 100px;
height: 50px;
background: #f00;
color: #fff;;
margin: 100px auto;}
</style>
</head>
<body>
<div>
标签选择器
</div>
</body>
</html>
2.class选择器:是指定类的所有元素的样式。
a 指定的元素是 div 。
<html lang="en">
<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>class选择器</title>
<style>
.a{ width: 300px;
height: 200px;
background: black;
color: white;}
</style>
</head>
<body>
<div class="a">
class选择器
</div>
</body>
</html>
3.id选择器:指定具有ID的元素的样式,是指定的 具有id样式的。
<!DOCTYPE html>
<html lang="en">
<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>id选择器</title>
<style>
#a{ width: 1000px;
height: 300px;
background:rosybrown;
color: white;}
</style>
</head>
<body>
<div id="a">
id选择器
</div>
</body>
</html>
4.子代选择器:只能选择某元素子元素的元素
<!DOCTYPE html>
<html lang="en">
<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>子代选择器</title>
<style>
div>span{
background:black;
color: white;
}
</style>
</head>
<body>
<div>
<span>子代选择器</span>
</div>
<div>
<p>子代<span>选择器</span></p>
</div>
</body>
</html>
子元素选择了是用来大>(子结合符)号 ,子结合符左右是允许有空白的
所以: div > span; div>span; div > span;这些写法都是可行的,不过为了美观,我们一般不留空格的。
5.后代选择器:又称为包含选择器,后代选择器可以选择作为某元素后代的元素
<!DOCTYPE html>
<html lang="en">
<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>后代选择器</title>
<style>
div span{display: block;
width: 300px;
height: 50px;
background: black;
color: white;}
</style>
</head>
<body>
<div>
<span>后代选择器</span>
</div>
<div>
<span>其它元素的后代</span>
</div>
</body>
</html>
ps:子代选择器和后代选择器;
不同点: 1.后代选择器利用空格作为连接符号,子元素选择器利用>符号作为链接符号
2.后代选择器指定的标签中,所有特定的后代标签,不管是儿子还是孙子... 都会被选中而子元素选择器指定的标签中,
所有特定的直接后代标签,不包括孙子以后的标签,只会将直接后代选中
共同点: 1.都可以使用id,class,标签选择器名称作为选择器
2.都可以在使用空格或>连接符号无限的连接下去
例如:选择器1 选择器2 选择器3 ...{}
选择器1>选择器2>选择器3>...{}
6.交集选择器
<!DOCTYPE html>
<html lang="en">
<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>交集选择器</title>
<style>
span.logo {
}
</style>
</head>
<body>
<div class="div" id="div">
<div>
<span class="logo"></span>
</div>
<span></span>
</div>
</body>
</html>
7.并集选择器;同等级元素 用逗号隔开
<!DOCTYPE html>
<html lang="en">
<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>并集选择器</title>
<style>
.a,.b{ width: 100px;
height: 50px;
background: black;
color: white;}
</style>
</head>
<body>
<div class="a">并集选择器
</div>
<div class="b">这是一个并集选择器</div>
</body>
</html>
8.属性选择器:指 为拥有指定元素的HTML元素设置样式,而不仅限于class和id
<!DOCTYPE html>
<html lang="en">
<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>属性选择器</title>
<style>
input[type="text"] { outline: none }
</style>
</head>
<body>
<div class="a">
<span></span>
</div>
<input type="text">
</body>
</html>