选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式。
选择器分类:
1、标签选择器:浏览器为HTML文档中标签名与标签选择器名相同的标签元素天剑CSS样式。其语法如下:
标签选择器名{
declaration1;
declaration2;
...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>白日依山尽,黄河入海流。</span>
<style>
/*
*标签选择器
*/
span{
color: red;
font-family: 华文行楷;
}
</style>
</body>
</html>
2、 类选择器:浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式。其语法如下:
.类选择器名{
declaration1;
declaration2;
...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span class="poem">白日依山尽,黄河入海流。</span>
<style>
/*
*类选择器
*/
.poem{
color: blue;
font-family: 华文行楷;
}
</style>
</body>
</html>
注意:class标签属性值不能以数字开头;class标签属性值可以有多个,每个值之间用空格间隔。
3、id选择器: 浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式。其语法如下
# id选择器名 {
declaration1;
declaration2;
...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="poem">白日依山尽,黄河入海流。</span>
<style>
/*
*id选择器
*/
#poem{
color: yellow;
font-family: 华文行楷;
}
</style>
</body>
</html>
注意:id标签属性的属性值不能以数字开头。
4、后代选择器: 又称为包含选择器,用于为特定的HTML子元素添加CSS样式。语法如下:
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="poem">白日依山尽,黄河入海流。</span>
<style>
/*
*后代选择器
*/
html body #poem{
color: palevioletred;
font-family: 华文行楷;
}
</style>
</body>
</html>
5、分组选择器:
选择器1,选择器2,选择器3…{
declaration1;
declaration2;
…
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="poem">白日依山尽,黄河入海流。</span>
<span class="poem">欲穷千里目,更上一层楼。</span>
<style>
/*
*分组选择器
*/
#poem,.poem{
color: green;
font-family: 华文行楷;
display: block;
}
</style>
</body>
</html>
6、通配符选择器:匹配HTML文档中的任何HTML元素,其语法如下:
*{
declaration1;
declaration2;
…
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>白日依山尽,黄河入海流。</span>
<span>欲穷千里目,更上一层楼。</span>
<style>
/*
*通配符选择器
*/
*{ /*取消默认的margin和padding值*/
margin: 0px;
padding: 0px;
}
</style>
</body>
</html>