一、什么是选择器
选择器是指通过一定的语法规则选取对应的HTML标记,然后给对应的HTML标记设置样式。
选择器分为四大类:基本选择器、符合选择器、伪类选择器、属性选择器。
二、基本选择器
image.png全部标签的颜色设置为蓝色
image.png
1、通用选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用选择器</title>
<style type="text/css">
*{
color: #00f;
}
</style>
</head>
<body>
<h2>请问中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
<p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
2、标签选择器
image.png<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
/*
格式:标签名{属性:值;}
*/
h2{
color: red;
}
li{
color: green;
}
p{
color: blue;
}
</style>
</head>
<body>
<h2>请问中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
<p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
3、类选择器
image.png<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
/*
格式:class的属性值{属性:值;}
只要class是temp的标签,不管他是什么标签他都会设置样式。
*/
.temp{
color: red;
}
/*
先找到p标签,然后去找p标签里面有没有class属性值是temp1的,如果有就给其设置样式。
*/
p.temp2{
color: blue;
}
</style>
</head>
<body>
<h2 class="temp">请问中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
<p class="temp2">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
4、id选择器
image.png<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
/*
格式:#id{属性:值;}
作用:给拥有指定的id属性值来设置样式
但要注意在一个HTML文件中ID的属性值是唯一的
*/
#temp{
color: red;
}
#temp2{
color: blue;
}
</style>
</head>
<body>
<h2 id="temp">请问中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
<p id="temp2">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
网友评论