摸鱼少学习多

day32- 基本选择器

基本选择器

标签选择器

标签选择器会选择页面上所有这种类型的标签

在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选择器 > 类选择器 > 标签选择器

posted @   北海之上  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  day33 -选择器完
·  day34-各种细节格式
·  2022.4.6 基本选择器
·  三种基本选择器
·  CSS-三大基本选择器、选择器优先级、（标签选择器（可以选择到页面所有这个标签的元整）、类选择器（ 可以多个标签归类，是同一个class，可以复用）、id选择器（全局唯一））
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
/* 粒子吸附*/
点击右上角即可分享
微信分享提示