CSS基本选择器
- 创业
- 2025-08-27 01:33:01
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> 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> 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> 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> 注意： 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>上一篇
R-CNN
