css之基本选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /**
    基本选择器：元素选择器
    通过元素的名字进行定位，它会获取页面上所有这个元素，无论藏的多深都可以获取到

    格式：
    元素名字{
    css样式;
    }

    基本选择器：类选择器
   应用场合：不同类型的标签使用相同的类型

   格式：
   .class的名字{
   css样式
   }

   基本选择器：id选择器
   应用场合：可以定位唯一的一个元素
   不同的标签确实可以使用相同的id，但是我们一般会进行人为的控制，让id是可以唯一定位到一个元素

   格式：
   id的名字{
   css样式
   }

   基本选择器的优先级：
   id选择器>class选择器>元素选择器
     */
    h1 {
      color: red;
    }

    i {
      color: blue;
    }

    .myclass {
      color: green;
    }

    #myid {
      color: yellow;
    }

  </style>
</head>
<body>
<h1>我是<i>一个</i>标题</h1>
<h1>我是一个标题</h1>
<h1 class="myclass">我是一个标题</h1>
<h1>我是一个标题</h1>
<h2 class="myclass">我是一个标题</h2>
<h2>我是一个标题</h2>
<h2>我是一个标题</h2>
<h2 id="myid">我是一个标题</h2>
<h2 id="myid">我是一个标题</h2>

</body>
</html>

基本选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .myclass{
      color: red;
    }
    /*#myid{*/
    /*  color: yellow;*/
    /*}*/
    h1{
      color: green;
    }
  </style>
</head>
<body>

<h1 class="myclass" id="myid">北京欢迎你</h1>

</body>
</html>

id选择器》类选择器〉标签选择器

posted @ 2023-03-01 21:45  King-DA  阅读(24)  评论(0)    收藏  举报