CSS根本选择器
1. 通配选择器作用：可以选中全部的 HTML 元素。
语法：
* {
属性名: 属性值;
} 举例： <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>学习css最重要的是坚持</p>
<p>学习web后端最重要的是仔细</p>
<p>这样才能找到工作</p>
</body>
</html>https://i-blog.csdnimg.cn/direct/ffa500c50ff7483c8219275204d9acc4.png
2. 元素选择器
作用：为页面中 某种元素 统一设置样式。
语法 标签名 {
属性名: 属性值;
} 举例： <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
p{
color: beige;
}
</style>
</head>
<body>
<p>学习css最重要的是坚持</p>
<p>学习web后端最重要的是仔细</p>
<p>这样才能找到工作</p>
</body>
</html>https://i-blog.csdnimg.cn/direct/f3a0abc0eabb49b9a8826dd1a1ecbd5d.png
3. 类选择器
作用：根据元素的 class 值，来选中某些元素。 语法 .类名 {
属性名: 属性值;
} 举例： <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
.red {
color: red;
}
.bulue{
color: blue;
}
.px{
font-size: 30px;
}
</style>
</head>
<body>
<p class="red">学习css最重要的是坚持</p>
<p class="bulue">学习web后端最重要的是仔细</p>
<p class="px">这样才能找到工作</p>
</body>
</html>
https://i-blog.csdnimg.cn/direct/86a151ff2bea433b9f3793933a6d8b40.png
1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。 2. class 值，是我们自定义的，按照尺度：不要使用纯数字、不要使用中文、尽量使用 英文与数字的组合，若由多个单词组成，使用 - 做连接，比方： left-menu ，且命名 要有意义，做到 “见名知意”。 3. 一个元素不能写多个 class 属性，下面是 错误示例： <!-- 该写法错误，元素的属性不能重复，后写的会失效 --> <h1 class = "speak" class = "big" > 你好啊 </h1> 4. 一个元素的 class 属性，能写多个值，要用空格隔开，比方： 4. ID选择器
作用：根据元素的 id 属性值，来 精准的 选中 某个 元素。 语法：
#id值 {
属性名: 属性值;
} 举例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#red {
color: red;
}
#bulue{
color: blue;
}
#px{
font-size: 30px;
}
</style>
</head>
<body>
<p id="red">学习css最重要的是坚持</p>
<p id="bulue">学习web后端最重要的是仔细</p>
<p id="px">这样才能找到工作</p>
</body>
</html>https://i-blog.csdnimg.cn/direct/7203926b3b56446ea7adb94e9fe276fc.png
留意： id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包罗空 格、区分巨细写。 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。 一个元素可以同时拥有 id 和 class 属性。
类选择器 选中全部特定类名（ class 值）的元素 —— 使用频 率很高
综合
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器综合</title>
<style>
#red{
color: red;
}
.gree{
font-size: 100px;
}
p{
background-color: azure;
}
</style>
</head>
<body>
<p id="red" class="gree blue">学习css最重要的是坚持</p>
<p id="bulue">学习web后端最重要的是仔细</p>
<p id="px">这样才能找到工作</p>
</body>
</html>https://i-blog.csdnimg.cn/direct/b1a94be421104962bf5ae00239151e32.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]