CSS3选择器-否定和动态伪类选择器

最新推荐文章于 2024-06-17 09:00:23 发布

骑猪西征

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量99

点赞数 1

分类专栏：笔记 html 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_57936267/article/details/124671567

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* li:first-child{
            background-color: darkgrey;
        } 
        表示给第一个孩子标签加上样式
        
        li:not(:first-child){
            background-color: darkgrey;
        } 
         表示除了第一个孩子标签以外的都加上样式

         li:nth-child(2n+1){
             background-color: aqua;
         }
         表示给奇数的li标签加上背景颜色
        
         
         li:not(:nth-child(2n+1)){
             background-color: aqua;
         }
         加上:not（）就变成了偶数的li加上背景色
         */

         div{
             width: 100px;
             height: 100px;
         }

         /* div:empty{
            background-color: yellowgreen;
         } 
          表示给空的div加上背景色 */

          div:not(:empty){
            background-color: yellowgreen;
         } 
         /* 表示把非空的div加上背景 */
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ul>
    <div></div>
    <div>777</div>
</body>
</html>

骑猪西征

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器-否定和动态伪类选择器

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
复制链接

扫一扫