选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式:
标签选择器:
浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式,其语法如下:
标签选择器名 {
declaration1;
declaration2;
…
}
例如:
b{
font-size: 72px;
}
类选择器:
浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式,其语法如下:
. 类选择器名 {
declaration1;
declaration2;
…
}
例如:
.u{
color: red;
}
注意:
class标签属性的属性值不能以数字开头;
class标签属性的属性值可以有多个,每个值之间用空格间隔;
id选择器:
浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式,其语法如下
#id选择器名{
declaration1;
declaration2;
…
}
#zzu{
text-align: center;
font-family: 'vladimir script'
}
注意:
id标签属性的属性值不能以数字开头;
id标签属性的属性值在HTML文档中必须唯一;class标签属性的属性值可以不唯一;
后代选择器(descendant selector)又称为包含选择器,
用于为特定的HTML子元素添加CSS样式,语法如下:
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}
例如:
html body #zzu{
background-color: red;
}
分组选择器:
如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器以简化CSS样式代码, 该选择器的选择器名由多个选择器组成,使用逗号分隔,其语法如下:
选择器1,选择器2,选择器3…{
declaration1;
declaration2;
…
}
例如:
#c,.u{
color: red;
}
通配符选择器:
通配符选择器匹配HTML文档中的任何HTML元素,其语法如下:
*{
declaration1;
declaration2;
…
}
例如:
*{
margin: 0px;
padding: 0px;
}