CSS中的基本选择器

最新推荐文章于 2022-06-19 18:35:33 发布

摘一颗星星

最新推荐文章于 2022-06-19 18:35:33 发布

阅读量1.8k

点赞数

文章标签： html 媒体前端 css

本文链接：https://blog.csdn.net/qq_45192812/article/details/123255088

版权

CSS中的基本选择器

什么是选择器？选择器就是通过标签选择一类元素进行控制，常用于HTML等语言中。
css中的选择器种类有很多，下面介绍几种常见的基本选择器：标签选择器，类选择器和id选择器

一、标签选择器

标签选择器又叫元素选择器：文档的元素就是最基本的选择器。
例如：

/*对h1和p标签进行选择*/
    <style>
        h1{
          background: wheat;
          border-radius: 21px;
        }
        p{
          font-size: 80px;
        }
    </style>

</head>

<body>

<h1>学习Java</h1>
<h1>学习学习</h1>
<p>努力努力</p>

</body>
</html>

选中标签后，在{}中可以设计样式，运行结果如下：
在这里插入图片描述

二、类选择器

类选择器格式： .class的名称{}，好处是可以多个标签归类，是同一个class,可以复用。

/*.class的名称{},对class类进行选择*/
 <style>
      .biao1{
        color: aqua;
      }
      .biao2{
        color: red;
      }

  </style>

</head>
<body>


<h1 class="biao1">标题一</h1>
<h1 class="biao2">标题二</h1>
<h1 class="biao1">标题三</h1>

<p class="biao2">标签1</p>

对三个标题和一个标签进行样式设计，运行结果如下：
在这里插入图片描述

三、id选择器

选择器格式：#id名称{}，且id必须保证全局唯一！
选择的优先级为：id选择器>class选择器>标签选择器
例如：

 <style>
  	  /*#id名称{},对id进行选择*/
      #title1{
        color: aquamarine;
      }
      /*.class的名称{},对class类进行选择*/
      .s1{
        color: red;
      }
      /*对h1标签进行选择*/
      h1{
        color: #047be5;
      }
 </style>
</head>
<body>

<h1 class="s1" id="title1">标题1</h1>
<h1 class="s1">标题2</h1>
<h1 class="s1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>