css-selectors 相关问题

使用 select::before 显示自定义 V 形以进行选择

我正在尝试将 V 形图标更改为 SVG 并使其适应深色主题。 为此，我尝试将 V 形图案设置为单独元素的背景图像 (::before) 并应用反转

无法使用水豚找到文字

早上好，我正在尝试在使用引导程序的（设计电子邮件）视图中查找特定文本。我的水豚版本是3.6。 CSS 选择器是： 正文 > 表 > tbody > tr > td > 表 ...

如何选择表格中的列

我得到的表格，没有任何css属性，有些列是可选的。 姓名A（可选） 名字B 名字C 我得到的表格，没有任何CSS属性，有些列是可选的。 <TABLE> <TR> <TH>name A(optional)</TH> <TH>name B</TH> <TH>name C</TH> </TR> <TR> <TD>name 1A(optional)</TD> <TD>name 1B</TD> <TD>name 1C</TD> </TR> <TR> <TD>name 2A(optional)</TD> <TD>name 2B</TD> <TD>name 2C</TD> </TR> </TABLE> 我需要选择名称为“name B”的列，但该列并不总是第二个！ 所以我需要根据名称来选择它。 根据标头中的 id 属性，在最坏的情况下 <TH id="nameB">name B</TH> 您可以像这样查看单元格内容： var ths = document.getElementsByTagName('th'); var tds = document.getElementsByTagName('td'); var column = []; for (var i=0; i<ths.length; i++) { if (ths[i].innerHTML.match(/name \d*B/)) { column.push(ths[i]); } } for (var i=0; i<tds.length; i++) { if (tds[i].innerHTML.match(/name \d*B/)) { column.push(tds[i]); } } console.log(column); 参见演示。 或者简单地匹配列标题并获取其余元素： var ths = document.getElementsByTagName('th'); var trs = document.getElementsByTagName('tr'); var column = []; for (var i=0; i<ths.length; i++) { if (ths[i].innerHTML.indexOf('name B') !== -1) { var id = i; break; } } for (var i=0; i<trs.length; i++) { column.push(trs[i].children[id]); } console.log(column); 参见演示。 如果这是您自己设计的表格，您可能可以通过了解如何格式化表格列来取得进展，如下所述： http://www.w3.org/TR/CSS21/tables.html#columns 另请参阅： http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2 这是CSS设计书籍中不常提到的更高级的话题，值得一看。 如果你想要极其简单的解决方案，没有任何 css 负担，你可以将相同的类应用于你想要选择的所有元素，就像这样， <TABLE> <TR> <TH>name A(optional)</TH> <TH class="red">name B</TH> <TH>name C</TH> </TR> <TR> <TD>name 1A(optional)</TD> <TD class="red">name 1B</TD> <TD>name 1C</TD> </TR> <TR> <TD>name 2A(optional)</TD> <TD class="red">name 2B</TD> <TD>name 2C</TD> </TR> </TABLE> 然后按照你想要的风格 .red { background: red; } 使用此函数，您可以通过列索引获取列元素： /** * * @param {Object} table: the table dom selector * @param {indexColumn} number: start count with 0 * @returns Array with the column element selected by index column */ function getColumnElementsByIndexColumn(table, indexColumn) { const tableRows = table.querySelectorAll("tr"); let columnElements = []; for (row of tableRows) { let columnElement = row.children[indexColumn]; columnElements.push(columnElement); } return columnElements; } 问题案例，列索引为1代表第二列）： <table> <tr> <th>name A(optional)</th> <th>name B</th> <th>name C</th> </tr> <tr> <td>name 1A(optional)</td> <td>name 1B</td> <td>name 1C</td> </tr> <tr> <td>name 2A(optional)</td> <td>name 2B</td> <td>name 2C</td> </tr> </table> <script> const table = document.querySelector("table"); let secondColumnELements = getColumnElementsByIndexColumn(table, 1); console.log(secondColumnELements[0].innerText); // name B console.log(secondColumnELements[1].innerText); // name 1B console.log(secondColumnELements[2].innerText); // name 2B </script> 现在，您可以使用 Javascript 在该元素中应用 css 类 您还可以用两行 JavaScript 执行以下操作： var idx = document.querySelector('tr').innerText.split('\t').indexOf('name B')+1; var colArr = [...document.querySelectorAll('th:nth-child('+idx+'),td:nth-child('+idx+')')].forEach(el => el.classList.add('gotcha')) td,th { border: 1px solid black; } .gotcha { background:yellow; } <table> <tr> <th>name A</th> <th>name B</th> <th>name C</th> </tr> <tr> <td>name 1A(optional)</td> <td>name 1B</td> <td>name 1C</td> </tr> <tr> <td>name 2A(optional)</td> <td>name 2B</td> <td>name 2C</td> </tr> </table> 说明： 在 JavaScript 代码的第一行中， split() 函数从第一行的元素创建一个数组，并用制表符将它们分开，并获取您感兴趣的第一个 innerText 字符串所在的索引（如果有），否则返回-1. 因为 JavaScript 数组是从 0 开始的，而 css 中的表格列是从 1 开始的，所以我们在 idx 上添加 +1 以获得正确的列索引 在 JavaScript 代码的第二行中，querySelectorAll 选择 idx 单元索引处的 th 和 td 元素，返回 HTML 节点列表或集合，我们借助展开语法将其转换为类似数组的对象 [...object ]因此可以使用forEach方法。 因此，我们向 forEach 传递一个箭头函数，并使用该代码向同一列的所有单元格添加一个类，以更好地显示选择的结果。 当然，如果您要查找的字符串位于任何 innerText 中，则相同的代码可以工作。 如果代码没有找到任何带有 name B 的 th，indexOf 将返回 -1 并且不会格式化任何内容，因为 idx 将为 0，并且 querySelectorAll 将返回一个空 NodeList，因为 idx 值将超出单元格索引范围。因此，不会选择任何内容，也不会将其格式化为黄色。 您可以将 name B 字符串移动到另一个元素或将其完全删除以查看相对结果。

