Tag: css selectors

第一个元素与类的CSSselect器

我有一堆red类名的元素： <p class="red"></p> <div class="red"></div> 我似乎无法使用下面的CSS规则selectclass="red"的第一个元素： .red:first-child{ border:5px solid red; } 这个select器有什么问题，我该如何纠正？ 更新 ： 感谢评论，我发现这个元素必须是它的父类的第一个孩子，而不是我所拥有的。 我有以下结构： <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> 这个规则在评论中提到失败： .home .red:first-child{ border:1px solid red; } 我怎样才能把第一个孩子的目标定为red ？

哪些字符在CSS类名/select器中有效？

CSS类select器中允许使用哪些字符/符号？ 我知道以下字符是无效的 ，但是什么字符是有效的 ？ ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

有没有“以前的兄弟”CSSselect器？

+是为下一个兄弟。 前面的兄弟姐妹有没有相同的东西？

有一个CSS父母select器？

如何select作为锚元素的直接父元素的<li>元素？ 在例子中，我的CSS会是这样的： li < a.active { property: value; } 很显然，有这样的JavaScript的方法，但我希望有一种解决scheme，原生存在的CSS级别2。 我正在尝试的样式菜单是由CMS发出的，所以我不能将活动元素移动到<li>元素中（除非我主题菜单创build模块，我不想这样做）。 有任何想法吗？

CSS选择器中的空格是什么意思？ 即.classA.classB和.classA .classB之间有什么区别？

这两个选择器有什么区别？ .classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; }

CSS否定伪类：not（）为父/祖先元素

这使我疯狂： HTML： <div><h1>Hello World!</h1></div> CSS： *:not(div) h1 { color: #900; } 这是不是读取“选择具有祖先不是一个div元素的所有h1元素…？” 因此，“Hello World！” 不应该被染成红色，但它仍然是。 对于上面的标记，添加子组合子的作品： *:not(div) > h1 { color: #900; } 但是，如果不是div元素的子元素，则不会影响h1元素。 例如： <div><article><h1>Hello World!</h1></article></div> 这就是为什么我希望将h1元素指定为div元素的后代，而不是子元素。 任何人？

有类前缀的CSS选择器吗？

我想将CSS规则应用于其中一个类匹配指定前缀的任何元素。 例如，我想要一个规则，将适用于具有以状态开始的类（A和C，但不在下面的代码段中）： <div id='A' class='foo-class status-important bar-class'></div> <div id='B' class='foo-class bar-class'></div> <div id='C' class='foo-class status-low-priority bar-class'></div> 某种组合： div[class|=status]和div[class~=status-] 在CSS 2.1下可行吗？ 在任何CSS规范下都可行吗？ 注意：我知道我可以使用jQuery来模拟。

CSS'>'选择器; 它是什么？

可能重复： “>”在CSS规则中意味着什么？ 我已经看过几次CSS代码中使用的“大于”（ > ），但我无法弄清楚它的功能。 它有什么作用？

有没有文本节点的CSS选择器？

我想做什么（显然不是IE）是： p:not(.list):last-child + :text { margin-bottom: 10px; } 这将给文本节点留有余地。 （这甚至可能吗？）我将如何获得文本节点与CSS？

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

有没有一种方法可以根据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来仅选择列表中的第二个元素？