选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
我有以下纯 CSS 表单，应根据无线电输入的值显示表单 A 或表单 B： A 我有以下纯 CSS 表单，应根据单选输入的值显示表单 A 或表单 B : <div> <label for="a">A</label> <input class="trigger" type="radio" id="a" name="formSelector" value="a" /> <div id="a" class="hidden-content"> <!-- Form A --> A </div> <label for="b">B</label> <input class="trigger" type="radio" id="b" name="formSelector" value="b" /> <div id="b" class="hidden-content"> <!-- Form B --> B </div> </div> 这是相应的CSS代码： div { display: flex; flex-direction: row; } .hidden-content { display: none; } .trigger:checked + .hidden-content { display: block; // Anything other than none } 当然，只有当每个trigger是要显示的hidden-content的相邻兄弟时，这才有效。 我想知道是否可以使其工作，仅使用CSS，即使trigger和hidden-content不相邻。 我想象像下面的CSS这样的东西可能存在，$是兄弟姐妹的公共类，但没有指定它（一种模式匹配）。 .hidden-content { display: none; } $.trigger:checked ~ $.hidden-content { display: flex; } 我更喜欢这样做，因为我有一个弹性布局，应该在第一行中显示单选和标签，并在后续行中显示所显示表单（A 或 B）的内容。 我可能会以错误的方式解决这个问题，请随意提出任何替代方案，顺便说一句，也欢迎解决此问题的任何解决方案:) 我尝试将 trigger 和 hidden-content 作为相邻的兄弟姐妹，如果使用相应的 CSS 属性手动正确设置 order，则可以工作，但我担心这将很难维护。 我尝试了基于特定 ID 的逻辑，这会导致大量重复（参见下面的代码） #hidden-content-a, #hidden-content-b { display: none; } #trigger-a:checked ~ #hidden-content-a { display: block; // Anything other than none } #trigger-b:checked ~ #hidden-content-b { display: block; // Anything other than none } 您可以使用:has()选择器： .hidden-content{ display: none; } :root:has(.trigger:checked) .hidden-content { display: block; } <div> <div> <div> <label><input type='checkbox' class='trigger'>show content</label> </div> </div> </div> <div> <div> <div class="hidden-content">Secret...</div> </div> </div>
Python、Selenium 查找具有类的元素并等待类更改
我有一个动态加载内容的网页，在页面加载时，有旋转轮，我已经找到了获取立即加载到页面上的内容的解决方案，但似乎我找不到解决方案...
这是CSS代码： *{保证金：0； 填充：0； 框大小：边框框； } 图像{ 显示：块； 最大宽度：100%； 高度：自动； } html{ 滚动行为：平滑； } 身体{ 最小高度：...
我正在处理一个 CSS 文件，并发现需要设置文本输入框的样式，但是，我遇到了问题。我需要一个匹配所有这些元素的简单声明： 我正在处理一个 CSS 文件，并发现需要设置文本输入框的样式，但是，我遇到了问题。我需要一个匹配所有这些元素的简单声明： <input /> <input type='text' /> <input type='password' /> ...但与这些不匹配： <input type='submit' /> <input type='button' /> <input type='image' /> <input type='file' /> <input type='checkbox' /> <input type='radio' /> <input type='reset' /> 这就是我想做的： input[!type], input[type='text'], input[type='password'] { /* styles here */ } 在上面的 CSS 中，请注意第一个选择器是 input[!type]。我的意思是我想选择所有未指定 type 属性的输入框（因为它默认为文本，但 input[type='text'] 与它不匹配）。不幸的是，我在 CSS3 规范中找不到这样的选择器。 有谁知道有什么方法可以做到这一点吗？ :not选择器： input:not([type]), input[type='text'], input[type='password'] { /* style here */ } 支持： Internet Explorer 9 及更高版本 对于更跨浏览器的解决方案，您可以将all输入设置为您想要的非键入、文本和密码的样式，然后另一种样式覆盖单选按钮、复选框等的样式。 input { border:solid 1px red; } input[type=radio], input[type=checkbox], input[type=submit], input[type=reset], input[type=file] { border:none; } - 或 - 生成非类型化输入的代码的任何部分是否可以为它们提供像 .no-type 这样的类，或者根本不输出？此外，这种类型的选择可以使用 jQuery 来完成。 只是想补充一下，您可以使用 selectivizr 在 oldIE 中使用 :not 选择器：http://selectivizr.com/
使用 :has() 伪类在“select”元素中设置样式选项
我正在尝试根据选择元素中所做的选择来设置我的框背景颜色的样式。 挑战是在这里使用 :has() 伪类。 我已经检查过这行代码好几次了，...
我有这个html（为了简洁而剪掉了） 状况 废话... 我有这个 html（为简洁起见，进行了剪裁） <label> <div class="label">Condition</div> <select> <option value="blah" selected="selected">Blah</option> <option value="other...">other...</option> </select> <input type="text" name="condition" value="" style="display: none;"> </label> 我想获取 select 元素。我能看到的唯一静态/非通用因素是 input[name='condition'] 但通用同级选择器无济于事，因为“select”位于输入之前。所以类似 input[name='condition'] ~ select 的东西不起作用。 这个元素会移动，有时是第一个，有时是第二十个，并且可以是中间的任何和所有位置，所以第 n 个元素不起作用。 我知道如何使用 Javascript/Jquery 获取此内容，但这不是这里的选项。我只有 CSS 选择器可用。所以最大的问题是，有什么方法可以仅使用 CSS 选择器从 HTML 中获取“选择”吗？ 有什么方法可以获取具有 value='something' 的选项元素的选择元素吗？ 尝试这个 CSS 代码： div.label ~ select 它返回前面带有类标签的 DIV 的任何选择。
我正在尝试使用 nth-child(odd) 向 div 添加替代行颜色。 我需要为类名为 Alternative_cls 的 div 添加替代颜色，但不为具有
我一直使用破折号作为 css 类和 ID 名称的分隔符： 。关于我们 .汽车定价指南 我见过网站使用多个下划线 __ .home__内容 另外，我还看到了 2 个破折号 .英雄--标题...
使用 React 与渲染以下结构的组件： 使用 React 与渲染以下结构的组件： <div class="top-layout horizontal"> <section class="first"></section> <section class="second"></section> <section class="third"></section> </div> 每个元素都是它们自己的组件，并且具有唯一的类名。当父元素添加 horizontal 类名时，我想更新部分元素 first 的显示方式。鉴于当前的 CSS 设置，我必须处理我无法简单地做 .top-layout.horizontal > .first { background-color: blue; } 我尝试从这里实现解决方案有CSS父选择器吗？但它似乎不起作用。 有人发现选择器的设置有什么问题吗？ .top-layout { background-color: green; &.horizonal { background-color: yellow; } } .first { background-color: red; } .first:has(> .horizonal) { background-color: blue; } 你搞反了： .horizontal:has(> .first) { background-color: blue; } 您想要做的是选择 .first 的父级，对吗？所以你需要说“选择.horizontal，它是first的父级”或“其中.horizontal里面有.first”。因此，它选择父级。
使用 :after 伪元素删除嵌入的每个 dt 之前最后一个 dd 的逗号
如何使用 CSS 在描述 (dd) 元素后面添加逗号（每个新描述术语之前的最后一个逗号除外）？例如： 期限 如何使用 CSS 在描述 (dd) 元素后面添加逗号，每个新描述术语之前的最后一个逗号除外？例如： <dl> <dt>Term</dt> <dd>Description</dd> <dd>Description</dd> <dd>Description</dd> <!-- No comma needed here --> <dt>Term</dt> <dd>Description</dd> <dd>Description</dd> <dd>Description</dd> <!-- No comma needed here --> </dl> 注意：我正在寻找一个独立于 dt 之前的 dd 元素数量的解决方案。 在每个 dd 之后添加逗号很简单： dd:after { content:",\00a0"; /* A comma and a space after each description (dd) */ } 但这会在每个 dd 之后添加一个逗号，并且紧接着 dt 之前。 dd:last-child:after 在这里显然没有用，除非还有其他我不知道的 CSS 选择器。 您不能在此处使用:last-child或:last-of-type，因为您的元素未嵌套在子父元素内。 因此您可以使用 :nth-of-type(3n)，这意味着我们会选择嵌套在 dd 元素下的 dl 元素的每第 3 次迭代。 dl dd:nth-of-type(3n):after { content:""; } 演示 如果您的每个列表都有一致数量的项目，这将很有用，如果不是，我建议您用子父项包装列表，并且您可以使用 :last-child 或 :last-of-type 伪来定位它们，无论他们持有的物品数量。 或者如果它们不是动态的，那么你可以使用 like dl dd:nth-of-type(3):after, dl dd:nth-of-type(8):after { content: ""; } /* Assuming if you have inconsistent list items and 3rd dd and 8th dd are last child of their respective lists.. and you don't want a sub wrapper element */ 如果您想要更多兼容的选择器，也可以使用相邻的选择器+.. dl dd + dd + dd:after { content:""; } 演示2 但是如果你有 2-3 个 dd 元素，上面的选择器会很好用，你的元素越多，选择器就越难写，所以如果你有更多的项目，请参考我首先提供给你的选择器. P.S 使用 /* No comma needed here */ 是 HTML 中的无效注释， 应该使用 <!-- Comment goes here -->。 好吧，如果您不介意在 html 中添加一些内容，这里还有另一种方法。这适用于任意数量的 dd，而不仅仅是 3 个。 这是一个小提琴 <dl> <dt>Term</dt> <dd>Description</dd> <dd data-last-dd="">Description</dd> <dt>Term</dt> <dd>Description</dd> <dd>Description</dd> <dd>Description</dd> <dd>Description</dd> <dd data-last-dd="">Description</dd> </dl> dd[data-last-dd]:after{ content:""; } 现在，您可以将 dt 与他们的 dd 组合在一起。 为了用微数据属性或其他全局属性来注释组 适用于整个组或仅用于样式目的的属性， dl 元素中的每个组都可以包装在 div 元素中。这确实 不改变 dl 元素的语义。 （参见 HTML 生活标准；4.4.9 dl 元素） 您可以使用它来强制最后一个 dd 成为 :last-child。 示例： <dl> <div> <dt>Drinks</dt> <dd class="separate-comma">water</dd> <dd class="separate-comma">coffee</dd> <dd class="separate-comma">juice</dd> </div> <div> <dt>Snacks</dt> <dd class="separate-comma">crisps</dd> <dd class="separate-comma">nuts</dd> </div> <dl> 使用CSS： dd:not(:last-child):after { content: ", "; } 现在，juice之后不再添加逗号。 试试这个： dl:last-child { content:""!important; }
我必须制作一个背景为白色且字体颜色为渐变的按钮。我已经完成了CSS代码，但它不起作用。 按钮 { 背景：#fff； 字体粗细：600； 颜色：线性渐变...
我有一个表格，可以包含在抽屉内呈现的嵌套表格。 嵌套表是相同的组件，我正在尝试创建一个 css 选择器来选择行的 td 元素...
有没有办法用这个CSS只影响可见元素？ table.grid tr.alt:nth-child(奇数) { 背景：#ebeff4； } table.grid tr.alt:nth-child(偶数) { 背景：#ffffff； } 如果我使用...
我想编写一个 ublock 过滤器来隐藏具有特定类和内容的列表元素，而我不想隐藏不具有此内容的其他列表项： 类=“mp-列表-优先级”
element.className 与 element[class~="className"] - 有什么区别？
我一直在尝试了解CSS中以下两个类选择器之间到底有什么区别 元素.类名 元素[类~=“类名”] 我的理解是，两者......
我正在开发一个 Web 项目，我需要自定义容器元素的外观和行为。具体来说，我想从容器中删除滚动条并防止用户
我希望能够拥有一个系统，可以动态加载静态 HTML 页面（在编程时开发人员不知道），并且将该样式表仅应用于一个 DIV。 有一些
如何使用 :has 选择器深入多个级别？ 我尝试了以下代码，但似乎不支持： div:has(p:has(span)) { 背景：橙色 } 如何使用 :has 选择器深入多个级别？ 我尝试了以下代码，但似乎不支持： div:has(p:has(span)) { background: orange } <div> <p> <span>Hello</span> </p> </div> <div> <p>Bye</p> </div> 假设您只需要对 <div> 进行样式设置，如果它有一个后代 <p> 元素，而该元素又具有一个后代 <span> 元素，我建议： div { background-color: blue; } div:has(p span) { background: orange; } <div> <p> <span>Hello</span> </p> </div> <div> <p>Bye</p> </div> JS Fiddle 演示. 值得补充的是，这目前在 Firefox（版本 111.0.1，在 Ubuntu 22.10 上运行）中不起作用。因此，浏览器的差异和不一致是可以预料的。 回答原来的问题，:has不能嵌套。引用MDN： :has() 伪类不能嵌套在另一个 :has() 中。 这是因为许多伪元素基于其祖先的样式有条件地存在，并且允许通过 :has() 查询这些元素可以引入循环查询。
我有以下代码示例 STRONG 第 1 条线，旨在保持相同的水色 第 2 行，本来是黄色的。 ... 我有以下代码示例 <div> <h1> <strong>STRONG Line #1, Intended to stay the same aqua</strong><br> Line #2, Intended to be Yellow. </h1> </div> <span>Line #3, not in the div at all.</span> h1 { background-color: aqua; } /* option 1 */ div h1:not( > strong) { background-color: yellow; } /* option 2 */ div h1:not(:first-child) { background-color: yellow; } 我正在尝试影响除 内容之外的所有 h1 内容 我尝试使用子组合器和 :first-child 选择器但不能，提前感谢 这是测试控制台 开发者.mozilla 如果您直接定位 strong 中的 h1 元素，则可以将其样式设置为与其余内容不同。请参阅以下示例： h1 { background-color: aqua; } div h1 strong { background-color: yellow; } <div> <h1> <strong>STRONG Line #1, Intended to stay the same aqua</strong><br> Line #2, Intended to be Yellow. </h1> </div> <span>Line #3, not in the div at all.</span>