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

Posted 2022-06-15 tu-0718

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于css不常用的4个选择器-个人向的主要内容，如果未能解决你的问题，请参考以下文章