CSS选择器：基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>day03/02-css选择器.html</title> <style> /* 基本选择器 优先级： ID选择器 > 类选择器 > 标签选择器 > 通用选择器 */ /* 元素/标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式 语法： 标签名{样式名:样式值;...} 缺点：标签选择器无法差异化同名标签的显示效果 */ p { color: red; } /* 类选择器：将标签的class属性值作为选择器，差异化设置标签的显示效果。 使用步骤： 第一步：标签添加class="值” 第二步：定义样式，语法：.class属性值{样式名:样式值;...} 注意：类名不能随意定义，不可以以数字开头，类名不能还有特殊字符 */ .font-color { color: blue; } .font2 { font-size: 20px; } /* id选择器：将标签的id属性值作为选择器，差异化设置标签的显示效果。 使用步骤： 第一步：标签添加id="id名 第二步：定义样式，语法：#id属性值{样式名:样式值;...} 使用规则(注意)： 同一个id选择器在一个页面只能使用一次 id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。 id的值是不可以重复 */ #spanTxt { color: orange; } /* 通配符选择器：用*表示，不需要在标签上额外定义属性，浏览器自动查找页面所有标签，设置相同样式 语法：*{样式名:样式值;...} 匹配所有元素 通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距 *{margin:0px;padding:0px;} */ * { color: blueviolet; } </style> </head> <body> <p>我爱中国</p> <p class="font-color">我爱工作</p> <span class="font-color font2" id="spanTxt">我爱黑马</span> <h1>我爱敲代码</h1> </body> </html>
