[CSS] Target empty elements using the :empty pseudo-class

太过爱你忘了你带给我的痛 2022-03-27 05:59 167阅读 0赞

You can target an element that has no child elements by using the `:empty` pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup.

Be aware that whitespace is considered a "child", so `:empty` will not work if the element has no children, but has space between the opening and closing tags.

<!DOCTYPE html>
    <html>
    
    <head>
      <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
      <div class="Alert">
        <p>Success! Your profile has been updated.</p>
      </div>
      
      
      <div class="Alert"></div>
    </body>
    
    </html>

.Alert:not(:empty) {
        
      border: 3px solid darkgreen;
      margin: 1em;
      padding: 1em;
      background-color: seagreen;
      color: white;
      border-radius: 4px;
    }
    
    .Alert:empty{
        
      display:none;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 Do not use empty rulesetscss(emptyRules) html入门篇

index.html文件内引入index.css文件，无报错 index.css文件里面写样式，出现报错 Do not use empty rulesetscss(em

曾经终败给现在/ 2022年11月30日 00:21/ 0 赞/ 200 阅读

相关 string中empty

1、string s = ""; 与 string s = string.Empty; 的区别：当你只定义一个str而不为其分配内存时用string str=null

红太狼/ 2022年09月18日 13:57/ 0 赞/ 160 阅读

相关 empty isset is_null

isset() isset — Determine if a variable is set and is not NULL empty()

柔光的暖阳◎/ 2022年08月04日 09:16/ 0 赞/ 234 阅读

相关 PHP empty()

PHP 中哪些情况是空的呢 The following things are considered to be empty: “” (an empty string)

刺骨的言语ヽ痛彻心扉/ 2022年08月03日 12:59/ 0 赞/ 142 阅读

相关 jQuery :empty

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

今天药忘吃喽~/ 2022年07月13日 10:41/ 0 赞/ 189 阅读

相关浅谈Empty、Nothing

在每一个编程语言里面都包含有数组，他们之间或多或少有一些差异，但是总体上没有什么区别，下面我说的数组是在VB.NET里面的使用。这些天

喜欢ヅ旅行/ 2022年06月12日 00:51/ 0 赞/ 226 阅读

相关 [CSS] Target empty elements using the :empty pseudo-class

You can target an element that has no child elements by using the `:empty` pseudo-class.

太过爱你忘了你带给我的痛/ 2022年03月27日 05:59/ 0 赞/ 168 阅读

相关 empty() 函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmd5

骑猪看日落/ 2022年02月16日 06:59/ 0 赞/ 219 阅读

相关 The empty path didn't match any of these

第一次使用Django 出现错误 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

今天药忘吃喽~/ 2022年01月30日 15:11/ 0 赞/ 188 阅读

相关 no crontab for root - using an empty one

> \[root@kali-linux\]\ crontab -e > no crontab for root - using an empty one > cront

缺乏、安全感/ 2022年01月14日 06:55/ 0 赞/ 906 阅读