CSS常用选择器简析（带简单案例）

最新推荐文章于 2024-06-19 15:19:49 发布

一心向晚

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量712

点赞数 1

文章标签： html html5 前端 css

本文链接：https://blog.csdn.net/qq_48983697/article/details/119757636

版权

1.标签选择器

格式: 标签名称{

属性:值;

}

注意点:

1.标签选择器无论标签多深都能选中。

2. 标签选择器会选择当前页面中所有指定的标签，不能单独选中。

<style>
        div{
            width: 300px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>我觉得也是</div>
    <br>
    <div>真的是吗</div>
</body>

2.id选择器

格式: #id名称{

属性:值;

}

注意点:

1.在同一个界面中id的名称最好不要重复

2. id的名称不能以数字开头，不能是HTML标签，只能由字母/数字/下划线 a-z 0-9 _ 组成

<style>
        #haha{
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="haha">我觉得也是</div>
    <div>haha</div>
</body>

3.类选择器

格式: .类名{

属性:值;

}

注意点:

1.在同一个界面中class的名称是可以重复的

2.名称不能以数字开头，不能是HTML标签，只能由字母/数字/下划线 a-z 0-9 _ 组成

3.标签可以同时绑定多个类名格式: <标签名称 class="类名1 类名2 ...">

<style>
        .haha{
            width: 100px;
            border:2px solid black;
        }
        .haha1{
           background-color: aqua; 
        }
    </style>
</head>
<body>
    <div class="haha">我觉得也是</div>
    <br>
    <div class="haha haha1">还真是</div>
</body>

4. 后代选择器

格式: 选择器1 选择器2{

属性:值;

}

注意点:

1.中间必须用空格隔开

2.后代不仅仅是儿子, 孙子和重孙子等只要最终是放到指定标签中的都是后代，都会被选中

3.不仅仅可以使用选择器 , 还可以使用标签名称

4.后代选择器可以通过空格一直延续下去

<style>
        div div{
          border: 3px solid black;
        }
        .haha span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        我觉得也是
        <div>
            还真是
            <div class="haha">
                <a>
                    <span>是这样的</span>
                </a> 
            </div>
        </div>
    </div> 
</body>

5.子元素选择器

格式: 标签名称1>标签名称2{

属性:值;

}

注意点:

1.子元素选择器之间用>符号连接, 中间不能有空格

1.子元素选择器只会找儿子, 不会找其他被嵌套的标签

3.不仅仅可以使用标签名称, 还可以使用其它选择器

4.子元素选择器也可以通过>符号一直延续下去

<style>
        div>div{
          border: 3px solid black;
        }
        .haha>span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        我觉得也是
            <div class="haha">
                <a>
                    <span>是这样的</span>
                </a> 
            </div>
    </div> 
</body>

6.序选择器（结构伪类选择器）

1.同级别中的第几个（只看顺序不看类型）

:first-child 选中同级别中的第一个标签,只看顺序不看类型，如果设定的位置上不是所设定的类型那就无法选中。

        <!-- 正常情况 -->
<style>
           li:first-child{
               color: aqua;
           }
        </style>
    </head>
    <body>
       <ul>
           <li>第1个</li>
           <li>第2个</li>
           <li>第3个</li>
           <li>第4个</li>
           <li>第5个</li>
       </ul>
    </body>

        <!-- 在前面加一个a标签 -->
        <style>
            li:first-child{
                color: aqua;
            }
         </style>
     </head>
     <body>
        <ul>
            <a>打断施法</a>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>
        </ul>
     </body>

:last-child 选中同级别中的最后一个标签

<style>
           li:last-child{
               color: aqua;
           }
        </style>
    </head>
    <body>
       <ul>
           <li>第1个</li>
           <li>第2个</li>
           <li>第3个</li>
           <li>第4个</li>
           <li>第5个</li>
       </ul>
    </body>

:nth-child(n) 选中同级别中的第n个标签（从1开始算）

<style>
           li:nth-child(3){
               color: aqua;
           }
        </style>
    </head>
    <body>
       <ul>
           <li>第1个</li>
           <li>第2个</li>
           <li>第3个</li>
           <li>第4个</li>
           <li>第5个</li>
       </ul>
    </body>


<!-- 加个a标签 -->
        <style>
            li:nth-child(3){
                color: aqua;
            }
         </style>
     </head>
     <body>
        <ul>
            <a>打断施法</a>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>
        </ul>
     </body>

以下的同理

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y) x和y是用户自定义的, n是从0开始递增,如(2n+1)分别对应1,3,5.....

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素仅有的一个子元素，仅有一个子元素时生效

2.同级别同类型中的第几个（看顺序也看类型）

:first-of-type 选中同级别中同类型的第一个标签，但可以不用担心其他类型造成的影响。

<style>
            li:first-of-type{
                color: aqua;
            }
         </style>
     </head>
     <body>
        <ul>
            <a>打断施法</a>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>
        </ul>
     </body>

:last-of-type 选中同级别中同类型的最后一个标签

<style>
            li:last-of-type{
                color: aqua;
            }
         </style>
     </head>
     <body>
        <ul>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li> 
            <a>打断施法</a>
        </ul>
     </body>

:nth-of-type(n) 选中同级别中同类型的第n个标签

<style>
            li:nth-of-type(2){
                color: aqua;
            }
         </style>
     </head>
     <body>
        <ul>
            <a>打断施法</a>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>  
        </ul>
     </body>

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素的特定类型的唯一子元素

一心向晚

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS常用选择器简析（带简单案例）

1.标签选择器格式: 标签名称{ 属性:值; } 注意点: 1.标签选择器无论标签多深都能选中。2. 标签选择器会选择当前页面中所有指定的标签，不能单独选中。<style> div{ width: 300px; background-color: aqua; } </style></head><body>...
复制链接

扫一扫