相关疑难解决方法(0)

我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

这个选择器有什么问题,我该如何纠正？

感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:

.home .red:first-child {
    border: 1px solid red;
}

<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>

我怎样才能让第一个孩子上课red？

非常简单:如果浏览器支持某个CSS选择器,我如何最准确地测试？

我目前有一些CSS代码,通过:checked在CSS中使用选择器使页面更具交互性,但我想创建一个与JavaScript相同的回退脚本,但前提是用户的浏览器不支持:checked选择器.

我的问题是,如何最准确地测试用户的浏览器是否支持某个CSS选择器？

这是我想用它的代码:

HTML:

<label class="coolbox">
    <input type="checkbox"/>
    <span>I want to eat some caek.</span>
</label>

CSS:

.coolbox input {display:none;}
.coolbox span::before {
    content: "";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:5px;
    border:1px solid black;
}
.coolbox:hover span::before {border:1px solid #555;}
.coolbox:active span::before {border:1px solid #999;}

.coolbox span::before {background-color:#F77;}
.coolbox input:checked + span::before {background-color:#4A4;}

演示

PS:我不想只使用条件评论,因为我想遵循检测功能而不是浏览器的标准.

我正在尝试开发与Selenium一起使用的CSS选择器.特别是我想使用伪类:contains().虽然W3有一个CSS3草案,其中包含:contains(),但最终版本似乎没有包含它.

我正在使用Chrome的工具来帮助我检查我的CSS选择器,并确保我做得对.Chrome似乎没有实现:contains(),这是可以理解的.

有没有我可以使用的工具,可以让我尝试在我们的网页上使用:contains()的选择器？

我正在使用带狮子的Mac.我也可能仅限于使用Firefox 3.5.7(我被告知现在不推迟更新).