CSS中所有选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS中所有选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

测试CSS中所有选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--属性选择器-->
         h1{
            color: black;
        }
<!--class选择器-->
        .wwwwwww{
         color: blue;
        }

<!--id选择器-->
        #rrrrrr{
        color: green;
        }

<!--       后代选择器，所有子类选择器-->
    body p{
         background: red;
        }
<!--子类选择器，后一代选择器-->
    li>p{
       background: green;
    }
<!--兄弟选择器，向下选择一个-->
    .active + p{
      background: green;
    }
<!--兄弟选择器，向下选择所有的兄弟-->
.active~p{
      background: blue;
    }
<!--伪类选择器-->
    ul li:first-child{
        background: yellow;
    }
        
    a{
    background: blue;
    }
<!--属性选择器-->
<!--选择所有有id的a标签-->
    a[id]{
    background: yellow;
    }
<!--选择id为tttt的a标签-->
     a[id=tttt]{
    background: green;
    }
<!--选择class内有itemes的a标签-->
    a[class*=itemes]{
    background: red;
    }
<!--选择class以ttt开头的a标签-->
    a[class^=ttt]{
    background: #64ffff;
    }
<!--选择class以rrr结尾的a标签-->
    a[class$=rrr]{
    background: #23f133;
    }
    </style>
</head>
<body>
<a class="items classes mytest" id="tttt">asdfafasd</a>
<a class=" classes mytest" id="tttt55">asdfafasd666</a>
<a class="items classes mytest" id="tttt5555">asdfafasd8888</a>
<a class="itemes classes mytest">asdfafasd7676767</a>
<a class="tttttitems classes mytestes">asdfafasd76767678787</a>
<a class="itemes classes mytest">aaaaaaaaaass</a>

<a class="tttttitems classes mytestrrr">asdfafasd76767678787</a>
<a>ddddddddddddd</a>
<h1 class="wwwwwww">asdfffffffff</h1>
<h1 id="rrrrrr">222222</h1>
<h1>333333</h1>
<h1>444444</h1>
<h1>555555</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p >p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
<p>p9</p>
<p>p71</p>
<p>p811</p>
<p>p91</p>
</body>

文章来源地址https://www.toymoban.com/news/detail-411714.html

到了这里，关于CSS中所有选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！