还不会 CSS 选择器？超详细基础讲解
CSS简称为样式表，是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
一、三种CSS引入方法
1.行内式：行内样式是各种引入CSS最直接的一种，也叫内联样式。行内样式就是通过直接设置各个元素的style属性，从而达到设置样式的目的。
<!-- 第一种：行内式 --> <p style="color: red; font-size: 10rpx;">第一种：通过style属性直接在元素里配置样式</p>2.内嵌式：在HTML文件的 <head> 标签里，用 <style> 标签包裹CSS代码，作用于当前整个页面。
<!-- 第二种：内嵌式 --> <style> /* 标签选择器：直接用标签名选中某个元素 */ h3 { color: aqua; font-size: 15rpx; } </style>3.3. 外链式：把CSS代码单独写在 .css 文件里，再用 <link> 标签引入到HTML中，可被多个页面共用。
<!-- 第三种：外链式 (允许相对路径，绝对路径和URL)--> <link rel="stylesheet" href="./css/style.css">二：三种基本选择样式
1.标签选择器
作用：直接用 HTML 标签名当选择器，选中页面里所有同名标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三种基本选择器</title> <style> /* 1.标签选择器：选中所有标签名一样的元素 */ p { color: red; } </style> </head> <body> <p>荔枝</p> <p>苹果</p> <p>手套</p> </body> </html>2.ID选择器：必须以 # 开头，后面接元素的 id 属性值。
作用：精准选中页面中唯一的一个元素（注：同一个 id 在页面中不能重复）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三种基本选择器</title> <style> /* 1.标签选择器：选中所有标签名一样的元素 */ #p { color: red; } /* 2.ID选择器：根据元素唯一的id选中元素 */ #p1 { color: blue; } #p3 { color: green; } </style> </head> <body> <p id="p1">荔枝</p> <p id="p2">苹果</p> <p id="p3">手套</p> </body> </html>为什么苹果是黑色的呢，因为页面里没有id=“p”的元素，而我们也没有定义id=“p2”的颜色，所以它就变成默认的黑色。
3.类选择器
作用：用 . 加上元素的 class 属性值，选中所有带这个类名的元素。
特点：一个 class 可以给多个元素用，复用性强，是开发里用得最多的选择器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三种基本选择器</title> <style> /* 1.标签选择器：选中所有标签名一样的元素 */ #p { color: red; } /* 2.ID选择器：根据元素唯一的id选中元素 */ /*#p1 { color: blue; } #p3 { color: green; } */ /* 3.类选择器：根据元素所属的类选中元素 */ /* 注意：相同优先级的样式表，遵从“后来居上”原则 */ #p1 { color: yellow; } .fruit { color: red; } .daily { color: blueviolet; } </style> </head> <body> <p id="p1" class="fruit">荔枝</p> <p id="p2" class="fruit">苹果</p> <p id="p3" class="daily">手套</p> </body> </html>上面可以看到我把id选择器那里注释掉了，要是没有注释的话，根据优先级原则，我们的手套还是绿色的，不会变成紫色。
一些关于基本选择器的注意事项：
1. 浏览在渲染css样式时，先根据优先级渲染，然后对相同优先级的样式按照“后来居上”原则（最后一个会覆盖前面的）渲染！
例：
.fruit { color: red; } .fruit { color: blue; /* 最终生效 */ }2. 优先级： 行内样式 > id选择器样式 > 类选择器样式 > 标签选择器样式 （无需遵循"后来居上"原则），优先级高的会直接覆盖优先级低的
3.ID 必须唯一，一个页面不能重复
4.类可以重复，一个标签也可以加多个类
5.选择器的写法：
标签选择器：p{}；ID选择器：#id=“名字”；类选择器：.类名{}