主页 分类 关于

CSS 三种基本选择器

  1. 第一种 标签选择器
  2. 第二种 类 class 选择器
  3. 第三种 id选择器
  4. 优先级: id选择器 > class选择器> 标签选择器
  5. 总结

CSS个人整理

第一种 标签选择器

<body>
  p{
      color: blue;   //蓝色字体
      background: red;    //设置背景图颜色
      border-radius: 24px;    //设置圆角边框
      font-size: 80px;    //设置字体大小
    }
<p class="sdq1">史迪奇骑士</p>
<p class="sdq2">史迪奇打手</p>
<p>史迪奇国王</p>
</body>

第二种 类 class 选择器

<style>
  .sdq1{
      color: blue;   //蓝色字体
      background: red;    //设置背景图颜色
      borde-radius: 24px;    //设置圆角边框
      font-size: 80px;    //设置字体大小
  }
  .sdq2{
      color: red;   //红色字体
  }
 </style>
 <body>
<h1 class="sdq1">史迪奇骑士<h1>
<h1 class="sdq2">史迪奇打手<h1>
<h1>史迪奇国王<h1>
</body>

类选择器 .class的名称{}

好处: 可以多个标签归类, 是同一个class, 可以复用

第三种 id选择器

id选择器 #id的名称{}

id必须保证全局唯一

<style>
 #sdq1{
     color: blue;   //蓝色字体
     background: red;    //设置背景图颜色
     borde-radius: 24px;    //设置圆角边框
     font-size: 80px;    //设置字体大小
 }
 .sdq2{
     color: red;   //红色字体
 }
</style>
<body>
<h1 id="sdq1">史迪奇骑士<h1>
<h1 class="sdq2">史迪奇打手<h1>
<h1>史迪奇国王<h1>
 </body>

优先级: id选择器 > class选择器> 标签选择器

优先级不遵循就近原则, 是固定的

总结

标签选择器: 选择一类标签 标签名{}

类/class选择器: 选择所有的class属性一致的标签, 跨标签 .类名{}

id选择器: 全局唯一 id名{}









作者: 我叫史迪奇
本文来自于: https://sdq3.link/CSS-selector.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议