css-selectors 相关问题

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 选择器中起什么作用？

我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素， 有人能解释一下CSS中星号*的作用吗？ * { 轮廓：2px 红色虚线 } * ...</desc> <question vote="109"> <p>我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，</p> <p><strong>有人可以解释一下星号<pre><code>*</code></pre>在CSS中的作用吗？</strong></p> <pre><code>&lt;style&gt; * { 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 } &lt;/style&gt; </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 中前面没有另一个元素

考虑这个片段： .包装器{ 显示：柔性； 间隙：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>

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

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

对伪元素进行分组会破坏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吗？ 常规选择器列表是无情的。如果列表中的任何成员无效，则整个选择器列表无效，因此会被忽略。

第n个子级高级逻辑选择

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

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

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

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

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

为什么选择器 :before:hover 不起作用？

http://jsfiddle.net/nicktheandroid/k93ZK/2/ 这应该非常简单，我只是不明白为什么它不起作用。当鼠标悬停在 :before 上时，它的不透明度应该更改为 1，但它确实...

将图像置于伪元素之后或之前居中

我被困在这个上了！我正在尝试将 5 颗星的图像添加到 Shopify 上的推荐滑块中。我一直在使用 CSS 并缩放到我想要的图像大小，调整间距，...

中童伪班

有没有办法使用CSS选择器来获取元素列表中的中间子元素？ 我知道没有文字 :middle-child 选择器，但是有没有另一种方法而不求助于 Javascript？

如何优化scss代码以应用于特定选择器？

我不想写第二次标签选择器。如何合并两个 CSS？ 不要对 .mat-checkbox 选择器应用 padding-right。 标签，.mat-checkbox .mat-checkbox-layout .mat-checkbox-label...

CSS :nth-of-type() 和 :not() 选择器？

我并排浮动了 25% 宽的文章。我在每四个元素之后添加一个clear:both。但是我需要在元素之间插入图形分节符。而且一定是

相同元素或后代的 CSS 组合器

是否有一个CSS选择器组合器用于选择同一元素或任何后代中的两个类。例如： 或者： 是否有一个CSS选择器组合器用于选择同一元素或任何后代中的两个类。例如： <div class="theme-classic btn"></div> 或： <div class="theme-classic"> <div> <div class="btn"></div> </div> </div> 如果在我的CSS文件中我写：.theme-classic.btn我不选择后代。 如果在我的CSS文件中我写：.theme-classic .btn我不会选择类位于同一元素上的第一种情况。 当然，我可以这样做： .theme-classic.btn, .theme-classic .btn { ... } 但我找不到兼具这两种功能的组合器。 CSS 中不存在这种情况。 您需要像您提到的那样分别选择它们： .theme-classic.btn, .theme-classic .btn { ... } CSS 嵌套可以帮助您简化选择器并避免重复 .theme-classic .theme-classic { :is(& .btn,&.btn) { color: red; } } <div class="theme-classic btn">Select</div> <div class="theme-classic"> Don't select</div> <div class="btn"> Don't select</div> <div class="theme-classic"> <div> <div class="btn">Select</div> <div >Don't Select</div> </div> </div>

允许使用伪元素进行选择器解析

有没有一种方法可以使用像 :is 或 :where 这样的宽容选择器以及仅使用原生 CSS 的 ::pseudo-element ？文档说 :is 不能与伪元素一起使用，但可能有 ano...

通过使用 :nth-of-type 我试图选择 div #benefits-section 中的第一个 div，但由于某种原因它选择了所有 div 标签

以下是我正在处理的 HTML 和 CSS。 https://jsfiddle.net/mpgsrwt0/ #好处-部分 h2{ 显示：块； 字体大小：2rem； 字体系列：服装； 字体粗细：500； 下边距：...

CSS 选择器适用于除图像之外的所有内容

如何使用 CSS 来设置所有非图像元素的样式？我尝试使用 正文：不是（img）{ 过滤器：灰度（1）； } 但这不起作用。

用木偶操作者按下同意按钮

我正在使用“puppeteer”：“^19.11.1”，： 我创建了这个函数来按下此页面上的同意按钮： 这是我的功能： 异步函数handleConsent（页面，记录器）{ 常量

如何同时选择给定元素及其所有子元素？

好的我知道如何分别做这两件事： #elemID { } /* 只选择一个元素 */ #elemID * { } /* 选择其所有子元素，但不选择元素本身 */ 我知道我能做到...

在多个父母中选择第n个孩子

我有以下标记： 一个 两个 三 我有以下标记： <div class="foo"> <ul> <li>one</li> <li>two</li> </ul> <ul> <li>three</li> </ul> <ul> <li>four</li> </ul> </div> 我希望设计“一”和“三”的样式。 但是，标记也可以是： <div class="foo"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <ul> <li>four</li> </ul> </div> 我尝试使用以下 CSS： .foo li:nth-child(1), .foo li:nth-child(3) { color:red; } 但是，正如预期的那样，这是每个 ul 的第一个子元素的样式。 （演示：http://jsfiddle.net/hTfVu/） 如何更改 CSS，以便可以定位属于 li 的第 1 个和第 3 个 .foo？ 仅使用 CSS 选择器无法做到这一点。 :nth-child() 和兄弟姐妹组合器仅限于共享同一父级的子级/兄弟级，正如它们的名称所暗示的那样，CSS 选择器无法解释父子结构中的此类变化，也没有像 :nth-grandchild() 选择器这样的东西（甚至选择器 4 中的 :nth-match() 仅限于共享相同父级的元素）。 当然，这在使用 Javascript 时很简单，例如使用像 jQuery 这样的库： $('.foo li:eq(0), .foo li:eq(2)') 否则，您必须使用类或 ID 显式标记第一个和第三个 li 元素，然后选择它们。 您可以使用偶数和奇数选择器。 li:nth-child(odd) { color: red; } li:nth-child(even) { color: white; }