CSS-三大基本选择器、选择器优先级、（标签选择器（可以选择到页面所有这个标签的元整）、类选择器（ 可以多个标签归类，是同一个class，可以复用）、id选择器（全局唯一）） 

选择器：
    作用：选择页面上某一个，或某一类元素
   
基本选择器：
    1.标签选择器
    2.类选择器 class
    3.id选择器

 

复制代码
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
  <style>
  /*标签选择器：会选择到页面上所有的这个标签的元素    
    */
    h1{
      color:#124571;/*字体颜色 */
      background: #3cbda6;/*背景颜色 */
      border-radius:24px;/*边框圆角 */
    }
    p{
      font-size:80px;/*字体大小*/
    }
    
  </style>
  
  
  
</head>
<body>
    <h1>java</h1>
    <p>听我说。</p>
</body>
</html>
复制代码
复制代码
类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
  <style>
  /*类选择器：类选择器的格式：
    .class的名称{}
    好处：
        只让某一类的属性生效，该样式
        可以多个标签归类，是同一个class，可以复用。
    */
    .dwq{
      color:#659541
    }
   
    .pd{
      color:#801541
    }
   
    
  </style>
  
  
  
</head>
<body>
    <h1 class="dwq">java</h1>
  <h1 class="pd">java1</h1>
  <h1>java2</h1>
  <h1>java3</h1>
    <p>听我说。</p>
</body>
</html>
复制代码
优先级：id选择器、类选择器、标签选择器
    当三个选择器都设置在同一个元素上时，id选择器的优先级是最高的
    当只有标签选择器和类选择器两个选择器设置在同一个元素上时，类选择器的优先级高
    
    所以：id选择器高于其他两个选择器，类选择器高于标签选择，不遵循近就原则

 

posted @   hollg  阅读(229)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS-高级选择器-层次选择器（后代选择器、子选择器、相邻兄弟选择器、相邻通用选择器）
·  CSS-属性选择器（常用-重点）
·  三种基本选择器
·  基本选择器
·  CSS选择器优先级
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手