CSS-常用的选择器详解

置顶

王十四兄

已于 2023-01-01 15:01:45 修改

阅读量300

点赞数 1

分类专栏： css 文章标签： css html 前端 css3

于 2022-10-28 23:03:52 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127580925

版权

常用的选择器详解(元素、后代元素、子元素、元素关系，id属性选取指定属性，类和伪类，并集，通配，交集的说明语法和实例，选择器的优先级)

摘要由CSDN通过智能技术生成

常用的选择器简单介绍

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>常用选择器</title>
    <style type="text/css">
       /* p{
        color: red;
      }
      
      h1{
        color: red;
      } */

      /* #p1{
        font-size: 20px;
      } */

      /* .p2{
        color: red;
      } */

      /* .hello{
        font-size: 50px;
      } */

      /* #p1 , .p2 , h1{
        background-color: yellow;
      } */

      /* *{
        color: red;
      } */

      span.p3 {
     
        background-color: yellow;
      }

      /* p#p1{
        background-color: red;
      } */
    </style>
  </head>
  <body>
    <h1>悯农</h1>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p id="p1">锄禾日当午</p>

    <p class="p2 hello">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>

    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>

    <p class="p3">锄禾日当午</p>
    <span class="p3">汗滴禾下土</span>
  </body>
</html>

请添加图片描述

1. 元素选择器

作用：通过元素选择器可以选中页面中的所有元素
语法：标签名{}

p {
   
  color: red;
}

2. id 选择器

作用：通过元素的 id 属性值选中唯一的一个元素
语法：#id 属性值{}

#p1 {
   
  font-size: 20px;
}

3. 类选择器

作用：通过元素的 class 属性值选中一组元素
语法：.class 属性值{}

.p2 {
   
  color: red;
}

1.我们可以为元素设置 class 属性，class 属性和 id 属性类似，只不过 class 属性可以重复
2.拥有相同 class 属性值的元素，我们说他们是一组元素
3.可以同时为一个元素设置多个 class 属性值，多个属性值之间使用空格隔开

<p class="p2 hello">锄禾日当午</p>
<p class=</

最低0.47元/天解锁文章

王十四兄

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-常用的选择器详解

常用的选择器详解(元素、后代元素、子元素、元素关系，id属性选取指定属性，类和伪类，并集，通配，交集的说明语法和实例，选择器的优先级)
复制链接

扫一扫

专栏目录