选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式
常见的选择器有:id选择器,class选择器,标签选择器,分组选择器,父代选择器,通配符选择器,最后介绍一下伪类。
1 标签选择器
标签选择器:浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式,其语法如下:
标签选择器名 {
declaration1;
declaration2;
…
}
以p标签为例设置标签选择器
特别注意:浏览器会为HTML文档内所有p标签元素添加“font-size: 36px;font-weight: bold;”CSS样式。
2 id选择器
id选择器:浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式,其语法如下(以p标签为例):
#id选择器名 { //注意id前边的#号是规范
declaration1;
declaration2;
…
}
注意:
id标签属性的属性值不能以数字开头;
id标签属性的属性值在HTML文档中必须唯一;
3 类选择器
类选择器:浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式,其语法如下:
. 类选择器名 { //注意类选择器名之前的点
declaration1;
declaration2;
…
}
以p标签为例设置类选择器
注意:
1,class标签属性的属性值不能以数字开头;
2,class标签属性的属性值可以有多个,每个值之间用空格间隔;例子如下:
注意空格间隔
总结以上三个选择器的优先级
id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器,如下代码:
对三个span标签分析:第三个span标签有标签选择器,类选择器和id选择器设置样式值,由于id选择器优先级较高,所以样式显示为id选择器的;第二个span标签是标签选择器和类选择器设置样式,类选择器优先级较高,所以样式显示为类选择器的;第一个span标签只有标签选择器设置样式。
4 分组选择器
如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器以简
化CSS样式代码, 该选择器的选择器名由多个选择器组成,使用逗号分隔,其语法如下:
选择器1,选择器2,选择器3…{ //这里应该注意,在分组选择器列表中,选择器可以是id选择器,类选择器。以及标签选择器,不是确定的哪一种。
declaration1;
declaration2;
…
}
5 后代选择器
后代选择器(descendant selector)又称为包含选择器,用于为特定的HTML子元素添加CSS样式,语法如下:
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 { //选择器之间用空格间隔;
declaration1;
declaration2;
…
}
只为ol标签元素内class="font_color"的子元素添加CSS样式
总结:html body 以及ol都是li的父类标签,所以也可以写作如下选择器
html body ol .font_color{
color:red
}
6 通配符选择器
通配符选择器匹配HTML文档中的任何HTML元素,其语法如下:
*{ //一般情况下:在设置padding和margin时用
declaration1;
declaration2;
…
}
补充:!important
!important用于提高指定样式规则的应用优先权,如下代码:
由于给span标签选择器设置了!important,所以span标签选择器优先级最高,给所有的span标签都设置一样的font-size:36px的属性
7 伪类
CSS 伪类用于向某些选择器添加特殊的效果,语法结构如下:
注意
若:link、:visited、:hover和:active一起使用,:hover 必须被置于 :link 和 :visited 之后,:active 必须被置于 :hover 之后,即:link -> :visited -> :hover -> :active ,简记love hate(爱恨) 。