基本选择器
标签选择器
标签选择器会选择页面上所有这种类型的标签
在title下定义<style>
标签名称{
定义1...
定义2...
}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 /*标签选择器会选择到页面上所有的这种类型的标签*/
8 h1{
9 color: #15f50c;
10 background: rosybrown;
11 border-radius:24px ;
12 }
13 p{
14 font-size: 80px;
15 }
16 </style>
17 </head>
18 <body>
19 <h1> learn Java</h1>
20 <h1> still learn Java</h1>
21 <p>listen to me</p>
22 </body>
23 </html>
类选择器
格式： .class名称{
定义123...
}
可以将多个标签归类分为一组，归类成同一个class
只需在定义时加上class=“xxx”
1 <body> 2 <h1 class="gugu">1111</h1> 3 <h1 class="haha">3333</h1> 4 <h1 class="gugu">2222</h1> 5 </body>
1 /*类选择器的格式 .class的名称{}
2 可以多个标签归类分为一组，同一个class
3 */
4 .gugu{
5 color: #15f50c;
6
7 }
8 .xixi{
9
10 color: red;
11 }
12 .haha{
13 color: rosybrown;
14 }
id选择器
格式： # + id名称 {
定义123...
}
id选择器全局唯一，只能有一个id，不能归类
1 <body> 2 3 <h1 id="gugu">1111</h1> 4 <h1 id="xixi">3333</h1> 5 <h1 id="haha">2222</h1> 6 <h1 class="style1">44442</h1> 7 <h1 class="style1">5555</h1> 8 <h1 >77772</h1> 9 </body>
1 /*id选择器
2 # + id名称{}
3 id必须全局唯一
4 不遵循就近原则，固定优先级：
5 id选择器 > 类选择器 > 标签选择器
6 */
7 #gugu{
8 color: #15f50c;
9 }
10 .style1{
11 color: aliceblue;
12 }
13 h1{
14 color: blue;
15 }
总结
1. 标签选择器：选择一类标签 标签{}
2. 类选择器 class： 选择所有class属性一致的标签，跨标签 .类名{}
3. id选择器 id： 全局唯一不可重复 #id名称{}
选择器优先级不遵循就近原则，固定优先级
id选择器 > 类选择器 > 标签选择器
标签：基本,...,color,标签,class,day26,id,选择器 From： https://www.cnblogs.com/GUGUZIZI/p/16893915.html