选择器
选择器的功能：
选中要添加样式的标签的元素。
什么是标签选择器？
通过标签名直接选择相应的标签。
不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器选中。
格式：
标签名{声明；}
标签选择器的作用：
1.利用标签所有的特性，进行默认样式的清除
2.复杂选择器中一部分使用
id选择器的作用：
选中页面中唯一的一个标签。
格式：
#ID值{声明；}
注：
1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
3.见名知意。不要起毫无意思的名字。
4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
5.下划线写法：search_button 多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
【注】：id选择器尽量不要在css中使用，而是配合js使用。
类选择器：
通过标签中的class属性来选择标签
格式：
.class值{
声明;
}
优点：可以选择一部分标签，设置相同的样式。
【注】
1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
2.一个标签可以拥有多个class值。
3.命名规则与ID相同。
类写样式，ID写行为。
*:
表示选中所有标签。（包含body标签。）
慎用。
使用场景：
清除默认的样式。
现在已经不常用了，因为效率不高。
一刀切，所有的标签都会去执行一次css代码。
后代选择器
通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。
格式：
选择器1 选择器2{
声明;
}
选择器1必须是选择器2的祖先元素。
IE7开始兼容，IE6不兼容。
【注】
1.定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。
子代选择器：
通过标签间的嵌套关系，来选中相应标签的子元素。
格式：
选择器1>选择器2{
声明;
}
【注】>左右两边的关系必须是父子关系。
交集选择器
既满足条件1，又满足条件2.
格式：
选择器1选择2{
声明;
}
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3.
并集选择器
格式：
选择器1，选择器2{
声明;
}
选择器之间使用逗号进行分割。
可以避免代码冗余
序选择器
first-child
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
last-child
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中
相邻选择器
格式：
选择器1+选择器2{
声明;
}
选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级。
【注】IE7兼容，IE6不兼容。
兄弟选择器：
同属于一个父级。
语法格式：
选择器1 ~ 选择器2{
声明;
}
选中的是选择器1元素之后的所有同级的选择器2元素。
nth-child选择器
语法格式：
n表示父元素下的第几个子元素。
E：nth-child（n）{
声明;}
nth-of-type选择器
格式：
E：nth-of-type(n){
声明;
}
选中父元素下的同类型中的第n个元素
【注】
1.要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
2.该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E.
伪类选择器
伪类：
同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。
格式：
选择器：伪类名{
声明;
}
伪类选择器大致可分为两种：
（1）静态伪类 只能用于超链接的样式。
：link 超链接点击之前
：visited 超链接被访问过之后。
（2）动态伪类 针对所有的标签都适用
：hover “悬停” 鼠标放在标签上时。
：active “激活” 鼠标点击标签，不松手时。
(3)特殊 针对表单元素。
：focus 是某个标签获得焦点时的样式。
对于a标签有4种伪类，对应四种状态
：link 点击之前
：visited 访问之后
：hover 鼠标悬停
：active 激活 鼠标点击时。
link visited hover active lvha (爱恨准则) lv = love ha = hate
a:link,a:visisted 一般都是可以省略的，简写在a标签中。一般只需要写a{}，a:hover{}
a{
}
a:hover{
}
扫一扫
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
