什么是css选择器？css3中5种常见的基本选择器（代码实例）本章我们给⼤家讲解⼀下什么是css选择器？css3中5种常见的基本选择器。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你有所帮助。
⼀：什么是css选择器？
CSS是⼀种⽤于屏幕上渲染html，xml等⼀种语⾔，CSS主要是在相应的元素中应⽤样式，来渲染相对应⽤的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是⼀种模式，⽤于选择需要添加样式的元素。选择器主要是⽤来确定html的树形结构中的DOM元素节点。
⼆：css3中5种常见的基本选择器
css3中的选择器种类有很多，下⾯介绍的是5种常见的基本选择器：通配选择器，类选择器，元素选择器， ID选择器和组选择器。
1.通配符选择器（所有浏览器⽀持）
通⽤选择器⽤*来表⽰，⽤来选择所有元素，，也可以选择某个元素下的所有元素；
*{marigin: 0;
padding: 0;
font-size: 14px;
}
上⾯代码⼤家在reset样式⽂件中看到的肯定不少，他所表⽰的是，所有元素的margin和padding都设置为0，字体⼤⼩都设置为14px，另外⼀种就是选择某个元素下的所有元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>
效果图：
我们可以看到在demo元素⾥的三个⼦元素div，p，span都是分别没有设置css样式的，但只要我们设置了demo元素下的所有元素的统⼀样式，那么demo元素⾥的三个⼦元素div，p，span就会出现样式。
2.类选择器 （所有浏览器都⽀持类选择器，但多类选择器（.className1.className2）不被ie6⽀持。）
类选择器根据类名来选择，前⾯以”.”来标志，是以⼀独⽴于⽂档元素的⽅式来指定样式，使⽤类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>
效果图：
3.元素选择器（所有浏览器⽀持）
元素选择器（标签名选择器），是css3选择器中最常见⽽且最基本的选择器。元素选择器其实就是⽂档的元素，如html,body,p,div等等下下⾯例⼦中选择了span元素，并设置了字体颜⾊为红⾊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这⾥使⽤<span>元素选择器</span>改变了样式</p>
</div>
</body>
css选择器分为哪几类</html>
效果图：
4.ID选择器（所有浏览器都⽀持）
ID选择器和上⾯说的类选择器是很相似的，在使⽤ID选择器之前也需要先在html⽂档中加注ID名称，这样在样式选择器中才能到相对应的元素，不同的是ID选择器是⼀个页⾯中唯⼀的值，我们在类使⽤时是在相对应的类名前加上⼀个“.”号（.className）⽽id选择器是在名称前使⽤"#"如(#demo)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>
效果图：
ID选择器有⼏个地⽅需要特别注意：
第⼀：⼀个⽂档中⼀个id选择器只充许使⽤⼀次，因为id在页⾯中是唯⼀的；
第⼆，id选择器不能像类选择器⼀样多个合并使⽤，⼀个元素只能命名⼀个id名；
第三，可以在不同的⽂档中使⽤相同的id名，⽐如说在“test.html”中给h1定了“＃important”，也可给“te
st1.html”中定义p的id 为"#important"，但前提是不管在test.html还是test1.html中只充许有⼀个id叫"#important"的存在。
5.组选择器（所有浏览器都⽀持）
当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔。组选择器是将具有相同样式的元素分组在⼀起，每个选择器之间使⽤逗号“，”隔开，这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前⾯所说的后代选择器，这⼀点⼤家在使⽤中千万要⼩⼼加⼩⼼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这⾥是⼀个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接⼀</a><br>
<span class="demo2">⽂字⽂字！</span>
</div>
</body>
</html>
效果图：
以上就是什么是css选择器？css3中5种常见的基本选择器（代码实例）的详细内容，更多请关注我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。