使用CSS伪类：first-child

尝试设置一个菜单，以便每个菜单项都有左边框，但边框被排除在第一个菜单项之外。 网站：http://www.rogersinternational.com CSS： ＃使用权 { 背景：#414731；

使用 :has() 时没有看到变化

我最近发现了 :has() 伪类。当我尝试测试它时，我没有看到任何变化。我真的不知道为什么。 * { 保证金：0； 填充：0； 框大小：边框框； } 身体 { 他...

使用选择器后没有看到变化

关于问题 嗨，我是 CSS 新手，最近我发现有选择器。毫无帮助的是，当我想测试这个选择器时，我没有看到任何变化。我真的不知道为什么。我在 int 中找不到答案...

如何隐藏CSS中元素位置之后剩余的元素？

我正在使用 css 选择器来隐藏元素，但我不知道如何在 nth-child 中执行此操作，我想隐藏元素位置 5 之后的所有剩余元素。我如何使用 nth-child 来做到这一点？ 我正在使用CSS选择器来隐藏元素，但我不知道如何在nth-child中做到这一点，我想隐藏元素位置5之后的所有剩余元素。我如何使用nth-child做到这一点？ <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> // hidden <div class="item">item 7</div> // hidden <div class="item">item 8</div> // hidden ...etc... 试试这个 div:nth-child(n+6) { display: none; } div:nth-child(n+6) { display: none; } <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> // hidden <div class="item">item 7</div> // hidden <div class="item">item 8</div> // hidden 更多详情

哪些 CSS 元素获取样式

我开始学习CSS了。然而，我一直遇到同样的问题。如何确定哪个元素获得属性和值？ 大多数时候我都是正确的，但有时我会尝试 diff...

为什么:not(p)选择段落？

：不是（p）{ 颜色：#ff0000； } 这是一个标题 这是一段。 这是另一段。 这是 div 中的一些文本... :not(p) { color: #ff0000; } <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> not(selector)用于选择未指定元素的每个元素，因此在上面的代码中，我在两个p上都得到红色，这是一个未选择的项目。 我只期望 div、a、h1 为红色，而不是 p，因为 p 是指定元素，它意味着离开并且样式必须应用于所有其他元素？ 选择器:not(p)将选择不是p元素的所有元素：这包括html和body。我们在这两个元素上设置 color。 此外，属性color是默认继承的。 默认继承 color 并且我们将 color 上的 body 设置为红色，p 元素将从其父级（即 color）继承 body 的红色值。 您可以仅选择 body 的子元素，这意味着 body 的 color 的 事实上的 浏览器默认黑色将由 p 元素继承，而所有其他不是 p 的子元素元素的 color 设置为红色。 注意：使用选择器body :not(p)，只有body的孩子才会将color评估为黑色。其他元素会将 color 设置为红色，p 的间接后代 body 将继承。 但是让 p 元素拥有某个 color 最简单的方法是设置它（而不是继承它）。 :not选择器不是这样工作的。在 :not 选择器之前，您应该告诉您要从哪个父级中选择。 body :not(p) 针对 HTML 文档中不是段落元素的所有元素，并对它们的文本应用红色 (#ff0000)。 body :not(p) { color: #ff0000; } <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> </body>

为什么不是（选择器）伪类选择指定元素？

：不是（p）{ 颜色：#ff0000； } 这是一个标题 这是一段。 这是另一段。 这个我... :not(p) { color: #ff0000; } <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> 1.not(选择器)用于选择不是指定元素的每个元素，因此在上面的代码中，我在两个p上都得到了红色，这是一个未选择的项目。 2. 我期望只有 div,a,h1 为红色，而不是 p，因为 p 是指定元素，并且它意味着离开并且样式必须应用于所有其他元素？ 现在， :not 选择器不会那样工作，在 :not 选择器之前，您应该告诉您要从哪个父级选择。 body :not(p) 针对 HTML 文档中不是段落元素的所有元素，并对它们的文本应用红色 (#ff0000)。 body :not(p) { color: #ff0000; } <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> </body>

多个标签的 CSS 选择器[for=name]

我想我的表单中有一个项目列表，我想在其中选择一些标签并应用规则。 目前我正在这样做，我相信这应该根据其他选择器规则起作用， #表单列表-

是否有另一种方法可以在不使用 :last-child 类的情况下在最后一个子元素上应用 CSS？

我想知道是否有另一种方法使用 CSS 来设置最后一个子元素的样式，而不使用 :last-child 伪类？例如，这是我的 HTML 代码： 我想知道是否有另一种方法使用 CSS 来设置最后一个子元素的样式，而不使用 :last-child 伪类？例如，这是我的 HTML 代码： <div> <div class="someText"> <p>Some text about Biology</p> </div> <div class="someText"> <p>Some text about Math</p> </div> <div class="someText"> <p>Some text about Environmental Science</p> </div> <div class="someText"> <p>Some text about physics</p> </div> </div> 假设我想将最后一个 someText 元素上的文本颜色更改为蓝色。这是我的CSS： .someText p{ color: green; } .someText:last-child p{ color: blue } 虽然这有效，但我想知道是否有一种方法可以在不使用伪类的情况下设置最后一个元素的样式？ 我这么问是因为我想从包装 <div>类的 HTML 中删除 someText 。 基本上，如果我的 HTML 看起来像这样，我将如何将 CSS 应用于最后一个子元素： <div class="someText"> <p>Some text about Biology</p> </div> <div class="someText"> <p>Some text about Math</p> </div> <div class="someText"> <p>Some text about Environmental Science</p> </div> <div class="someText"> <p>Some text about physics</p> </div> 您正在寻找的伪类是 :last-of-type .someText:last-of-type { color: blue; } 这将使最后一个 someText 元素变成蓝色。

如何使用 Selenium 定位嵌套 div 中的输入元素

我无法找到元素 ，并且想将文本“hello”放入文本框中。 尝试找到输入 class='search-text' 我的网络驱动程序代码...

如何在nextjs中的react-markdown内容中添加新元素而不使用jsx？

我使用react-markdown构建虚拟dom，它允许仅更新更改的DOM，而不是完全覆盖。它生成标签中的内容。我想在标签内添加标签。 ...

有没有办法在图标下添加垂直线而无需创建另一个div？

我试图在图标下方添加一条垂直线，但我似乎无法显示该线，而无需创建额外的 div 来将图标类包装在其中。我正在尝试让我的图标消失...

这个 CSS :is() 选择器没有像我想象的那样工作

为什么 CSS 选择器 .a ~ .b :is(body .b .c .d) 与以下简单 HTML 标记中的 .d 匹配，而第一个 .b 和 :is() 之间的空格肯定是后代组合器，因此选择器...

CSS 伪::在不处理 Icon 元素之前？

我有以下 HTML，如下所示： 这是 HTML： 新闻 我有以下 HTML，如下所示： 这是 HTML： <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> 我尝试在图标（fa-car）上显示一条垂直线并将其连接到下一个图标。如果它是最后一个图标，则不会显示垂直线。例如 由于某种原因，垂直线不适用于我当前的 CSS。 .newsTimePeriod { display: flex; position: relative; overflow: hidden; padding: 0px 7px 0px 7px; } .newsTimePeriod h3{ width: 100px; float: left; display: flex; } .fa-car, .aboutItem{ margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line*/ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; margin-top: 30px; margin-left: 6px; } /* To hide vertical line on the last icon*/ .newsTimePeriod:last-child .fa-car::before { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } } 我注意到，如果我将图标类包装在 div 中，则垂直线 CSS 可以工作，但我不希望图标类包装在 div 中。 我的 CSS 有问题吗？ 不确定这是否是您所要求的，但我做了一个简单的演示来尝试一下，我认为主要问题是定位。如果::before的父级，i标签不是相对定位的，给它绝对定位会使其位置按照整个页面来放置。另外，您可以使用 :not() 选择除最后一个子项之外的所有子项。 .box { margin: 2rem; padding: 1rem; border: 1px solid red; } .icon { width: 50px; height: 50px; background-color: blue; display: block; /*give the icon a position of relative*/ position: relative; } .box:not(:last-child) > .icon::before { content: ''; /*now this will be sized according to the size of the icon*/ position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; /*then use top or left, and % units to center it*/ top: 100%; left: 50%; } <body> <div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> </div> </body> 也许你需要这个 <div> <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> </div> <style> .newsTimePeriod { display: flex; position: relative; /* overflow: hidden; */ padding: 0px 7px 0px 7px; } .newsTimePeriod h3 { width: 100px; float: left; display: flex; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 50%); background-color: #33004e; z-index: -1; left: 142px; } .fa-car, .aboutItem { margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; position: relative; /* Add position relative to keep the pseudo-element inside */ } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line */ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; top: 23px; /* Updated top value to align with the icons */ left: 22px; /* Updated left value to align with the icons */ } /* To hide vertical line on the last icon */ .newsTimePeriod:last-child .line { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } /* Update for responsive view on small screens */ .fa-car::before { top: 0; left: 22px; height: 100%; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 30%); background-color: #33004e; z-index: -1; left: 44px; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

在 Selenium 中使用 Xpath 查找嵌套元素不起作用

给出以下站点和定位器： https://ultimateqa.com/automation X路径 CONTAINER = (By.XPATH, '//ul[@class="bottom-nav"]') MENU = (By.XPATH, '//li[包含(@class, "菜单项...

CSS 类 .foo.bar （不带空格）和 .foo .bar （带空格）有什么区别

请您解释一下这两个 CSS 类语法之间的区别： .元素.符号{} 和 .element.large .symbol {} 我不明白两者之间的区别。第一个...

如何在元素本身内设置自定义元素滚动条的样式

我有一个简单的自定义元素，我在 light DOM 中使用 ::-webkit-scrollbar 系列伪元素对其滚动条进行了样式设置。 自定义元素.define( '我的元素', 课程延长