HTML 基本选择器

最新推荐文章于 2023-07-08 17:36:30 发布

Su mmer

最新推荐文章于 2023-07-08 17:36:30 发布

阅读量403

点赞数

文章标签： html java 前端

本文链接：https://blog.csdn.net/qq_61557242/article/details/130567947

版权

1、标签选择器：选择一类标签

调用方式：标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*标签选择器，会选择到 页面上所有的这个标签的元素*/
    h1{
      color: #4d3232;
      background: #b3d4fc;
      border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
  </style>


</head>
<body>


<h1>学Java</h1>
<h1>学Java</h1>
<p>一起学Java</p>

</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .

调用方式：类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择的格式   .class的名称{}
    好处，可以多个标签归类，是同一个class。可以复用


    */
    .qinjiang{
      color: red;
    }
    .kuangshen{
      color:yellow;
    }

  </style>
</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang" 标题3</h1>

<p class="qinjiang">p标签</p>
</body>
</html>

3、id 选择器：全局唯一,标签的id不能相同

调用方式：#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*id选择器  ：id必须保证全局唯一！
      #id名称{}
      不遵循就近原则，固定的
      id选择器>class 选择器 > 标签选择器
    */
    #qinjiang{
      color: darkgoldenrod;
    }
    .style1{
        color: indianred;
    }
    h1{
        color: #485cb7;
    }
  </style>
</head>
<body>

<h1 id="qinjiang" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

三者的优先级：id > class > 标签

在三者同时出现在一段代码中， “id选择器” 的优先级高于 “class选择器” 高于“ 标签选择器”

萌新小白，仅供参考