css-selectors 相关问题

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

无法定位元素

我有这样的 HTML 我

回答 2 投票 0

CSS 中 div 的替代行颜色

我正在尝试使用 nth-child(odd) 向 div 添加替代行颜色。 我需要为类名为 Alternative_cls 的 div 添加替代颜色,但不为具有

回答 4 投票 0

使用破折号下划线命名类和 id 的 CSS 趋势?

我一直使用破折号作为 css 类和 ID 名称的分隔符: 。关于我们 .汽车定价指南 我见过网站使用多个下划线 __ .home__内容 另外,我还看到了 2 个破折号 .英雄--标题...

回答 3 投票 0

:父级有多个类名

使用 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”。因此,它选择父级。

回答 1 投票 0

使用 :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; }

回答 4 投票 0

将字体颜色更改为渐变并将按钮颜色更改为白色的 CSS 代码

我必须制作一个背景为白色且字体颜色为渐变的按钮。我已经完成了CSS代码,但它不起作用。 按钮 { 背景:#fff; 字体粗细:600; 颜色:线性渐变...

回答 1 投票 0

在仅位于根表内但不在嵌套表内的行中选择“td”

我有一个表格,可以包含在抽屉内呈现的嵌套表格。 嵌套表是相同的组件,我正在尝试创建一个 css 选择器来选择行的 td 元素...

回答 1 投票 0

让css nth-child()只影响可见

有没有办法用这个CSS只影响可见元素? table.grid tr.alt:nth-child(奇数) { 背景:#ebeff4; } table.grid tr.alt:nth-child(偶数) { 背景:#ffffff; } 如果我使用...

回答 4 投票 0

根据子元素的内容为父元素编写ublock过滤规则

我想编写一个 ublock 过滤器来隐藏具有特定类和内容的列表元素,而我不想隐藏不具有此内容的其他列表项: 类=“mp-列表-优先级”

回答 2 投票 0

element.className 与 element[class~="className"] - 有什么区别?

我一直在尝试了解CSS中以下两个类选择器之间到底有什么区别 元素.类名 元素[类~=“类名”] 我的理解是,两者......

回答 1 投票 0

CSS 技术隐藏滚动条并禁用文本选择?

我正在开发一个 Web 项目,我需要自定义容器元素的外观和行为。具体来说,我想从容器中删除滚动条并防止用户

回答 1 投票 0

仅将未知(在编程时)样式表应用于一个 div

我希望能够拥有一个系统,可以动态加载静态 HTML 页面(在编程时开发人员不知道),并且将该样式表仅应用于一个 DIV。 有一些

回答 1 投票 0

如何使用CSS:有嵌套元素选择器?

如何使用 :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() 查询这些元素可以引入循环查询。

回答 2 投票 0

如何影响标签内除特定子标签之外的所有内容

我有以下代码示例 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>

回答 1 投票 0

隐藏 7 的倍数之后的第 n 个子项目

所以我从 cms 中设置了物品,并且无法控制它们的数量。 我想使用 css 隐藏超过 7 倍数的所有项目,但只隐藏最后几个。 IE。如果有 10 个项目我需要隐藏 l...

回答 1 投票 0

如何使按钮包装器之后的每个后续兄弟消失并通过按下这个按钮再次恢复其可见性?

我的页面上有 2 个按钮,“阅读更多”和“阅读更少”,它们是使用 WP 中的页面生成器创建的。我试图在页面

回答 2 投票 0

如何通过按下这个按钮使按钮包装器后的每个同级消失并再次恢复其可见性?

我的页面上有 2 个按钮,“阅读更多”和“阅读更少”,它们是使用 WP 中的页面生成器创建的。我试图在页面

回答 2 投票 0

“>”(大于号)CSS 选择器是什么意思?

例如: div > p.some_class { /* 一些声明 */ } > 符号到底是什么意思?

回答 9 投票 0

如何在HTML中指定属于同一类的元素?

如何指定每个 li 标签的第一个 p 元素属于同一个类,而不需要手动执行(以防 ul 元素中的 li 标签太多),因为我们知道 :first-child pse。 ..

回答 1 投票 0

CSS 仅选择数字样式[重复]

在我的网站上,我有一个部分写着“工作日 10:00 ~ 18:00 /*linebreak/ 周六 10:00 ~ 13:30" 我试图只将数字格式化为“Courier New”......

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.