CSS伪类允许基于元素的状态，DOM树结构中的位置，用户动作或其他因素在文档内更具体地选择元素。
尝试找到一个以为目标的伪类，如下所示： 我尝试过 :blank 和 :empty 但都无法检测到... 尝试找到一个以 <div> 为目标的伪类，如下所示： <div class="nav-previous"> </div> 我尝试过:blank和:empty，但都无法检测到。难道只是做不到吗？ https://jsfiddle.net/q3o1y74k/3/ :empty一个人就够了。 根据当前的 Selectors Level 4 规范，:empty 可以匹配仅包含文本节点、仅包含空格 的元素以及完全为空的元素。只是根据当前规范，支持它的人并不多。 :empty伪类表示没有子元素的元素除了（可选）文档空白字符。 来自 MDN： 注意：在选择器级别 4 中，:empty 伪类已更改为类似 :-moz-only-whitespace，但目前还没有浏览器支持此功能。 :-moz-only-whitespace CSS 伪类匹配仅包含仅包含空格的文本节点的元素。 （这包括具有空文本节点的元素和没有子节点的元素。） 正如其他人提到的，这对于 CSS 来说是不可能的。 不过，您可以检查 JavaScript 是否只有空格。这是一个简单的仅 JS 解决方案，匹配的“空”div 为蓝色，而包含文本的 div 为红色。更新为向空 div 添加 empty 类，这将允许您使用 CSS 中的选择器 .empty 轻松定位它们。 仅 JS 的“空”比较将如下所示： if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") 如果你使用 jQuery，那就更容易了： if( $.trim( $(element).text() ) == "" ){ var navs = document.querySelectorAll(".nav-previous"); for( i=0; i < navs.length; i++ ){ if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") { navs[i].style.background = 'blue'; navs[i].classList.add( 'empty' ); } else { navs[i].style.background = 'red'; } }.nav-previous { padding: 10px; border: 1px solid #000; } .nav-previous.empty { border: 5px solid green; }<div class="nav-previous"> </div> <div class="nav-previous">Not Empty </div> :empty确实只适用于完全空元素。空白内容意味着它不为空，单个空格或换行符就足够了。只有 HTML 注释才被视为“无内容”。 有关更多信息，请参阅此处：https://css-tricks.com/almanac/selectors/e/empty/ :blank选择器正在开发中，它将匹配空白，请参见此处：https://css-tricks.com/almanac/selectors/b/blank/。但好像还没有浏览器支持。 更新： 请参阅此处了解涉及 jQuery 的可能解决方案。 你的方法的问题是你的容器实际上并不是空的。 :empty 伪类表示没有子元素的元素 全部。就文档树而言，只有元素节点和内容 节点（例如 DOM 文本节点、CDATA 节点和实体引用） 其数据长度非零必须被视为影响 空虚； 由于你有空白空间，这个伪类不会起作用。 :blank 伪类应该是正确的，因为这是它的定义： 这个空白伪类匹配只包含内容的元素 由空格组成但不为空。 问题是这个伪类还没有被任何浏览器实现，您可以在下面的链接中查看。因此，您需要等到它实现才能使用此选择器。 这几乎解释了您所面临的行为 https://css4-selectors.com/selector/css4/blank-pseudo-class/ 这里最好的方法就是确保你的 div 实际上是空的，这样你的方法就会起作用。 你能做的最好的事情就是定义一个空类，如下所示： .empty{ display:none; } 然后在此处添加此 JS 代码，它将把空类附加到您的空白项目中： (function($){ $.isBlank = function(html, obj){ return $.trim(html) === "" || obj.length == 0; }; $('div').each(function() { if($.isBlank( $(this).html(), $(this).contents().filter(function() { return (this.nodeType !== Node.COMMENT_NODE); }) )) { $(this).addClass('empty'); } }); })(jQuery); 检查它在这里工作， https://jsfiddle.net/29eup5uw/ 如果没有 JavaScript/jQuery 实现，你就做不到。 :empty 选择器适用于空标签（因此其中甚至没有 any 空间）或自闭标签，如 <input />。 参考：https://www.w3schools.com/cssref/css_selectors.asp 如果你想使用 JavaScript 实现，我想你会在这里找到答案：How do I check if an HTML element isempty using jQuery? 虽然不完全相同，但如果您可以安全地假设输出并考虑没有子元素作为“空”的定义，则可以在现代浏览器中利用 :has()。 div:not(:has(> *)) { background: red; } <div> <!-- This will not be colorized --> </div> <div> <!-- But this will --> <span>Some content</span> </div>
当我使用 :not(::placeholder-shown) 时，:NOT 似乎在 safari 浏览器中不起作用。 如果你没有使用 safari：下面我添加了一种使用 safari 浏览器与 playwright 的方法，以便你可以测试一下...
http://jsfiddle.net/nicktheandroid/k93ZK/2/ 这应该非常简单，我只是不明白为什么它不起作用。当鼠标悬停在 :before 上时，它的不透明度应该更改为 1，但它确实...
基于这个答案，我设法将图像作为我的图标出现在其右边缘的输入控件内。如果我使用旋转的 GIF，我就准备好了。我只需要在我的控制下设置班级...
我正在尝试使用 nth-child(odd) 向 div 添加替代行颜色。 我需要为类名为 Alternative_cls 的 div 添加替代颜色，但不为具有
我知道我可以使用以下 CSS 代码一键更改光标： #slide-arrow-prev:活动{ 光标：不允许； } 无论如何，是否可以仅使用 html 单击两次后更改光标...
我在按钮内有一个元素，当我将其悬停时以及当我单击父元素（按钮）时，我想为其设置动画。 为此，我使用 :not 和 :active 伪类来动画
我在按钮内有一个元素，当我将其悬停时以及当我单击父元素（按钮）时，我想为其设置动画。 为此，我使用 :not 和 :active 伪类来动画
我为网页创建了一个“块”，例如名为“test-div”的网页。 测试 div 还添加了一个额外的类来更改其背景颜色，即。 测试 div 测试 div-bg-亮金 测试-...
仅将鼠标悬停在元素的::first-line 时如何应用样式？
我想仅当用户将鼠标悬停在段落的第一行上时才将段落的第一行设为粗体。我尝试过类似的事情： p::第一行：悬停{ 字体粗细：粗体； } 请注意...
有没有办法在元素悬停时将样式应用于 CSS ::first-line 伪类
我一直在为 HTML 标记修改一些 CSS。我面临的问题是已经使用 CSS ::first-line 伪类应用了一种样式。我想要的是改变这个的风格
如何在CSS中使用nth-child来选择某个元素之后的所有元素？
我见过 jQuery 有一个 :gt(n) 解决方案，但是在 CSS 中可以实现相同的行为吗？ 我想要的是移动网站在某些列表中的元素不超过 3 个。所以我需要一些东西
我可以使用 SVG 图像作为列表样式图像： ul { 列表样式图像： url('my.svg'); } 但是，如果我有一个 SVG 精灵，并且我想将其用于列表图像，该怎么办？ 那可能吗？ 我本来以为
如何在 ASP.NET asp:checkbox 控件呈现的 HTML 控件中定位 :after psuedo 元素？ [重复]
我看到了适用于简单输入标签对的代码： 超文本标记语言 我已经看到了适用于简单输入标签对的代码： HTML <input type="checkbox" id="toggle" class="checkbox" /> <label for="toggle" class="switch"></label> CSS .switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgba(0, 0, 0, 0.25); border-radius: 20px; transition: all 0.3s; } .switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius:50%; background-color: white; top: 1px; left: 1px; transition: all 0.3s; } .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } .checkbox { display : none; } 上面的工作示例： https://codepen.io/lawrencelove/pen/xxBWpBj 但不幸的是，当使用 ASP.NET asp:checkbox 控件时，它以不同的方式呈现 HTML。 HTML <span class="checkbox"><input id="toggle" type="checkbox" name="ctl00$ucSiteVersion$toggle" checked="checked"> </span> <label for="toggle" class="switch"></label> 在这种情况下，因为 input 控件嵌套在 span 标签内，这似乎导致它不再与组合器选择器匹配。 上面带有 span 标签的损坏示例： https://codepen.io/lawrencelove/pen/MWxVrxm 我尝试了相邻兄弟姐妹和后代的各种组合，但我无法让它与结束 span 标签一起很好地发挥作用。我还尝试引用 #toggle:checked 而不是 .checkbox:checked，但这也不起作用。 如何从 .switch 标签内的 checkbox 控件定位 span？ 替换这个： .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } 这样： span:has(> input:checked) + .switch::after { left : 20px; } span:has(> input:checked) + .switch { background-color: #7983ff; }
我对一种让CSS（无javascript）显示div或您悬停的元素之外的元素感兴趣，如下所示： #除法{ 显示：无； } a：悬停#divid { 显示：块； }...
CSS 伪类组合 :first-child 和 :first-letter
我一直在研究 CSS 伪类，并尝试了一些可用的类来看看什么可以做，什么不能做。 我的问题是： 我想使用 :first-child se...
我将很多 CSS 变量分配给 :root 但这些变量在我的 :before 元素中无法访问。我在网上找不到任何关于此的信息。 当检查 :before elemen 的父级时...
对于我的代码按钮，它不允许按钮在移动到按钮上时将光标变成指针，并且一段时间后我的悬停伪类选择器不再工作......
我正在考虑在不使用Javascript（或我当前React实现中的setState）的情况下实现侧边栏的CSS Native多级菜单。 我已经做了几乎所有的事情，但我越来越...
如果输入有效，我正在尝试使用 Mui v5 中的 createThem 更改 Mui TextFields 的边框颜色。边框在 ::before 和 ::after 伪类内设置。 我正在使用变体=“