css-selectors 相关问题

Java + Selenium - 无法单击下拉列表（不是选择下拉列表）并从下拉列表中选择一个值

在 JAVA Selenium 中 - 我无法单击下拉列表并从中选择一个值，这不是一个选择下拉列表。这是一个销售网站。我看到它有十分之一的执行，但没有得到......

如何让导航菜单粘在顶部，占据整个宽度，占用网页顶部空间？

在此输入图像描述 无论我尝试什么，顶部总是有一个空格，据我所知，它是 html 框的一部分。我尝试使用 * 重置填充和边距，但是一旦我制作标题

使用 :nth-child 选择一半元素？

以下面的代码为例： 世界你好 世界你好 世界你好 世界你好 以下面的代码为例： <ul> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> </ul> 是否可以使用 :nth-child() 或其他方式精确选择全部元素的 half？代码应该在上面的实例中选择第一个/最后一个 two li，那么如果我将 li 的数量增加到六个，它将选择第一个/最后一个 Three。 我觉得我必须使用 JavaScript... 您可以选择纯CSS中的一半元素......在一定程度上。 唯一的缺点是您必须知道总项目的最大数量。可能是 150，但它不适用于 151。 这是一个演示：http://jsfiddle.net/tcK3F/ (*) 最小 CSS： /* selecting half or more items. Up to 6 */ li:first-child:last-child, li:nth-child(n+2):nth-last-child(-n+2), li:nth-child(n+3):nth-last-child(-n+3), li:nth-child(n+4):nth-last-child(-n+4), li:nth-child(n+5):nth-last-child(-n+5), li:nth-child(n+6):nth-last-child(-n+6) { color: white; background: darkblue; } /* selecting half or less items. Up to 6 */ li:nth-child(n+2):last-child, li:nth-child(n+3):nth-last-child(-n+2), li:nth-child(n+4):nth-last-child(-n+3), li:nth-child(n+5):nth-last-child(-n+4), li:nth-child(n+6):nth-last-child(-n+5), li:nth-child(n+7):nth-last-child(-n+6){ font-style: italic; border: 2px solid red; } 基于以下想法： 这个技巧来自 André Luís，并在 Lea Verou 的一篇文章中看到：基于兄弟计数的样式元素。我根据您的拆分选择需求进行了调整。 快速解释： :nth-last-child(-n+3) 将从父级中选择 3 个 last 项目； :nth-child(n+3) 将选择所有项目 除了前 3 个项目。将它们结合起来，您就可以根据它们后面的内容（或者父级中有多少个子级）来选择纯 CSS 中的元素。除非你想要这个技巧适用于 150 个元素，否则你必须将其中的 75 个与 74 个逗号组合起来......:) 兼容性为 IE9+（存在 JS 填充） (*) HTML 代码的第一部分：偶数列表项； 第二部分：奇数个列表项 第一个 CSS 规则：将从 2N 个项目中选择最后 N 个项目或从 2N+1 个项目中选择最后 N+1/2 个项目，并将它们设置为蓝底白字（例如：总共 5 或 6 个项目中的 3 个项目）。 第二个 CSS 规则：将从 2N 个项目中选择最后 N 个项目或从 2N+1 个项目中选择最后 N-1/2 个项目，并使用红色边框和斜体设置它们的样式（例如：总共 4 或 5 个项目中的 2 个项目） 想要在纯 CSS 中实现接近的唯一方法是在 nth-child(odd) 或 nth-child(even) 上执行选择器。如果你想要精确的后半部分（而不是奇数或偶数），那么你必须使用 JavaScript/jQuery。 使用 jQuery，你可以使用以下方法获取它们： var yourList = $("ul li"); yourList = yourList.slice(0, Math.floor(yourList.length/2)); 示例 为这些元素创建一个具有样式的 CSS 类： .half { background-color: #18D; } 然后，使用 jQuery 将该类添加到指定的元素集中： $(function () { var $lis = $('ul li') var length = $lis.length // Add class to first half: $lis.slice(0, Math.floor(length / 2)).addClass('first') // Add class to last half: $lis.slice(length - Math.floor(length / 2)).addClass('first') }) 如果您确实想在元素数量为奇数的情况下包括中间的元素，请将Math.floor更改为Math.ceil。所有可能性都可以在示例中看到。

为什么在使用“:first:is”时出现“未捕获错误：语法错误，无法识别的表达式：不支持的伪：is”

我正在尝试使用 jQuery 3.7.1 选择一个空表单日期元素（第一个元素），但我不断收到此命令和使用此 CSS 选择器的错误。错误是这样的： 未捕获呃...

使用 CSS 设置段落的每 n 行样式

如何使用 css 为段落的每第 n 行设置样式，而无需手动添加换行符或插入标签，以便换行符仍然由容器的宽度定义？有没有什么...

为什么 justify-content: center 不会将 h2 和 #experience_content 项移动到 .experience 框的中心？

