css-selectors 相关问题

第 3 行是隐藏的。我不希望从奇/偶 css 规则中获取该规则。让它发挥作用的最佳方法是什么？ .hidden {显示：无;} .box:not(.hidden):nth-c... 第 3 行是隐藏的 <div> 。我不希望从 odd/even css 规则中删除该规则。让它发挥作用的最佳方法是什么？ .hidden {display:none;} .box:not(.hidden):nth-child(odd) { background: orange; } .box:not(.hidden):nth-child(even) { background: green; } <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box hidden">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> </div> http://jsfiddle.net/k0wzoweh/ 注意：可以有多个 hidden 元素。 :nth-child()伪类会查看父级的子树以匹配有效的子级（odd、even等），因此当您将其与:not(.hidden)组合时，它不会正确过滤元素。或者，我们可以通过 CSS 渐变来伪造效果，如下所示： .hidden {display:none;} .wrap { line-height: 1.2em; background-color: orange; background-image: linear-gradient(transparent 50%, green 50%); background-size: 100% 2.4em; } <div class="wrap"> <div class="box">xx</div> <div class="box">xx</div> <div class="box hidden">xx</div> <div class="box">xx</div> <div class="box">xx</div> <div class="box">xx</div> <div class="box">xx</div> </div> 伪选择器不会堆叠，因此您的 :not 不会影响 :nth-child （也不会影响 :nth-of-type 等。如果您可以求助于 jQuery，则可以在那里使用 :visible 伪选择器，尽管这不是 CSS 规范的一部分。如果您正在生成 HTML 并且可以更改它，您可以在运行时应用奇数/偶数逻辑，例如在 PHP 中： foreach ($divs AS $i => $div) { echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>'; } 甚至尝试做一些棘手的事情，比如 .box[class='box']:nth-of-type(even) 不起作用，因为伪选择器甚至不堆叠到属性选择器上。我不确定是否有任何方法可以纯粹使用 CSS 来完成此操作 - 我现在想不出任何方法。这是一个仅 CSS 的解决方案： .box { background: orange; } .box:nth-child(even) { background: green; } .box.hidden { display: none; } .box.hidden ~ .box:nth-child(odd) { background: green; } .box.hidden ~ .box:nth-child(even) { background: orange; } <div class="wrap"> <div class="box">xx</div> <div class="box">xx</div> <div class="box hidden">xx</div> <div class="box">xx</div> <div class="box">xx</div> <div class="box">xx</div> <div class="box">xx</div> </div> 由于我的行是用js隐藏的，我发现对我来说最简单的方法是在隐藏的每个真实行之后添加一个额外的隐藏行，并在再次显示真实行时删除隐藏行。隐藏要隐藏的行，为每个表行调用 .hide() ，然后调用 $("tr:visible:even").css( "background-color", "" ); // clear attribute for all rows $("tr:visible:even").css( "background-color", "#ddddff" ); // set attribute for even rows 将表名称添加到选择器中以更加具体。使用 :even 可以跳过标题行。正如 @Fateh Khalsa 指出的那样，我也遇到了类似的问题，并且由于我使用 JavaScript（准确地说是 jQuery）操作我的表格，所以我能够执行以下操作：（注意：这假设使用 JavaScript/jQuery，OP 没有说明它们是否可用。这个答案假设是的，并且我们可能希望在某个时候切换隐藏行的可见性.) 非活动记录（用 CSS 类“hideme”标识）当前可见。访客单击链接可隐藏列表中的非活动记录。 jQuery 将“隐藏”CSS 类添加到“hideme”记录中。 jQuery 在我们刚刚隐藏的行之后立即向表中添加额外的空行，添加 CSS 类“hidden”（因此不会显示）和“skiprowcolor”，以便我们可以轻松识别这些额外的行。再次单击链接时，此过程会反转。非活动记录（用 CSS 类“hideme”标识）当前处于隐藏状态。访问者单击链接即可显示列表中的非活动记录。 jQuery 删除“隐藏”CSS 类到“hideme”记录。 jQuery 将紧随我们刚刚显示的行之后的表中的附加空行删除，由 CSS 类“skiprowcolor”标识。这是执行此操作的 JavaScript (jQuery)： // Inactive Row Toggle $('.toginactive').click(function(e) { e.preventDefault(); if ($(this).hasClass('on')) { $(this).removeClass('on'); // Track that we're no longer hiding rows $('.wrap tr.hideme').removeClass('hidden'); // Remove hidden class from inactive rows $('.wrap tr.skiprowcolor').remove(); // Remove extra rows added to fix coloring } else { $(this).addClass('on'); // Track that we're hiding rows $('.wrap tr.hideme').addClass('hidden'); // Add hidden class from inactive rows $('.wrap tr.hideme').after('<tr class="hidden skiprowcolor"></tr>'); // Add extra row after each hidden row to fix coloring } }); HTML 链接很简单 <a href="#" class="toginactive">Hide/Show Hidden Rows</a> 上面@tim 答案的scss，以将类名更改保持在最低限度 $selector: "box"; $hidden-selector: "hidden"; .#{$selector} { background: orange; :nth-child(even) { background: green; } &.#{$hidden-selector} { display: none; } &.#{$hidden-selector} ~ { .#{$selector} { &:nth-of-type(odd) { background: green; } &:nth-of-type(even) { background: orange; } } } } 尝试选择器 .hidden {display:none;} .box:nth-child(odd of :not(.hidden)) { background: orange; } .box:nth-child(even of :not(.hidden)) { background: green; } 另一种方法（尽管在边缘侧）是有一个额外的 <tbody> 并在那里移动或复制行。或者，如果使用 OP 示例，则需要一个额外的 div 包装器。当然，在恢复等方面，复制是最简单的。这种方法在某些情况下可能很有用。下面是一个简单的示例，其中行在过滤时移动。是的，这是脱衣舞娘名字的排名，发现它很适合我们谈论条纹......哈哈 const Filter = { table: null, last: { tt: null, value: '' }, name: function (txt) { let tb_d = Filter.table.querySelector('.data'), tb_f = Filter.table.querySelector('.filtered'), tr = tb_d.querySelectorAll('TR'), f = 0 ; tb_f.innerHTML = ''; if (txt.trim() == '') { tb_d.classList.remove('hide'); } else { txt = txt.toLowerCase(); for (let i = 0; i < tr.length; ++i) { let td = tr[i].querySelectorAll('TD')[1]; if (td.textContent.toLowerCase().includes(txt)) { tb_f.appendChild(tr[i].cloneNode(true)); f = 1; } } if (f) tb_d.classList[f ? 'add' : 'remove']('hide'); } }, key: function (e) { const v = e.target.value; if (v == Filter.last.value) return; Filter.last.value = v; clearTimeout(Filter.last.tt); Filter.last.tt = setTimeout(function () { Filter.name(v); }, 200); } }; Filter.table = document.getElementById('table'); Filter.table.addEventListener('keyup', Filter.key); table { width: 200px; border: 3px solid #aaa; } tbody tr { background: #e33; } tbody tr:nth-child(even) { background: #e3e; } .hide { display: none; } <table id="table"> <thead> <tr><th></th><th><input type="text" id="filter" data-keyup="filter" /></th></tr> <tr><th>#</th><th>Name</th></tr> </thead> <tbody class="filtered"> </tbody> <tbody class="data"> <tr><td>1</td><td>Crystal</td></tr> <tr><td>2</td><td>Tiffany</td></tr> <tr><td>3</td><td>Amber</td></tr> <tr><td>4</td><td>Brandi</td></tr> <tr><td>5</td><td>Lola</td></tr> <tr><td>6</td><td>Angel</td></tr> <tr><td>7</td><td>Ginger</td></tr> <tr><td>8</td><td>Candy</td></tr> </tbody> </table> 您可以使用另一种类型的 CSS 选择器：tbody > tr:nth-of-type(odd) 仅定位 tr 节点，然后，不使用类名来隐藏行，只需用一些元素（隐藏它们）将它们包装起来，这样 CSS 选择器将只匹配奇数表行： const searchElem = document.querySelector('input'); const tableElem = document.querySelector('table'); const tableBody = document.querySelector('tbody'); function search() { const str = searchElem.value.toLowerCase(); const rows = tableElem.querySelectorAll('tr'); // remove previous wrappers // https://stackoverflow.com/a/48573634/104380 tableBody.querySelectorAll('div').forEach(w => { w.replaceWith(...w.childNodes) }); // create a wrapper which hides its content: const wrapper = document.createElement("div"); wrapper.setAttribute('hidden', true); rows.forEach(function(row){ const text = row.textContent.toLowerCase(); if (str.length && !text.includes(str)) { // replace row with wrapper and put the row inside it row.replaceWith(wrapper); wrapper.appendChild(row); } }); } searchElem.addEventListener('keyup', search); tbody > tr:nth-of-type(odd) { background: pink } <input type="search" placeholder="search"> <table> <tbody> <tr><td>Apple<td>220 <tr><td>Watermelon<td>465 <tr><td>Orange<td>94 <tr><td>Pear<td>567 <tr><td>Cherry<td>483 <tr><td>Strawberry<td>246 <tr><td>Nectarine<td>558 <tr><td>Grape<td>535 <tr><td>Mango<td>450 <tr><td>Blueberry<td>911 <tr><td>Pomegranate<td>386 <tr><td>Carambola<td>351 <tr><td>Plum<td>607 <tr><td>Banana<td>292 <tr><td>Raspberry<td>912 <tr><td>Mandarin<td>456 <tr><td>Jackfruit<td>976 <tr><td>Papaya<td>200 <tr><td>Kiwi<td>217 <tr><td>Pineapple<td>710 <tr><td>Lime<td>983 <tr><td>Lemon<td>960 <tr><td>Apricot<td>647 <tr><td>Grapefruit<td>861 <tr><td>Melon<td>226 <tr><td>Coconut<td>868 <tr><td>Avocado<td>385 <tr><td>Peach<td>419 </tbody> </table>

