二.选择器

选择器

简单选择器

1.ID选择器:选中对应id值的元素。

2.元素选择器

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
            background-color: aquamarine;
            text-align: center;
            font-size: 3em;
        }
        .red2{
            color: black;
            background-color: brown;
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <h1 style="color: rgba(255, 0, 0, 0.658);background-color: rgba(0, 0, 255, 0.692);text-align: center;">
        中国军事网
    </h1>
    <p class="red">Lorem ipsum dolor sit amet.</p>
    <p class="red2">Doloribus temporibus tempora odio iure.</p>
    <p>Quae cum nihil architecto impedit.</p>
    <p>Enim illum vero officia earum!</p>
    <p>Accusantium eaque dignissimos nostrum expedita.</p>
</body>
</html>

4.通配符选择器

*,表示选中所有元素

5.属性选择器

根据属性名和属性值选中元素

/*选中所有具有href属性的元素*/
[href="https://douyu.com"]{
    color: #008c8c;
}
[class~="a"]{
    color: black;
}
[href$="sina.com"]{
    color: blueviolet;
}

6.伪类选择器(爱恨法则 l v h a)

选中某些元素的某种状态

  1. link:超链接未访问时的状态(a元素)

  2. visited:超链接访问过后的状态(a元素)

  3. hover:鼠标悬停时的状态

/*伪类选择器*/
  /*选中鼠标悬停时的a元素*/
  a:hover{
      color: aqua;
  }
  1. active:激活状态,鼠标按下时的状态
  a:active{
      color: aqua;
  }

7.伪元素选择器

生成并选中某个元素内部的第一个或最后一个子元素。

before:

<body>
    <p>
        刘猛作品<span>冰是睡着的水</span>最好看。
    </p>
</body>

after:

span::before{
    content: "《";
    color: aqua;
}
span::after{
    content: "》";
    color: aqua;
}

选择器的组合

1.并且

<body>
 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit, natus?</p>
 <p class="c1 c2 c3">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</body>
p{
    text-indent: 2em;
    line-height: 2;
}
p.c1.c2.c3{
    color: #008c8c;
}

2.后代元素 (空格符)

 <div class="c1 c2 c3">
    <ul>
        <li>Lorem, ipsum dolor.</li>
        <li>Praesentium, at ratione.</li>
        <li>Consequuntur, temporibus atque.</li>
        <li>Voluptatibus, tempore nisi.</li>
        <li>Officiis, laudantium eos?</li>
    </ul>  
 </div>
 <ul>
     <li>Lorem, ipsum dolor.</li>
     <li>Praesentium, at ratione.</li>
     <li>Consequuntur, temporibus atque.</li>
     <li>Voluptatibus, tempore nisi.</li>
     <li>Officiis, laudantium eos?</li>
 </ul>
.c1.c2.c3 li{
    color: rebeccapurple;
}
 <div class="cd">
     <p class="ef">
         Lorem ipsum dolor sit amet.
     </p>
</div>
 <p class="ef">
     Lorem ipsum dolor sit amet.
 </p>
.cd .ef{
    color: blue;
}

3.子元素 (>)

 <div class="cd">
     <p class="ef">
         Lorem ipsum dolor sit amet.
     </p>
</div>
 <p class="ef">
     Lorem ipsum dolor sit amet.
 </p>
.cd>.ef{
    color: blue;
}
<body>
 <div>
     <ul>
         <li>Lorem, ipsum.</li>
         <li>Doloribus, illo!</li>
         <li>Nihil, non?</li>
     </ul>
 </div>
</body>
div>ul>li{
    color: aqua;
}

4.相邻兄弟元素 (+)

<div>
    <ul>
        <li>Lorem, ipsum.</li>
        <li class="a1">Odio, hic.</li>
        <li>Ad, fuga!</li>
        <li>Inventore, quam.</li>
        <li>Rem, dolor!</li>
        <li>Id, cumque.</li>
    </ul>
</div>
.a1+li{
    color: #008c8c;
}

5.兄弟元素 (~)

后边出现的所有兄弟元素

<div>
    <ul>
        <li>Lorem, ipsum.</li>
        <li class="a1">Odio, hic.</li>
        <li>Ad, fuga!</li>
        <li>Inventore, quam.</li>
        <li>Rem, dolor!</li>
        <li>Id, cumque.</li>
    </ul>
</div>
.a1~li{
    color: #008c8c;
}

选择器的并列

多个选择器并列,用逗号分隔,减少了代码的冗余,提高了可读性。

<div>
    <ul>
        <li>Lorem, ipsum.</li>
        <li class="a1">Odio, hic.</li>
        <li>Ad, fuga!</li>
        <li>Inventore, quam.</li>
        <li>Rem, dolor!</li>
        <li>Id, cumque.</li>
    </ul>
</div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Rem animi id quae! Vero.</p>
<p>Dolorum illum reprehenderit sapiente sequi.</p>
.a1~li,p{
    color: #008c8c;
}
.a1~li,p,......{
    color: #008c8c;
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页