常用的css选择器

67 阅读2分钟

给碌碌无为的自己,留下一点痕迹,证明自己曾经来过。

学习"学习"

学习 "表达"

学习取解决生活中的各个问题

下周可能就是react-router-v6的学习笔记还是博客? 尽量做到一周一篇吧

常用的选择器

CSS中,选择器用来指定网页上我们想要样式化的HTML元素。

列表选择器

选择器与选择器之间通过,连接,表示都选择

<html lang="en">
<head>
    <style>
        .box1,.box2{
            background-color: rgb(178, 215, 186);
            width: 200px;
            height: 200px;
            margin: 1px;
        }
    </style>
</head>
<body>
   <div class="box1">
    我会被选中
   </div>
   <div class="box2">
    我也会被选中
   </div>
</body>
</html>

.box1.box2之间通过,连接。表示选择box1box2

list-seletor.png

交集选择器

<style>
    .seletor1.seletor2{
        width: 400px;
        height: 200px;
        background-color: aqua
    }
</style>  
<div class="seletor1 seletor2">
    交集选择器: <code>seletorName1seletorName2</code> 选中,没有任何间隔
</div>

元素必须同时拥有选择器seletor1seletor2才行

both-seletor.png

ID选择器

通过#seletorName的方式选择,将CSS规则添加到元素上,通常用于选择某一个元素。因为id是元素独一无二的。

<style>
    #id-seletor{
        width: 400px;
        height: 400px;
        border: 1px solid;
        background-color: bisque;
    }
</style>
<body>
    <div id = "id-seletor">
        我会被 <code>#id-seletor</code> 选中,因为我是id选择器
    </div>
</body>

效果图如下所示:

id-seletor.png

类选择器

通过.className的方式选择,某一类标签。

<style>
    .class-seletor{
        width: 200px;
        height: 200px;
        border: 1px solid;
        background-color: bisque;
    }
</style>
<body>
    <div class = "class-seletor">
        我会被 <code>.class-seletor</code> 选中
    </div>
    <div class = "class-seletor">
        我也会被 <code>.class-seletor</code> 选中
    </div>
</body>

选择 class="calss-seletor"的这一类元素

class-seletor.png

直接子代选择器

通过 >符号选择选择器 fater > son.

<html lang="en">
<head>
    <style>
        .father-seletor{
            width: 400px;
            height: 400px;
            border: 1px solid;
            background-color: bisque;
        }
        .father-seletor > .son{
            background-color: white;
            width: 300px;
            height: 200px;
        }
        .father-seletor > div{
           border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class = "father-seletor">
        我是father 
        <br>
        我会被 <code>.father-seletor</code> 选中
        <div class="son">
            我是son
            <br>
            我会被<code> .father > .son </code>选中
            <br>
            我也会被<code> .father > div </code>选中
        </div>
    </div>
</body>
</html>

选择的是直接后代元素:

child_combinator.png

注意:从上图可以看到,当不同的选择器选择的是同一个元素时,两个选择器的css规则都起了作用,这是因为这两个选择器中的规则没有重复。当两个css选择器在规则上具有重复时 如.father > div选择器中添加width:400px则上图中son的宽度则为400px; 因为后者重写了width规则

后代选择器

通过 father son的形式选择需要的元素

<html lang="en">
<head>
    <style>
        .father-seletor{
            width: 400px;
            height: 400px;
            border: 1px solid;
            background-color: bisque;
        }
        .father-seletor > .son{
            background-color: white;
            width: 300px;
            height: 200px;
        }
      .father-seletor p{
        background-color: cadetblue;
      }
    </style>
</head>
<body>
    <div class = "father-seletor">
        我是father 
        <br>
        我会被 <code>.father-seletor</code> 选中
        <div class="son">
            我是son
            <br>
            我会被<code> .father .son </code>选中
            <br>
        <div>
            <p>我是div中的p标签我会被<code>.father-seletor  p</code>选中</p>
            <p> 注意:<code>.father-seletor</code><code>p</code> 中间有个空格哦!</p>
        </div>
        </div>
    </div>
</body>
</html>

效果如下

descendant_combinator.png

一般兄弟选择器和紧邻兄弟选择器

一般兄弟选择器:元素与元素之间 拥有共同的父类元素, 通过~连接兄弟元素

<html lang="en">
<head>
    <style>
        .father-seletor {
            width: 400px;
            height: 400px;
            border: 1px solid;
            background-color: bisque;
        }
​
       .son1{
        background-color: red;
        height: 100px;
        width: 396px;
        border: solid 1px black;
        margin: 1px;
       }
       .son1 + .son2{
        background-color: red;
        height: 100px;
        width: 394px;
        border: solid 2px black;
        margin: 1px;
       }
       .son1 ~.son3{
        background-color: gray;
        height: 100px;
        width: 390px;
        margin: 1px;
        border: solid 4px black;
       }
    </style>
</head><body>
    <div class="father-seletor">
        我是father
        <br>
        我会被 <code>.father-seletor</code> 选中
        <div class="son1">
            我是son1
        </div>
​
        <div class="son2">
            我是son2 我会被<code>.son1 + .son2</code>选中 因为我们是紧邻兄弟选择器。拥有共同的father
        </div>
​
        <div class="son3">
            我是son3 我会被<code>.son1 ~ .son2</code>选中 因为我们是一般兄弟选择器。也拥有共同的father
        </div>
    </div></body></html>

general_adjacentsibling combinator.png

参考连接

MDN_CSS_Seletor