CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.
CSS选择器主要分以下几种:
1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 通配符选择器
我们通过代码来学习CSS选择器的使⽤.
标签选择器
<style>
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
</style><body>
<div>我是⼀个div</div>
<a>我是⼀个a</a>
</body>
类选择器
<style>
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}
</style><body>
<div class="font32">我是⼀个div, class为font32</div>
</body>
• ⼀个类可以被多个标签使⽤,⼀个标签也能使⽤多个类(多个类名要使⽤空格分割,这种做法可以让 代码更好复⽤)
ID选择器
<style>
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}
</style><body>
<div id="submit">我是⼀个div, id为submit</div>
</body>
• id是唯⼀的,不能被多个标签使⽤(是和类选择器最⼤的区别)
通配符选择器
<style>
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}
</style><body>
<div>我是⼀个div</div>
<p>我是⼀个p</p>
</body>
复合选择器
<style>
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
color: blue;
}
</style><body>
<ul>
<li>aaa</li>
<li>bbb</li>
<!-- 下一行的a为超链接 -->
<li><a href="#">ccc</a></li>
<!-- 下一行的a不为超链接 -->
<li><a>ddd</a></li>
</ul>
</body>
1. 以上三个标签选择器ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签,也可以是"孙⼦"标签
3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.