css不常用的4个选择器-个人向

　　①：element1.element2（给同时满足有element1和element2 2个类名的元素添加样式）

<!DOCTYPE html>
<html>
     <head>
           <meta charset="utf-8" />
           <title></title>
           <style>
                .test1.test2 {
                     color: red;
                }
           </style>
     </head>
     <body>
           <div class="test1">123</div>
           <div class="test1 test2">
                123
           </div>
     </body>
</html>

　　②：[attribute^=value] （匹配属性值以指定值开头的每个元素，如下面demo，给属性为href且值以http开头的所有a元素添加样式）

<!DOCTYPE html>
<html>
     <head>
           <meta charset="utf-8" />
           <title></title>
           <style>
                a {
                     display: block;
                     border-bottom: 1px solid #ccc;
                }
                [href^=http]::after {
                     content: 'after伪元素';
                     display: inline-block;
                     margin: 20px;
                     width: 50px;
                     height: 50px;
                     color: #fff;
                     text-align: center;
                     background-color: #000;
                }
           </style>
     </head>
     <body>
           <a href="#">123</a>
           <a href="http://www.baidu.com">百度</a><br>
           <a href="http://bilibili.com">B站</a><br>
     </body>
</html>

　　③：element1 + element2（给紧接在element1元素后的第1个兄弟元素添加样式）

<html>
     <head>
           <meta charset="utf-8" />
           <title></title>
           <style>
                .test1 + .test2 {
                     font-size: 50px;
                }
           </style>
     </head>
     <body>
           <div class="test1">666</div>
           <div class="test2">888</div>
           <div class="test2">999</div>
           <div class="test3">000</div>
     </body>
</html>

　 ④：element1 ~ element2（给紧接在element1元素后的所有兄弟元素添加样式）

<html>
     <head>
           <meta charset="utf-8" />
           <title></title>
           <style>
                .test1 ~ div {
                     font-size: 50px;
                }
           </style>
     </head>
     <body>
           <div class="test1">666</div>
           <div class="test2">888</div>
           <div class="test3">999</div>
           <div class="test4">000</div>
     </body>
</html>

来源：https://www.cnblogs.com/tu-0718/p/11310647.html

标签

css选择器

css

css样式