（一）什么是选择器
每条css样式声明都有两部分组成：选择器和样式
p{
color:red;
}
p是选择器，color：red是样式
（二）标签选择器
就是html中的标签，见笔记《二》
e,g,
h1{
font-size:40px;
font-weight:bold;
color:red;
}
p1{
font-size:20px;
font-weight:normal;
color:blue;
}
（三）类选择器：在css样式编码中是最常用到的
在head中的style中
.stress{
font-size:20px;
}
在body中：
<p>半个小时到家了<span class="stress">可是外面下雨了</span>所以还是要早点回去</p>
这样因着p中span的class是stress，所以span标签内的字是由head中style中的stress类选择器设置的。
（四）ID选择器
在head中的style中
#stress{
font-size:20px;
}
在body中：
<p>半个小时到家了<span id="stress">可是外面下雨了</span>所以还是要早点回去</p>
这样因着p中span的id是stress，所以span标签内的字是由head中style中的stressID选择器设置的。
（五）ID选择器和类选择器的异同
ID选择器在HTML中只能使用一次。
一个标签可以同时设置多个类选择器。
<span class="stress bigsize">三年级</span>
（六）子选择器
语法：在类选择器名后面写上">"，并后面跟上子标签；作用域为一级子标签
head中style内的代码如下：
.first>span{
border:1px solid red;
}
body中p内的代码如下：
<span>范德萨发第三方第三方<span>胆小如鼠</span>范德萨发范德萨发</span>
效果为“范德萨发第三方第三方胆小如鼠范德萨发范德萨发”外有一个1px的红色实线边框。而“胆小如鼠”外没有单独的边框。
（七）后代选择器
语法：在类选择器名后面写上" "(空格)，并后面跟上子标签；作用域为所有子标签
head中style内的代码如下：
.first span{
border:1px solid red;
}
body中p内的代码如下：
<span>范德萨发第三方第三方<span>胆小如鼠</span>范德萨发范德萨发</span>
效果为“范德萨发第三方第三方胆小如鼠范德萨发范德萨发”外有一个1px的红色实线边框。“胆小如鼠”外也有单独的边框。
（八）通用选择器
语法：*{}；作用域：全部所有标签
head中style内：* {color:red;}
body中：
<h1>勇气</h1>
<p><span>三年级时</span>，我还是一个胆小如鼠的小女孩</p>
效果：都是红色的字。
（九）伪选择器
给html不存在的标签（标签的某种状态）设置样式。
比如：现在比较常用的&&兼容所有浏览器的 a:hover
head中style：
a:hover {
color: red;
}
（十）分组选择器
为多个标签元素设置同一个样式
p,span{}或者.class,span等
head中style内：
.first,span{
color:green;
}
效果：class内和span全部都是绿色
p,span{
color:green;
}
效果：p和span全部都是绿色
网友评论