css css-selectors

回答 10 投票 0

编辑 1 行文本后 CSS 格式不一致

我对我正在构建的网站上的index.html 文件进行了 1 处更改。在此更改之后，网站的 CSS 格式发生了变化。在恢复更改并拥有过时信息时...

html css css-selectors

回答 1 投票 0

使用 css 选择器禁用与复选框关联的标签

我想禁用与复选框关联的标签。代码片段如下：代码：我想禁用与复选框关联的标签。代码片段如下：代码： <label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label> css： .form-checkbox-left input[type=checkbox]:disabled { color:#ccc; } 不知怎的，它不起作用。您可以选择使用 element+element 选择器。但是，您需要将输入放在标签之前 input[type=checkbox]:disabled+label { color: #ccc; } <input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled> <label for="label1" class="form-checkbox-left">Name 1</label> 你可以尝试使用jquery if ($('label1'.hasAttribute('disabled')){ $('[for="label1"]').attr('disabled', 'disabled'); } 在 [for="label1"] 你可以输入标签的 id（“如果你想的话”）我刚刚用 Firefox 进行了双重检查，向复选框添加任何类型的样式定义都不会改变其外观的任何方面。看来你在这里运气不佳，必须采取不同的方法，隐藏复选框本身（不是使用 display: none;，而是使用 visibility: hidden;），然后添加辅助 CSS 来实际自定义其外观。有关如何执行此操作的示例可以在 http://cssdeck.com/labs/css-checkbox-styles 找到也许这可以帮助您找到最适合您的方法。编辑如果您尝试设置复选框的父标签的样式，那么您就不走运了，因为尽管已经提出了建议，但到目前为止，父元素选择器尚未在 CSS 中实现（请参阅 https://shauninman.com/archive /2008/05/05/css_qualified_selectors 了解详情）。编辑2 您可以通过将标签定义移到复选框定义后面来尝试此操作： <input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label> 那么你的CSS应该看起来像这样以方便更改： input[type="checkbox"][disabled] + label { color: #ccc; } 这反过来会修改标签的文本。

css html css-selectors

回答 3 投票 0

CSS 最后一个奇怪的孩子？

我有一个无序列表，其中可以包含偶数或奇数个项目。我正在寻找一种仅 CSS 的方法来删除最后 2 个 li 标签的边框（如果 li 的数量是偶数）。 :最后-

css css-selectors

回答 7 投票 0

如何在 NodeJS 中按值获取元素的 CSS 选择器？

我正在使用 Node 编写一个网络抓取工具，并考虑使用像 Cheerio 或 JSDom 这样的模块将 HTML 解析为一组 URL 的 DOM。但是，我有一个必需的特定功能......

javascript node.js dom css-selectors cheerio

回答 2 投票 0

如何设置嵌套块 html 的第一段样式？

我想设置元素的第一个字母的样式，该元素是具有元素的元素的父级。我将提供我能想到的想法。 HTML... 我想设置 <p> 元素的第一个字母的样式，该元素是具有 <section> 元素的 <p> 元素的父级。我将提供我能想到的想法。 HTML： <body> <section> <img src="" alt="" /> </section> <section> <p>//something 1</p> <img src="" alt="" /> <p>//something 2</p> <p>//something 3</p> </section> <section> <img src="" alt="" /> </section> <section> <p>//something 4</p> <p>//something 5</p> </section> </body> CSS： section:has(p):first-child p::first-letter{ background:red; } 我也尝试过 p:first-child::first-letter{ background:red; } 在我的示例中，我只想定位 <p>//something 1</p>，但我一直选择 <p>//something 1</p> 和 <p>//something 4</p>。我认为这种情况正在发生，因为一切都处于不同的 CSS 深度，但我不知道该怎么办。所以请 CSS 大神帮助我吧。这是我创建的用于演示和演示的 codepen 链接：codepen 链接 :nth-of-type伪类应该做到这一点： section:nth-of-type(2) > p:nth-of-type(1) { background: red; } <section> <img src="" alt="" /> </section> <section> <p>//something 1</p> <img src="" alt="" /> <p>//something 2</p> <p>//something 3</p> </section> <section> <img src="" alt="" /> </section> <section> <p>//something 4</p> <p>//something 5</p> </section>

html css css-selectors

回答 1 投票 0

如何仅在CSS中存储“状态”？

我正在努力解决一个难题，除了一个重要部分外，我已经解决了大部分问题：想象一下如果你有 5 个 div。一个标题和 4 个部分 (a - d)。每个部分都有一个打开/关闭切换开关...

html css dom css-selectors

回答 2 投票 0

如何在Python中使用Selenium点击Linkedin中的下一个按钮？

我在网页中找到元素“Next Button”并使用 Python 中的 Selenium 单击该元素时遇到问题代码试验：尝试： driver.find_element(By.CSS_SELECTOR, ".artdeco-

python selenium-webdriver xpath css-selectors webdriverwait

回答 1 投票 0

:not() 伪类可以有多个参数吗？

我正在尝试选择除单选按钮和复选框之外的所有类型的输入元素。很多人已经表明你可以在 :not 中放入多个参数，但是使用 type 似乎不起作用，无论如何我尝试一下......