选择器
作用:查找标签,设置样式。
基础选择器:
(1)标签选择器
(2)类选择器
(3)id 选择器
(4)通配符选择器
标签选择器
标签选择器:使用标签名作为选择器->选中同名标签设置相同的样式。
例如:p ,h1 ,div ,a ,img ……
<style> P{ color:red; } </style>
特点:选中同名标签设置相同的样式,无法差异化同名标签的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签选择器</title> <style> /* 特点:选中同名标签设置相同的样式,无法差异化同名标签的样式 */ p{ color: red; } </style> </head> <body> <p>这是p标签</p> <p>123456789</p> <p>321654987</p> </body> </html>
类选择器
作用:查找标签,差异化设置标签的显示效果。
步骤:
(1)定义类选择器-> . 类名
(2)使用类选择器->标签添加 class =“类名”
<style> /*定义类选择器*/ .red{ color: red; } </style> <!--使用类选择器--> <div class="red">这是 div 标签</div>
一个类选择器可以给多个标签使用
一个标签可以使用多个类名,class属性值写多个类名,类名用空格隔开
开发习惯:类名自定义,多个单词可以用 - 连接,例如:news-hd
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> /* 定义 */ .red{ color: red; } .size{ font-size: 50px; } </style> </head> <body> <!-- 使用 --> <!-- 一个类选择器可以给多个标签使用 --> <p class=