1.什么是id选择器
id是指我们可以在HTML标签上设置一个id属性值
id属性的特点是一个HTML文档中,是 唯一 的,不能重复
格式为 #id { property : value ;… }
含义 :可以选中页面中含有id属性的值的元素,从而给其增加样式
例如
华为5G技术
注意:命名id时,(即属性的写法)
id名中间不能有空格,否则,是一个非法的id定义
且不能以数字开头
也不能包含 & @ 这类字符
但可以是文字 ,比如
哈哈哈哈
小例子1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<style>
#title ,#title2 {
color: red;
}
#哈 {
color: aqua;
}
</style>
</head>
<body>
<h1 id="title">我是出镜率很高的h1</h1>
<h2 id="哈">哈哈哈哈</h2>
<h2 id="title2">我是出镜率不高的h2</h2>
</body>
</html>
2.什么是类选择器?
格式 .class { property : value ; …}
类选择器中的类指的是class属性
有相同class属性值的都会被选中
class与id相比不具有唯一性
class属性的值通常以字母开头中间不能有空格
类选择器可以和元素选择器组合使用(一会举个例子)
例如:
华为5G技术
小例子2: 挺好的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<style>
/* #title ,#title2 {
color: red;
}
#哈 {
color: aqua;
} */
.title {
color: blue;
}
.phone {
font-size: 30px;
}
/* 类选择器可以和元素选择器组合使用
p.phone 中间没有空格,紧挨着 */
p.phone {
color: red;
}
</style>
</head>
<body>
<h1 id="title">我是出镜率很高的h1</h1>
<h2 id="哈">哈哈哈哈</h2>
<h2 id="title2">我是出镜率不高的h2</h2>
<div class="title">华为5G技术</div>
<!-- 类选择器可以和元素选择器组合使用,怎么个组合方式 -->
<div class="phone">P40</div>
<div>路由器</div>
<div>智慧屏</div>
<div class="phone">Mate40</div>
<p class="phone">nova</p>
</body>
</html>