。经验 { 显示：柔性； 弹性方向：列； 调整内容：居中； } .体验 h2 { } #体验内容{ 显示：f...</desc> <question vote="0"> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .experience { display: flex; flex-direction: column; justify-content: center; } .experience h2 { } #experience_content { display: flex; gap: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;section class=&#34;experience&#34;&gt; &lt;h2&gt;Work Experience&lt;/h2&gt; &lt;div id=&#34;experience_content&#34;&gt; &lt;img src=./images/supermarket.jpg width=&#34;260&#34; height=&#34;195&#34; alt=&#34; shopping center&#34;&gt; &lt;p&gt; Please help me solve this stupid problem. I beg you.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我尝试从 .experience 元素中删除 h2 元素。</p> <p>我尝试了 justify-content: center 在 #experience_content 元素上，但这对 img 和 p 元素也不起作用。</p> </question> <answer tick="true" vote="0"> <p>您面临的可能问题（我相信您的意思是 <em><strong>move</strong></em> 而不是问题标题中的 <em><strong>more</strong></em>）是因为您将 <pre><code>justify-content: center</code></pre> 应用于带有 <pre><code>flex-direction: column</code></pre> 的弹性容器。 <pre><code>justify-content</code></pre> 属性沿着 Flex 容器的 <em><strong><a href="https://www.smashingmagazine.com/2018/08/flexbox-alignment/#the-properties" rel="nofollow noreferrer">main-axis</a></strong></em> 工作，在本例中，由于 <pre><code>flex-direction: column</code></pre>，它是垂直轴。如果您想要水平居中，则需要使用适用于横轴的属性，即 <pre><code>align-items</code></pre>。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .experience { display: flex; flex-direction: column; align-items: center; /* &lt;-- Here */ } .experience h2 {} #experience_content { gap: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;section class=&#34;experience&#34;&gt; &lt;h2&gt;Work Experience&lt;/h2&gt; &lt;div id=&#34;experience_content&#34;&gt; &lt;img src=./images/supermarket.jpg width=&#34;260&#34; height=&#34;195&#34; alt=&#34; shopping center&#34;&gt; &lt;p&gt; Please help me solve this stupid problem. I beg you.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

为什么不 justify-content: 将 h2 和 #experience_content 项目集中到 .experience 框的中心？

。经验 { 显示：柔性； 弹性方向：列； 调整内容：居中； } .体验 h2 { } #体验内容{ 显示：f...</desc> <question vote="0"> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .experience { display: flex; flex-direction: column; justify-content: center; } .experience h2 { } #experience_content { display: flex; gap: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;section class=&#34;experience&#34;&gt; &lt;h2&gt;Work Experience&lt;/h2&gt; &lt;div id=&#34;experience_content&#34;&gt; &lt;img src=./images/supermarket.jpg width=&#34;260&#34; height=&#34;195&#34; alt=&#34; shopping center&#34;&gt; &lt;p&gt; Please help me solve this stupid problem. I beg you.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我尝试从 .experience 元素中删除 h2 元素。</p> <p>我尝试了 justify-content: center 在 #experience_content 元素上，但这对 img 和 p 元素也不起作用。</p> </question> <answer tick="false" vote="0"> <p>您面临的可能问题是因为您将 <pre><code>justify-content: center</code></pre> 应用于具有 <pre><code>flex-direction: column</code></pre> 的弹性容器。 <pre><code>justify-content</code></pre> 属性沿着 Flex 容器的主轴工作，在本例中，由于 <pre><code>flex-direction: column</code></pre>，主轴是垂直轴。如果您想要水平居中，则需要使用适用于横轴的属性，即 <pre><code>align-items</code></pre>。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .experience { display: flex; flex-direction: column; align-items: center; /* &lt;-- Here */ } .experience h2 {} #experience_content { gap: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;section class=&#34;experience&#34;&gt; &lt;h2&gt;Work Experience&lt;/h2&gt; &lt;div id=&#34;experience_content&#34;&gt; &lt;img src=./images/supermarket.jpg width=&#34;260&#34; height=&#34;195&#34; alt=&#34; shopping center&#34;&gt; &lt;p&gt; Please help me solve this stupid problem. I beg you.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

我的硒程序找不到元素

我正在尝试在 Chrome 中使用 python 和 selenium 执行网络自动化。 问题是我试图找到一个没有 id 或类名的按钮。 x 路径是： //*[@id="Form1"]/表[1]/...

CSS 变量覆盖

我有一个非常简单的codepen设置来尝试概述我想要实现的目标。 我想要一个默认的 css 变量集来控制颜色的色调，但在元素级别，我想成为...

:link 伪类有什么意义？

我理解 :link 允许选择未访问的元素，并且我知道 LoVe-HAte 技巧可以记住放置各种链接伪类的顺序。但在实践中我总是...

原生 CSS 嵌套混乱

