3A头条

CSS中所有选择器

2023-04-09 13:56 由 秋水秋生 发表于 #前端开发

测试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>

 

热门相关：最强狂兵   霸皇纪   仗剑高歌   第一神算：纨绔大小姐   豪门闪婚：帝少的神秘冷妻