7.12 CSS选择器

wink在干嘛

已于 2022-07-12 19:56:48 修改

阅读量130

点赞数 1

分类专栏：前端0到1 文章标签：大数据

于 2022-07-12 19:54:44 首次发布

本文链接：https://blog.csdn.net/m0_61214373/article/details/125749924

版权

前端0到1 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天学习了css的一些选择器，做了些总结

选择器及其优先级

一、常用选择器

我们常用的选择器有标签选择器、id选择器、class选择器，其对应的语法分别为标签名{}、#id

属性值{}、.class属性值{}。

二、组合选择器

组合选择器: 两个或两个以上的选择器配合使用

后代选择器: 选择器1 选择器2{} .item span{} 选中类名为item的标签的后代span标签 (组合选择器确定通过什么选择器去限定范围)

子代选择器: 选择器1 > 选择器2{} .item > span{} 选中类名为item的标签的子标签span标签

毗邻选择器: 选择器1 + 选择器2{} .text + p{} 选中类名为text的标签的下一个标签p标签

兄弟选择器: 选择器1 ~ 选择器2{} .text ~ p{} 选中类名为text的标签的下面的所有兄弟标签中的p标签

多元素选择器: 选择器1,选择器2{} body,ul{样式} body{样式}和ul{样式}

交集选择器: 选择器1选择器2{} 既要满足选择器1又要满足选择器2 的标签

比如：p.wrap 选择有类名为wrap的p标签

.wrap.box 选择既有类名wrap又要类名box的标签

三、选择器的权重

组合选择器如何判断优先级

id > class > 标签名

存在id id选择器个数越多优先级越高

id选择器个数一致再看class选择器个数 class选择器个数越多优先级越高

当id和class选择器个数都一致比较标签选择器签选择多的优先级越高

当所有个数都一致时优先级一样下面覆盖上面

再控制台里的styles内先后排名顺序

1. element.style{} 行内样式

2. 组合选择器/基础选择器按照优先级排序优先级一样按照先后顺序排序后来居上

3. 默认css

4. 继承来的css

<!DOCTYPE html>
<html>
<!--根标签-->

<head>
  <!--不可视区域-->
  <meta charset='UTF-8'>
  <!--国际编码-->
  <meta name='Keyword' content='关键字'>
  <meta name='Description' content='描述'>
  <title>demo</title>
  <style>
    #wrap1 .box2 .box4 .box5{
      color: red;
    }

    span#txt.text{
      color: blue;
    }
    span{color:red;}
    span{color:blue;}

    ul{
      color:red;
    }

    a{
      color:green;
    }
  </style>
</head>


<body>
  <div class="box1" id="wrap1">
    <div class="box2">
      <div class="box3">
        <div class="box4">
          <div class="box5">
            <span class="text" id="txt">看我的颜色 决定权重</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ul>
    <li>
      <p>123</p>
    </li>
  </ul>


  <p><a href=""> 我是a标签 </a></p>
</body>

</html>

四、css选择器优先级

id选择器 > class选择器 > 标签名选择器 > *(全部标签都可以选中)

选择范围越小优先级越高

优先级一样时下面的相同css覆盖上面的相同css

<!DOCTYPE html>
<html>
<!--根标签-->

<head>
  <!--不可视区域-->
  <meta charset='UTF-8'>
  <!--国际编码-->
  <meta name='Keyword' content='关键字'>
  <meta name='Description' content='描述'>
  <title>demo</title>
  <link rel="stylesheet" href="index.css">
  <style>
    /* #wrap {
      background-color: blue;
    } */

    .box {
      background-color: green;
      color: #fff;
    }

    /* div {
      background-color: red;
    }  */

    .box1 {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <div class="box box1 box2" id="wrap"> 我身上是什么颜色 那么哪个选择器优先级就更高 </div>

  <!-- <p class="box">123</p> -->
</body>

</html>