在本 MDN 指南的示例部分中，我们有以下 html 结构： 卡1 在此 MDN 指南 的示例部分中，我们有以下 html 结构： <div class="wrapper"> <article class="card"> <h2>Card 1</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </article> <article class="card featured"> <h2>Card 2</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </article> ... </div> 并应用CSS： .card { padding: 0.5rem; border: 1px solid black; border-radius: 0.5rem; & h2 { /* equivalent to `.card h2` */ color: slateblue; .featured & { /* equivalent to `.featured .card h2` */ color: tomato; } } } 我关于这个 css 行的问题： /* equivalent to .featured .card h2 */ 它是如何运作的？因为在示例中， card 元素不是 feature 元素的子元素。但样式仍然适用。 应该是这样的 .featured.card h2 但是我不明白在这种特殊情况下，当我们嵌套了多层并且在选择器末尾有 & 时，嵌套是如何工作的。你能帮忙吗？ 那是因为MDN评论是错误的。 & 相当于 :is(the-containing-selector)，因此最里面的嵌套选择器会扩展为 .featured :is(:is(.card) h2)

在单淘汰 UI 中连接奇数玩家的线 - 反应

我正在使用 React 和 CSS 构建单淘汰 UI，并且在尝试连接玩家之间的线路时遇到问题。 我尝试了这个方法。在上面画了一条线。但结构失败了。这里'...

：主机被通用 CSS 选择器覆盖

我们在一个通用样式文件中进行了 CSS 重置（边距：0px；填充：0px；），我们将该样式文件编写为一个组件，并将其作为我们正在开发的其他组件的一部分。 我们正在使用

CSS“和”和“或”

我遇到了很大的麻烦，因为我需要对某些输入类型进行样式化。我有类似的东西： .registration_form_right 输入：not([type="radio") { //不。 } 但我不想...

：第一个子选择器不适用于情感CSS

我有一个如下样式的组件 const StyledCustomComponent = styled.aside` 最小宽度：${gridPts(19)}； 背景颜色：${HIGHLIGHT_BLUE}； 弹性：0 0 自动； ${字体大小(13)} 填充：${gridPts(2)...

是否有针对具有特定值的任何属性的 CSS 选择器？

是否有一个 CSS 选择器可以针对特定属性值而不管其属性如何？我正在寻找类似 [*="value"] （使用通配符）或 {value} （直接值

“~”（波浪线/波浪线/旋转）CSS 选择器是什么意思？

搜索 ~ 字符并不容易。我正在查看一些 CSS 并发现了这个 .check：已检查〜.content { } 是什么意思？

如何反转每行的弯曲方向？

我正在尝试使用 Flexbox 来看看这是否可行。我正在努力完成两件事： 将 div 容器宽度设置为 60%，另外设置 40%（因此每行只有 2 个项目，即 100%） 每行都会反转（所以

CSS 选择器：带有 tabindex 的锚点仍然无法聚焦

我的用例中有这个jsfiddle，其中隐藏的div应该显示另一个带有锚点的div是否获得焦点：https://jsfiddle.net/gimoya/skn2y3mx 我的用例中有这个jsfiddle，其中隐藏的div应该显示另一个带有锚点的div是否获得焦点：https://jsfiddle.net/gimoya/skn2y3mx <div tabindex="1" class="pop_gpx_text">🤝 <a>LINK</a> 🚩</div> <div class="kofi_reminder" id="hidden_div"> <a href="https://de.wikipedia.org/wiki/Test">Link 1</a> </div> .kofi_reminder {display: none; } .kofi_reminder:active { display:block; } .pop_gpx_text:focus + #hidden_div { display: block; } 目标是一旦单击锚点，隐藏的 div 就会显示并保持可见。 现在，我奋斗了几个小时的问题是，在我的实现中，方法非常相同，焦点状态的伪选择器对锚标记内的文本没有影响。功能应该是，在我的地图中选择一条轨迹，然后单击弹出窗口中的“GPX 下载”链接后，应该显示隐藏的 div。 https://tiroltrailhead.com/legacy_trails/ 但是，只有当您聚焦/单击锚点“周围”的 div 内容而不是锚点本身时，隐藏的 div 才会显示。然而，这在 jsfiddel 中完美地工作 - 单击/聚焦 div 或/和锚点将适用于伪选择器... 确保您的锚点已将 href 设置为一个值，否则它将无法通过单击或键盘获得焦点。浏览器不会将没有 href 的锚点识别为交互元素。这样做，您的链接不需要 tabindex 包装： .box { display: inline-block; border: 1px solid; } .popup { display: none; } a:focus + .popup { display: block; } <div class="box"> <a href="#">Download</a> <div class="popup">More download info</div> </div>

ELI5 Python 模块“选择”和“选择器”

我一直在尝试使用“socket”模块并编写小型服务器。现在我 偶然发现了“选择”和“选择器”库。我一直在尝试包裹我...