一、选择器
选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式
二、常用选择器
1、标签选择器
浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式
其语法如下:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>郑州大学</p>
<style>
p {
text-align:center;
font-family:宋体,华文彩云,'maiandra';
border:1px solid red;
}
</style>
</body>
</html>
结果如图:
2、类选择器
浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式
其语法如下:
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>类选择器</title>
<style type="text/css">
.border{
border:1px solid red;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<p class="border center">添加边框且居中显示</p>
</body>
</html>
结果如下:
注意:
①、class标签属性的属性值不能以数字开头;
②、class标签属性的属性值可以有多个,每个值之间用空格间隔;
3、id选择器
浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式
其语法如下:
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>id选择器</title>
<style type="text/css">
#font_size {
font-size: 24px;
}
</style>
</head>
<body>
<p id="font_size">文字大小24像素</p>
</body>
</html>
结果如下:
4、后代选择器
后代选择器又称为包含选择器,用于为特定的HTML子元素添加CSS样式
其语法如下:
注意:选择器之间用英文的点间隔
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>后代选择器</title>
<style type="text/css">
/*只为ol标签元素内class="font_color"的子元素添加CSS样式*/
ol .font_color {
color: red;
}
</style>
</head>
<body>
<ol>
<li>第一项</li>
<li class="font_color">第二项</li>
</ol>
<ul>
<li>第一项</li>
<li class="font_color">第二项</li>
</ul>
</body>
</html>
结果如下:
5、分组选择器
如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器以简化CSS样式代码, 该选择器的选择器名由多个选择器组成,使用逗号分隔
其语法如下:
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分组选择器</title>
<style>
/*#numbers{
color: red;
}
.letters{
color: red;
}*/
/*上面CSS用于数字或字母的颜色设置为红色,但代码冗余!*/
#numbers,.letters{
color: red;
}
</style>
</head>
<body>
<p id="numbers">9527</p>
<h3 class="letters">Traveler</h3>
</body>
</html>
结果如下:
6、通配符选择器
通配符选择器匹配HTML文档中的任何HTML元素
其语法如下:
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
/*取消标签默认margin与padding值*/
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<p style="border:1px solid red;">海上生明月,天涯共此时。</p>
</body>
</html>
结果如下:
二、选择器优先级
1、优先级介绍
id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器,如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>选择器优先级</title>
<style type="text/css">
span {
font-size: 36px;
}
.span_class {
font-size: 24px;
}
#span_id {
font-size: 12px;
}
</style>
</head>
<body>
<span>span</span>
<span class="span_class">span</span>
<span class="span_class" id="span_id">span</span>
</body>
</html>
结果如下:
2、!important
!important用于提高指定样式规则的应用优先级,如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>!important</title>
<style type="text/css">
span {
font-size: 36px !important;
}
.span_class {
font-size: 24px;
}
#span_id {
font-size: 12px;
}
</style>
</head>
<body>
<span>span</span>
<span class="span_class">span</span>
<span class="span_class" id="span_id">span</span>
</body>
</html>
结果如下: