css-selectors 相关问题

选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。

我有一个带有“help-image”类的 div 块，其中包含一个，位于带有“help-section”类的部分内。按如下方式使用 :has 选择器效果很好：部分.h...

html css css-selectors pseudo-element

回答 1 投票 0

尝试找到一个以为目标的伪类，如下所示：我尝试过 :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>  </div> <div>  <span>Some content</span> </div>

css css-selectors pseudo-class

回答 6 投票 0

为什么有些字符不允许作为 CSS 选择器？

我在 html 中有两个标题。我想使用 CSS 单独设置它们的样式。为此，我尝试使用数字“1”和“2”作为类名。但是当我尝试在 CSS 中使用 h2.1、h2.2 来选择它们时我在 html 中有两个 <h2> 标题。我想使用 CSS 单独设置它们的样式。为此，我尝试使用数字“1”和“2”作为类名。但是当我尝试在 CSS 选择器中使用 h2.1、h2.2 选择它们时，它不起作用。然后我用谷歌搜索，发现有一些字符不允许使用 CSS 选择器。现在我知道选择器有一些规则。但我想知道为什么 CSS 禁止某些字符作为选择器？我无法使用谷歌找到这背后的原因。 Google 中仅提供规则和允许的字符。有人可以解释为什么某些字符不允许作为选择器的原因吗？虽然我显然不是设计 CSS 的工程师，但几乎可以肯定这只是解析器如何工作的问题。与大多数编程语言一样，当 CSS 看到某些字符时，它期望接下来会发生某些事情。限制哪些字符可用作选择器使 CSS 更易于解析。另外，请记住 CSS 是一种相对古老的语言，发明于 1996 年。解释器更简单，为了确保向后兼容性，保留这些限制是有意义的。根据您的情况，也许可以考虑使用 h2.a、h2.b 等。这可能是一个可行的解决方案。这个答案是一个很好的额外资源。

html css css-selectors

回答 1 投票 0

selenium 谷歌扩展自动化回溯错误

为了保证我的信任钱包帐户的安全，我经常注销我的帐户，我决定编写一个Python代码来快速重新登录，但是当我尝试使用xpath或css之类的东西来选择它时

python selenium-webdriver xpath google-chrome-extension css-selectors

回答 1 投票 0

我可以比较 CSS 选择器中的两个属性吗？

我正在寻找一种方法来构建一个选择器，该选择器将匹配两个属性具有相同值的位置，但找不到语法。这可能吗？如何？我希望能发挥作用： [数据值A=数据值...

css css-selectors

回答 2 投票 0

Tailwind CSS 中有哪些选项可将样式应用于预构建组件的自定义类？

我在 MERN 项目中有一个文本编辑器，我试图更改其 UI 部分的 z-index（最终是颜色），但找不到让我高兴的方法。有一个明显的

javascript css reactjs css-selectors tailwind-css

回答 1 投票 0

按钮 [name=] 上带有 Google 跟踪代码管理器的 CSS 选择器

我在谷歌标签管理器中有一个点击触发器（所有元素），其中点击元素 - >匹配CSS选择器 - 按钮[name = checkout]。但是，触发器不适用于

html css css-selectors google-tag-manager

回答 3 投票 0

基于宽度的CSS选择器？

是否有 CSS 规则可以根据元素的宽度来匹配元素？如果没有，在标准中提出这一点是否有趣？人们可以做类似代码：max-width（200px）{white-space：

css css-selectors

回答 5 投票 0

NextJS顺风CSS问题 ---`shadow-[inset_10px_-50px_94px_0_rgb(199,`类不存在)

我的 next.js 应用程序抛出此 css 错误语法错误：C:....styles\globals.css 阴影-[inset_10px_-50px_94px_0_rgb(199, 类不存在。如果阴影-[inset_10px_-50px_94px_0_rgb(199, 是...

css sass css-selectors tailwind-css

回答 1 投票 0

星号 (*) 在 CSS 选择器中起什么作用？

我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，有人能解释一下CSS中星号*的作用吗？ * { 轮廓：2px 红色虚线 } * ...</desc> <question vote="109"> <p>我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，</p> <p><strong>有人可以解释一下星号<pre><code>*</code></pre>在CSS中的作用吗？</strong></p> <pre><code><style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } </style> </code></pre> </question> <answer tick="true" vote="109"> <p>它是一个通配符，这意味着它将选择 DOM 该部分内的所有元素。</p> <p>例如，如果我想将边距应用于整个页面上的每个元素，您可以使用：</p> <pre><code>* { margin: 10px; } </code></pre> <p>您还可以在子选择中使用它，例如以下将为段落标记内的所有元素添加边距：</p> <pre><code>p * { margin: 10px; } </code></pre> <p>您的示例正在执行一些 CSS 技巧，将连续的边框和边距应用于元素，从而为它们提供多个彩色边框。例如，白色边框被黑色边框包围。</p> </answer> <answer tick="false" vote="32"> <p>您引用的 CSS 对于网页设计师调试页面布局问题非常有用。我经常将其临时放入页面中，这样我就可以看到所有页面元素的大小并进行追踪，例如，填充过多的元素将其他元素推到了位置之外。 </p> <p>仅使用第一行即可完成相同的技巧，但定义多个轮廓的优点是，您可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。</p> </answer> <answer tick="false" vote="6"> <p><pre><code>*</code></pre> 充当通配符，就像在大多数其他情况下一样。</p> <p>如果你这样做：</p> <pre><code>*{ margin: 0px; padding: 0px; border: 1px solid red; } </code></pre> <p>然后<strong>所有</strong> HTML 元素都将具有这些样式。</p> </answer> <answer tick="false" vote="4"> <p>* 是通配符。这意味着它将将该样式应用于任何 HTML 元素。附加的 * 将样式应用于相应的嵌套级别。</p> <p>此选择器将根据元素的嵌套级别将不同颜色的轮廓应用于页面的所有元素。</p> </answer> <answer tick="false" vote="0"> <p>虽然这个问题已经得到解答，</p> <p>我只是想把这个CSS放在这里（<em>的标题）</em> StackOverflow页面..</p> <p>结果如下： <a href="https://i.stack.imgur.com/TqkJ2.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Rxa0oyLnBuZw==" alt=""/></a> 我以前从未见过这个CSS</p> </answer> <answer tick="false" vote="-1"> <p>在样式表中，通常您需要为所有元素定义基本规则，例如字体大小属性和边距。 <em>{字体大小：14px;保证金：0；填充：0；} /</em> 覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为 14 像素大小，边距和填充为零，包括 h1,...pre。 */</p> </answer> </body></html>

css css-selectors

回答 0 投票 0

选择 CSS 中前面没有另一个元素

考虑这个片段： .包装器{ 显示：柔性；间隙：5px；边框：1px 纯黑；边框半径：3px；宽度：80px；内边距：5px； } 考虑这个片段： .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 该图标可能存在也可能不存在。我想要实现的是，如果图标不存在，则会向 .text 添加一些左侧填充。我该怎么做？我尝试了 :has、:not 和 +（下一个兄弟组合器）的几种组合，但无济于事。本质上，我想选择 .text，但前提是它前面没有 .icon。 .wrapper:not(:has(div.icon)) div.text 应该这样做。示例1（带图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } { padding-left: 40px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 示例2（无图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .wrapper:not(:has(div.icon)) div.text { padding-left: 40px; } <div class="wrapper"> <div class="text">paintings</div> </div> .text:not(.icon + .text)应该可以解决问题 .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .text:not(.icon + .text) { padding-left: 24px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> <div class="wrapper"> <div class="text">paintings</div> </div>

css css-selectors

回答 2 投票 0

当 optgroup 元素不包含任何未使用 CSS 禁用的选项元素时，如何隐藏它 [关闭]

我想隐藏一个 optgroup 元素，当它没有任何无法选择的选项元素时。在下面的示例中，第一个 optgroup 元素应显示，第二个元素应隐藏。 ...

css css-selectors optgroup

回答 1 投票 0

对伪元素进行分组会破坏CSS

下面的代码工作正常。输入[类型=“范围”]::-webkit-slider-runnable-track { 背景颜色：#000； } 输入[类型=“范围”]::-moz-range-track { 背景颜色：#000； } 下面的代码工作正常。 input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> 由于某种原因，下面的代码块都不起作用。 input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } <input type="range"> 有人知道为什么将这些伪选择器组合在一起会破坏CSS吗？常规选择器列表是无情的。如果列表中的任何成员无效，则整个选择器列表无效，因此会被忽略。

html css css-selectors pseudo-element shadow-dom

回答 1 投票 0

第n个子级高级逻辑选择

我提前道歉，我在这件事上没有取得很好的进展，所以我没有 Fiddle 或 Codepen。我确实希望实现以下布局（如下）。我唯一的问题是...

html css css-selectors

回答 3 投票 0

CSS nth-child 选择器可以在除 X 之外的任何地方工作

我刚刚发现了一些很奇怪的事情。这是关于这个CSS选择器的 div:nth-child(3) a 在 X 上，我在 DevTools 中选择了一个容器 div 现在，使用 css 选择器 div:nth-child(3) a 我想找到...

javascript html css-selectors

回答 2 投票 0

如何使用 Selenium 和 Python 关闭“登录 Google”弹出窗口

当我进入google网站时，会出现这个小登录窗口：我尝试关闭的选项卡我试图使用 selenium 和 python 来消除它这是我正在使用的代码：来自硒进口