Questions tagged «css-selectors»

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

7
如何选择具有给定类名称的第一个，第二个或第三个元素？
如何在元素列表中选择某个元素？我有以下内容： <div class="myclass">my text1</div> <!-- some other code follows --> <div> <p>stuff</p> </div> <div> <p>more stuff</p> </div> <p> <span>Hello World</span> </p> <div class="myclass">my text2</div> <!-- some other code follows --> <div> <p>stuff</p> </div> <p> <span>Hello World</span> </p> <input type=""/> <div class="myclass">my text3</div> <!-- some other code follows --> <div> <p>stuff</p> …
2
为什么不能将特定于供应商的伪元素/类组合到一个规则集中？
在CSS中，可以placeholder使用供应商特定的伪类和伪元素的组合来为输入中的文本设置样式（以获得最佳的跨浏览器覆盖）。 这些都具有相同的基本属性（即：文本样式和颜色声明）。 但是，尽管我不可避免地希望使用相同的样式，而与浏览器供应商无关，但似乎无法将它们组合成一个逗号分隔的选择器（就像您想要两个选择器共享的其他CSS一样）相同的样式）。 例如，我倾向于使用以下四个选择器来定位占位符样式： input:-moz-placeholder input::-moz-placeholder input:-ms-input-placeholder input::-webkit-input-placeholder （尽管:-moz-placeholder 不赞成这样做，::-moz-placeholder但仅在FireFox 19发行时才发生，因此目前都需要两者都可以提供更好的浏览器支持）。 令人沮丧的是，声明和赋予每种（相同）样式会导致CSS内的大量重复。 因此，为确保占位符文本右对齐和斜体，我将得出以下结论： input:-moz-placeholder{ font-style: italic; text-align: right; } input::-moz-placeholder{ font-style: italic; text-align: right; } input:-ms-input-placeholder{ font-style: italic; text-align: right; } input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 我真正想做的是将它们组合为一个逗号分隔的规则集，如下所示： input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 但是，尽管在少数情况下尝试过此操作，但这似乎从未奏效。这让我担心，CSS的某些基本部分我不了解。 有人能阐明为什么会这样吗？
2
父/祖先元素的CSS否定伪类：not（）
这让我发疯： HTML： <div><h1>Hello World!</h1></div> CSS： *:not(div) h1 { color: #900; } 这不是读到“选择所有h1祖先不是div元素的元素吗？”。因此，“ Hello World！” 不应显示为红色，但仍然是。 对于上述标记，添加子组合器的工作原理是： *:not(div) > h1 { color: #900; } 但是，h1如果它不是div元素的子元素，则不会影响元素。例如： <div><article><h1>Hello World!</h1></article></div> 这就是为什么我想将h1元素表示为元素的后代而不是子div元素。任何人？
5
CSS-在ID中选择类的语法
通过类名在id内选择标签的选择器语法是什么？例如，为了使内部的“ li”变成红色，我需要在下面选择什么？ <html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: red; } </style> </head> <body> <ul id="navigation"> <li>Level 1 item <ul class="navigationLevel2"> <li>Level 2 item</li> </ul> </li> </ul> </body> </html>
2
什么是:: content / :: slotted伪元素，它如何工作？
对于Google而言，这是不可能的，因为每个谈论:before和:after伪元素的文章似乎都使用“内容”一词。 我在这篇CSS-Tricks文章中听说了这一点，解释了如何实现图像滑块作为Web组件的示例用例。因此，它出现在内部的代码示例为： 的CSS #slides ::content img { width: 25%; float: left; } 的HTML <template> ... <div class="inner"> <content select="img"></content> </div> </template> 似乎是指该<content>标签，该标签用于允许用户包括Web组件，但我希望对此有更深入的了解。 编辑： 在进一步阅读之后，在上述文章中，我找到了作者的“ Shadow DOM CSS Cheatsheet”链接，其中包括一段解释什么是::content伪元素的段落： 选择元素内部的分布式节点。对于不支持本机选择器的浏览器，需要与polyfill-next-selector配对。 ::content h1 { color: red; } 资料来源：http : //robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/ 这是有帮助的，但是我仍然发现整个事件相当不透明。还有其他见解吗？
12
改善jQuery选择器性能的好方法？
已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新的答案或互动。 我正在寻找可以改善jQuery调用选择器性能的任何方式。具体来说是这样的： 是$("div.myclass")不是快$(".myclass") 我想可能是这样，但是我不知道jQuery是否足够聪明，可以首先限制标记名的搜索，等等。有人对如何制定jQuery选择器字符串以获取最佳性能有任何想法吗？
6
为什么JS代码“ var a = document.querySelector（'a [data-a = 1]'）;”？导致错误？
我在DOM中有一个元素： <a href="#" data-a="1">Link</a> 我想通过其HTML5自定义数据属性获取此元素data-a。所以我写了JS代码： var a = document.querySelector('a[data-a=1]'); 但是此代码不起作用，并且在浏览器的控制台中出现错误。（我测试了Chrome和Firefox。） JS代码var a = document.querySelector('a[data-a=a]');不会导致错误。因此，我认为问题在于HTML5的JS APIdocument.querySelector不支持在HTML5自定义数据属性中查找数字值。 这是浏览器实现错误还是HTML5规范相关document.querySelector？ 然后，我在http://validator.w3.org/上测试了以下代码： <!DOCTYPE html> <meta charset="utf-8"> <title>An HTML Document</title> <a href="#" data-a="1">Link</a> 他们已通过验证。由于这些HTML5代码已经过验证。我们应该可以使用HTML5的JS APIdocument.querySelector通过其自定义数据属性来查找此锚元素。但是事实是我出错了。 HTML5对HTML5 JS API的规范是否document.querySelector表示该方法无法查找带有数字值的HTML5数据自定义属性？（需要HTML5规范源。）
3
我应该使用CSS：disabled伪类还是[disabled]属性选择器，还是有见识？
我正在尝试设置禁用输入的样式。我可以用： .myInput[disabled] { } 要么 .myInput:disabled { } 属性选择器是现代CSS3方式还是前进的方式？我曾经使用伪类，但是我找不到有关它们是否是旧方法并且不会得到支持或者它们是否相等的任何信息，您可以使用最喜欢的任何方法。 我不需要支持较旧的浏览器（这是一个Intranet应用程序），因此： 属性是更新更好的 伪类仍然是要走的路 您最喜欢的那个 有一个技术上的理由要使用另一个
15
如何使用jQuery选择所有复选框？
我需要有关jQuery选择器的帮助。假设我有一个标记，如下所示： <form> <table> <tr> <td><input type="checkbox" id="select_all" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> </table> </form> 运行代码段Hide results展开摘要 除了#select_all用户单击时，如何获取所有复选框？
7
哪种JQuery选择器排除其父项与给定选择器匹配的项目？
我有 var $set = $('.foo,.bar').filter( function() {return $(this).parents('.baz').length < 1;}); 作为选择所有类别为foo或bar且不从类别为的元素派生的元素的方法baz。是否有一个选择器可以完成相同的事情而无需过滤lambda？ <div class='foo'/><!--match this--> <div class='bar'/><!--match this--> <div class='baz'> <div class='foo'/> <!--don't match this--> </div>
5
为什么.class：last-of-type无法正常工作？
为什么这不起作用？http://jsfiddle.net/84C5W/1/ p{ display: none; } p.visible:last-of-type { display: block; } <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 运行代码段隐藏结果展开摘要 实际上，我所有的<p>元素都不可见。如果我.visible在选择器中删除对的引用，则确实会显示<p>div中的最后一个，但这不是我想要的。 当然，我只能一直保留一个.visible，但这只是一个reveal.js演示文稿，我无法控制JavaScript。 如何选择带有类的div中的最后一个元素.visible？我不想为此使用JavaScript。
3
jQuery：选择属性大于值的所有元素
我知道要过滤具有属性attrName的属性，该属性具有值attrValue，我这样做： filter("[attrName='attrValue']") 但是看文档http://api.jquery.com/category/selectors/我看不到选择所有元素的选项st attrName> attrValue 这项工作会吗 filter("[attrName>'attrValue']")
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.