css 利用 :not(:empty) 找出有子元素

客官°小女子只卖身不卖艺 2024-04-17 19:04 48阅读 0赞

参考：[CSS 为没有内容的元素设置样式 :not(:empty)][CSS _ _not_empty]

我们有时会想将有子元素和无子元素的不同样式显示，所以就有了这篇资料

Html

<div class='box'></div>
    <div class='box'>纯文本</div>
    <div class='box'><button>内置button</button></div>
    <div class='box'><span>内置span</span></div>
    <div class='box'>前置<span>文本 + span</span></div>

CSS

div{
      display: block;
      width: 200px;
      height: 30px;
      margin: 5px;  
    }
    
    /*无内容*/
    div.box:empty{
      /*display:none;*/
      border: 1px solid red;  
    }
    
    /*有内容*/
    div.box:not(:empty){
      border: 1px solid blue;
    }

效果图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

[CSS _ _not_empty]: https://blog.csdn.net/github_35631540/article/details/98970780
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1a4d666e267b43f7abb2c53a00f2e9c8.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css 利用 :not(:empty) 找出有子元素

考：[CSS 为没有内容的元素设置样式 :not(:empty)][CSS _ _not_empty] 我们有时会想将有子元素和无子元素的不同样式显示，所以就有了这篇资...

客官°小女子只卖身不卖艺/ 2024年04月17日 19:04/ 0 赞/ 49 阅读

相关 CSS-子元素选择器

说明： 1.子元素选择器，只能选择作为某元素的子元素。 2.子选择器使用：大于号">",进行分割 <html> <head>

朱雀/ 2023年07月01日 06:25/ 0 赞/ 143 阅读

相关 [JavaScript]给一个元素Element,找出这个元素的全部Input子元素

一、一行代码版： console.log(div1.getElementsByTagName("INPUT")) 二、递归遍历子节点版 <body>

Love The Way You Lie/ 2022年12月11日 13:58/ 0 赞/ 83 阅读

相关找出最长连续递增子序列（部分有序）

题目：给定一个顺序存储的线性表，请设计一个算法查找该线性表中最长的连续递增子序列。例如，\{1,9,2,5,7,3,4,6,8,0\} 中最长的递增子序列为 \{3

待我称王封你为后i/ 2022年12月11日 07:25/ 0 赞/ 146 阅读

相关 php找出两个有序数组中的相同元素

如题，笔试一般喜欢考这些问题，给定两个有序数组（元素唯一，不重复），如何从中找出相同的元素 php其实已经给我们提供了方法来实现 array\_intersect($arr1

心已赠人/ 2022年06月06日 10:22/ 0 赞/ 268 阅读

相关找出数组中重复的元素

注意：找出数组中重复的元素，数组中也有可能不存在重复的数，也有可能存在多个方法一：使用位图法，再申请一个数组b，用b\[a\[i\]\]存储a\[i\]的重复次数：

灰太狼/ 2022年05月25日 05:38/ 0 赞/ 258 阅读

相关找出最长连续子序列

![这里写图片描述][70] import java.util.; public class Solution { //方法一:时间

桃扇骨/ 2022年05月21日 05:17/ 0 赞/ 208 阅读

相关 CSS 子元素选择器

所有选择器参考手册：http://www.w3school.com.cn/cssref/css\_selectors.asp 1）子元素选择器参考链接：http:

「爱情、让人受尽委屈。」/ 2022年01月09日 05:29/ 0 赞/ 287 阅读

相关 JQ iframe 子元素找父级的元素

$('.content-top-shrink').click(function(){ // 注意要在服务器端运行在本地直接运行

Dear 丶/ 2021年11月05日 08:46/ 0 赞/ 396 阅读

相关找出数组中重复元素

题目描述在一个长度为n的数组里的所有数字都在0到n-1的范围内。数组中某些数字是重复的，但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组中任意一个重复

落日映苍穹つ/ 2021年09月15日 04:24/ 0 赞/ 492 阅读