css-selectors 相关问题

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

我正在分享下面的代码片段，其中我使用嵌套，但我很困惑如何在其中使用媒体查询。。联系 { @media only 屏幕和（最大宽度：1200px）{ & > .

css sass css-selectors less scss-mixins

回答 1 投票 0

我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。我想对每个顶级列的最后一个子列应用不同的样式。那应该怎么做呢。我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。我想对每个顶级列的最后一个子列应用不同的样式。应该怎么做。 <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> #First col <td> data </td> <td> data </td> <td> data </td> #this one #Second col <td> data </td> <td> data </td> #this one #Remain cols <td> data </td> <td> data </td> <td> data </td> </tr> </tobdy> </table> 我希望每个col具有相同的背景，但我也希望每个列的最后一个元素的背景不同。因此，每个列的最后一个元素应该有绿色背景。尝试提出一个有效的选择器来设置所需列的样式如果我正确理解你的问题，你正在寻找的选择器是td:nth-child(3), td:nth-child(5) - 请参阅下面的代码片段。如果没有，请提供您正在寻找的内容的更好描述。 th, td { border: 1px solid #ddd; background: #ddd; } td:nth-child(3), td:nth-child(5) { background: #fc9; } <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> <td> data </td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data </td> <td> data </td> </tr> </tbody> </table>

css html-table css-selectors

回答 1 投票 0

适用于具有两个类的元素的 CSS 选择器

有没有一种方法可以根据设置为两个特定类的 class 属性的值来选择带有 CSS 的元素。例如，假设我有 3 个 div：你好福<... 有没有一种方法可以根据设置为两个特定类的 class 属性的值来选择具有 CSS 的元素。例如，假设我有 3 个 div： <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> 基于它是 foo 和 bar 类的成员这一事实，我可以编写什么 CSS 来仅选择列表中的第二个元素？链接两个类选择器（中间没有空格）： .foo.bar { /* Styles for element(s) with foo AND bar classes */ } 如果您仍然需要使用像 Internet Explorer 6 这样的古老浏览器，请注意它无法正确读取链式类选择器：它只会读取 last 类选择器（在本例中为 .bar），无论您列出的其他类别。为了说明其他浏览器和 IE6 如何解释这一点，请考虑以下代码片段： * { color: black; } .foo.bar { color: red; } <div class="foo">1. Hello Foo</div> <div class="foo bar">2. Hello World</div> <div class="bar">3. Hello Bar</div> 页面将如下所示：在支持的浏览器上：未选择，因为此元素仅具有类 foo。 Selected，因为该元素同时具有类 foo 和 bar。未选择，因为此元素仅具有类 bar。在 Internet Explorer 6 中：未选择，因为此元素没有类 bar。 Selected，因为该元素具有类 bar，无论列出的任何其他类如何。 Selected，因为该元素具有类 bar。使用SASS： .foo { /* Styles with class "foo" */ &.bar { /* Styles with class "foo bar" */ } } 参见 Less 选择器中 & 符号的含义是什么？在SCSS中可以通过两种方式完成。选项1 .foo.bar { // Styles with class "foo bar" } 选项2 .foo { &.bar { // Styles with class "foo bar" } } 在我的例子中 .Dashboard.Main-root-, .MuiInputBase-root 两个条件都满足，那么只有我们应用了 css 角色 body div[class*="Dashboard.Main-root-"] .MuiInputBase-root:before { border-bottom: 1px solid rgb(92 95 98); }

css css-selectors

回答 4 投票 0

尝试使用带有 HTMLUnit 的 css 选择器来选择正确的按钮

我有以下 HTML 代码片段：我有以下 HTML 代码片段： <div class="LocationsIndex__paginationBar__YE2Xo"> <div> <nav> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button"> <div style="transform: rotate(180deg);">➞</div> </button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">1</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">2</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__active__EK2e1" type="button">3</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">4</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__disabled__FbUC6 Pagination__symbol__KHv6r" type="button">...</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">79</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button"> <div class="">➞</div> </button> </nav> </div> <div class="LocationsIndex__paginationInfo__YbpCl">Showing 81 to 120 of 3121</div> </div> 我尝试使用以下代码中所示的 HtmlPage.querySelector() 方法捕获该组中的最后一个按钮控件（它是一个分页器）。此方法调用始终返回 null。我尝试了几种不同的方法来获取这些信息，但没有成功。 'class="Control__Control__xxxxx" 类的最后几个字符可能不同，所以我只想根据类值的开头查找。 // do the pagination HtmlButton button = page.querySelector("button[class^='Control__control']:nth-child(8) div"); page = button.click(); 我做错了什么？要定位最后一个按钮控件，您可以使用 last-child 伪类来选择导航中的最后一个按钮元素 page.querySelector("nav button[class^='Control__control']:last-child div");

css-selectors htmlunit

回答 1 投票 0

CSS 在悬停时定位同级元素的子元素

我有以下情况：我的 CSS 网格中有 4 张卡片。第一张应该是“特色”（不同的背景等），并将鼠标悬停在其余卡片上，我想要 f...

css css-selectors

回答 1 投票 0

仅使用CSS隐藏悬停时的兄弟div

我对一种让CSS（无javascript）显示div或您悬停的元素之外的元素感兴趣，如下所示： #除法{ 显示：无； } a：悬停#divid { 显示：块； }...

html css css-selectors hover pseudo-class

回答 3 投票 0

使用 CSS 选择器遍历 HTML 标签树

<div> <div class="header"> <div id="navbar" > <ul id="nav"> <li><a id="trigger"><span><p></p></span></a></li> <li><a id="target"><span><p></p></span></a></li> </ul> </div> </div> </div> 嘿伙计们，我有一个问题，如果不会给你们造成任何不便，与遍历 HTML 树有关。我已经知道如何使用以下语法选择 <a id="trigger"></a>： div>div.header>div#navbar>ul#nav>li>a#trigger:hover {CSS} 将触发更改。但问题是，我想定位它下面的 <a id="target""></a> 标签，但我还没有找到访问那里的 <a id="affected"></a> 的正确语法。我希望当我将鼠标悬停在 id="trigger" 上时，id="target" 将会受到影响。我已经尝试过使用 + 选择器来定位该 id，唉，试验以徒劳结束。有可能影响该id吗？您可能需要相邻的同级选择器： #trigger:hover + #target {} 或者可能是兄弟组合器，它不需要第二个元素直接相邻： #trigger:hover ~ #target {} http://css-tricks.com/child-and-sibling-selectors 更新：正如下面的评论中所述，选择器实际上必须是兄弟姐妹。在原来的结构中，它们不是。 <div> <div class="header"> <div id="navbar" > <ul id="nav"> <li class="one"><a id="trigger">Trigger</a></li> <li class="two"><a id="target">Target</a></li> </ul> </div> </div> </div> .one:hover + .two {color: red} http://jsfiddle.net/5Gmz9/1/ 这是另一种方法，不需要 li 元素上的类或 ID： #nav li:first-child:hover + li {color: red} http://jsfiddle.net/5Gmz9/2/ 每种方法都有其陷阱。顺便说一句， div>div.header>div#navbar>ul#nav>li>a#trigger:hover {} 可能写得和一样好 #navbar #trigger:hover {} 为您和浏览器节省一些工作。我意识到这是一个老问题，但我发现它试图遍历 DOM。我发现“:has()”也可以工作，没有父项类，并且比第一个子项有更多的控制权： li:has(> #trigger):hover + li > #target {color:red} 或者就我而言，禁用复选框： .aspNetDisabled:has(> input:disabled:checked) + .slider {...

html css css-selectors

回答 2 投票 0

CSS在处理选择器时使用token算法还是子字符串算法？

我有以下代码我有以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .square__element { font-size: 20px; padding: 50px; background-color: orange; } </style> <title>Document</title> </head> <body> <div class="square__element">Square 1</div> <div class="square__element--modifier">Square 2</div> </body> </html> 当我运行它时，.square__element{}selector中声明的任何样式都不会应用于“Square 2”element。最初我认为“Square 2”元素应该应用 .square__element{} 选择器中声明的所有样式。这就是为什么我在谷歌上搜索了一些搜索查询，试图弄清楚是否是我有错误的期望，或者我的浏览器是否出现了故障。但我发现没有任何帮助。然后我打开了w3c，研究了大约一个小时的规范。我浏览了整个“语法”章节，但也没有找到答案。最后，我询问了我可以使用的所有人工智能聊天内容。他们（Bard、Chat GPT 和 Copilot）告诉我，.square__element{} 中声明的样式应该应用于“Square 2”元素，因为 “CSS 处理器使用子字符串匹配算法” 但是 Bing 聊天告诉我，除非我用空格分隔<div class="square__element square__element--modifier">Square 2</div>，否则不应该应用样式，因为 “CSS 处理器不使用子字符串匹配算法，而是使用令牌匹配算法，其中令牌是字符序列不是空格、制表符、换行符或其他分隔符。 ” 所以，我仍然不知道正确答案。有人可以帮我弄清楚 .square__element{} 选择器中声明的规则是否应该应用于“Square 2”元素吗？也许可以指出规范中我错过的解释的地方。不，不应该。 square__element和square__element--modifier都是两个不同的有效类名。添加这样的修饰符只是一个命名约定，表示修饰符正在向基类应用或修改某些样式（square_element）。通常在使用时包含这两个类。您可以在 Boostrap 类中看到许多类似的示例，例如 btn btn-lg，其中 btn-lg 应用或覆盖一些附加样式到 btn。

css css-selectors

回答 1 投票 0

学习 HTML 和 CSS 挑战斗争

第一次来这里。我正在参加 Angela Yu 的 Web 开发训练营，并做一个项目来测试我对级联（特异性和继承）、CSS 选择器及其组合的了解，...

css css-selectors css-position

回答 1 投票 0

为什么在类应该覆盖链接样式时需要 !important ？

我正在尝试为页内导航创建可重用的样式。有一个默认样式，通过 ID 分配给封闭的元素。我还需要为某些规格提供替代样式... 我正在尝试为页内导航创建可重用的样式。有一个默认样式，通过 ID 分配给封闭的元素。我还需要为该元素中的某些特殊元素提供替代样式。我将一个类分配给一个元素，然后尝试对其进行样式设置，结果好坏参半。一些属性发生了变化，但其他属性只有当我用“！important”强制覆盖时才发生变化。虽然我可以做到这一点，但感觉就像是黑客攻击。为了正确定位这些特定链接，我缺少什么？ #page-nav a { border: 2px solid black; border-radius: .3rem; padding: .25rem .5rem; line-height: 2.25; text-decoration: none; font-weight: 700; color: black; } #page-nav a:hover { background-color: black; color: white; } a.pageNavAlt:link { background-color: black; /* WORKS */ /* color: red; DOESN'T WORK */ color: red !important; /* WORKS */ } a.pageNavAlt:hover { /* background-color: darkred; color: yellow; DOESN'T WORK */ background-color: darkred !important; /* WORKS */ color: yellow !important; /* WORKS */ } <nav id="page-nav"> <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a> </nav> 因为#page-nav a（和#page-nav a:hover）由于使用了id而在CSS规则中具有更高的优先级。因此，a.pageNavAlt:hover are 中的样式已被应用，但被 #page-nav a:hover 中的样式所推翻。您可以将 id 选择器添加到其他样式中： #page-nav a { border: 2px solid black; border-radius: .3rem; padding: .25rem .5rem; line-height: 2.25; text-decoration: none; font-weight: 700; color: black; } #page-nav a:hover { background-color: black; color: white; } #page-nav a.pageNavAlt:link { /* <-- here */ background-color: black; color: red; } #page-nav a.pageNavAlt:hover { /* <-- and here */ background-color: darkred; color: yellow; } <nav id="page-nav"> <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a> </nav>

css css-selectors

回答 1 投票 0

多个子元素的 CSS 选择器

假设我有这张桌子：有东西！如果我...

css css-selectors

回答 10 投票 0

pandas set_table_styles 不适用于表标签

我使用以下代码来设置表格边框和标题列的一些格式。标题列的样式工作正常，但代码不会呈现表格的边框。

python pandas dataframe css-selectors

回答 1 投票 0

选择属性为空或未指定的元素

采用以下示意性 html 代码：现在我正在寻找一个选择...