CSS选择器

一．什么是CSS选择器？

CSS选择器的主要功能就是选中⻚⾯指定的标签元素，选中了元素, 才可以设置元素的属性。就好⽐SC2,War3这样的游戏,需要先选中单位,再指挥该单位⾏动。

二．CSS选择器分类

CSS选择器主要分以下几种:

通过代码学习

<div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<ul>
 <li>aaa</li>
 <li>bbb</li>
 <li><a href="#">ccc</a></li>
</ul>
<ol>
 <li>1111</li>
 <li>2222</li>
 <li>3333</li>
</ol>
<button id="submit">提交</button>

 1. 标签选择器

/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
 color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
 color: green;
}

2. class选择器(通过 . 来使用)

/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
 font-size: 32px;
}

3. id选择器(通过 # 来使用)

/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
 color: red;
}

4. 复合选择器(通过 * 来使用)

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}

5. 通配符选择器

/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
 color: blue;
}

1）以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选 择器的组合, 也可以是任意数量选择器的组合

2） 不⼀定是相邻的标签, 也可以是"孙⼦"标签