CSS选择器

Hui.6

已于 2023-07-06 17:28:58 修改

阅读量28

点赞数 1

文章标签： css html javascript

于 2023-06-08 11:25:37 首次发布

本文链接：https://blog.csdn.net/weixin_64502483/article/details/131103786

版权

css选择器

1.标签选择器 div{}

<style>
div {
            color: orange;
            font-size: 24px;
        }
</style>
<body>
<div>我是一个div</div>
</body>

2.id选择器 #id{}

<style>
#div1 {
            color: orange;
            font-size: 24px;
        }
</style>
<body>
<div id="div1">我是一个div</div>
</body>

3.class选择器 .类名{}

<style>
.div {
            color: orange;
            font-size: 24px;
        }
</style>
<body>
<div class="div">我是一个div</div>
</body>

4.后代选择器 div p{}

<style>
        /* 4.后代选择器   选中所有的后代  包括子代和其他后代  使用空格隔开 */
        div p{
            color: aqua;
        }
    </style>
<body>
        <div>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
        </div>
</body>

5.子代选择器 div>p{} 表示选中直接子元素

<style>
        /* 5.子代选择器 选中直接子代 不包括其他后代  使用>隔开 */
        .box>p{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <div>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
        </div>
    </div>
</body>

6.交集选择器 p.p1

选其一类标签中相交部分的标签标签选择器+类选择器

7.并集选择器(组合选择器) div,#one,.two{}

 <style>
        /* 6.交集选择器 选其一类标签中相交部分的标签    标签选择器+类选择器 */
        p.box{
            color: darkgreen;
            font-size: 24px;
        }
        /* 7.并集选择器  组合选择器  选取多个标签   使用逗号隔开 */
        div,.box,#last{
            background-color: pink;
        }

    </style>
<body>
    <div>我是一个div</div>
    <p>段落标签</p>
    <p class="box">段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <section id="last">我是一个块元素</section>
</body>

8.序选择器(伪类选择器)

div:frist-child{} last-child nth-child(n/odd/even/3n+1)

<style>
        /* 序选择器  伪类选择器 */
        p:first-child{
            color: yellow;
        }
        p:last-child{
            color: darkcyan;
        }
        p:nth-child(5){
            color: mediumvioletred;
        }
        /* 选取奇数p标签 */
        p:nth-child(odd){
            background-color: red;
        }
        /* 选取偶数p标签 */
        p:nth-child(even){
            background-color: greenyellow;
        }
        /* 1 4 7 */
        p:nth-child(3n+1){
            font-size: 30px;
        }
        /* 2 5 8 */
        p:nth-child(3n+2){
            width: 100px;
        }
    </style>
<body>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>

9.兄弟选择器

css2兄弟选择器(除去本身) .div1+div{} / css3 .div~div{}

    <style>
        /* 9.兄弟选择器   */
        /* css2兄弟选择器   只会选择相邻的第一个兄弟元素  使用+拼接 */
        .box+div{
            color: darkgray;
            font-size: 24px;
        }
        /* css3兄弟选择器   选取所有的兄弟元素 使用~拼接 */
        .box~div{
            background-color: #19ddc0
            ;
        }
    </style>
<body>
    <div class="box">我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>

10.动态伪类选择器

link visited hover active love hate

    <style>
        /* 动态伪类选择器   未访问link   访问过visited    悬浮hover    鼠标按下active */
        a:link{
            color: blue;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: pink;
        }
        a:active{
            color: cyan;
        }
    </style>
<body>
    <a href="https://www.baidu.com">百度一下，你就知道</a>
</body>

11.否定伪类选择器

 <!-- 否定伪类选择器  从某类元素中剔除一些 -->
   <style>
    p:not(.p2){
        background-color: yellowgreen;
    }
   </style>
<body>
    <p>段落标签</p>
    <p class="p2">段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>

12.伪元素选择器

   <style>
        /* 伪元素选择器  ::开头 */
        /*  */
        p::before{
            content: "我是::before";
        }
        p::after{
            content: "我是::after";
        }
        /* 选中p标签的第一个文字 文本 */
        p::first-letter{
            font-size: 28px;
            color: antiquewhite;
        }
        p::first-line{
            color: pink;
        }
    </style>
<body>
    <p>
        段落标签段落标签段落标签段落标签段落标签段落标签<br>
        段落标签段落标签段落标签段落标签段落标签段落标签<br>
        段落标签段落标签段落标签段落标签段落标签段落标签<br>
    </p>
</body>

13.属性选择器

  <style>
        /* 属性选择器 */
        div[id='one']{
            background-color: #5b71d0;
        }
        input[type='password']{
            background-color: #e195b2;
        }
        /* 选中以name开头user属性  css2  [name|='user'] 只能选择以-隔开的属性名 */
        input[name|='user']{
            background-color: #8de2e3;
        } 
        /* css3属性选择器  以user开头 */
         input[name^='user']{
            background-color: #50542d;
        } 
        /* 以某一个属性结尾 */
         input[name$='name']{
            background-color: pink;
        } 
        /* css2  选中name属性值包含name属性名的标签 */
         input[name~='username']{
            background-color: darkorange;
        } 
        /* css3 只要属性值的一部分 */
        input[name*='user']{
            background-color: #7ac899;
        }
    </style>
</head>
<body>
    <div id="one">我是一个div</div>
    <input type="password">
    <input type="text" name="username">
    <input type="text" name="user-name">
</body>

14.通配符选择器

    <style>
        /* 通配符选择器  普遍选择器  选中所有标签：  去除标签的默认样式 */
        *{
            color: forestgreen;
            /* 去除列表的标志项 */
            list-style: none;
            /* 去除a标签的下划线 */
            text-decoration: none;
            /* 去除body标签的外边距  8px */
            margin: 0;
            padding: 0;
        }
    </style>
<body>
    <div>我是一个div</div>
    <ul>
        <li>列表标签</li>
    </ul>
    <a href="#">超链接标签</a>
</body>

Hui.6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器

8.序选择器(伪类选择器) div:frist-child{} last-child nth-child(n/odd/even/3n+1)9.兄弟选择器 css2兄弟选择器(除去本身) .div1+div{} / css3 .div~div{}7.并集选择器(组合选择器) div,#one,.two{}5.子代选择器 div>p{} 表示选中直接子元素。3.class选择器 .类名{}4.后代选择器 div p{}2.id选择器 #id{}6.交集选择器 p.p1。11.否定伪类选择器。
复制链接

扫一扫