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 @ 2022-06-16 17:54  hollg  阅读(238)  评论(0)    收藏  举报