相关疑难解决方法(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

.blue p:first-of-type {
    background-color:#2E9AFE;
}

作品例如1:

<div class="blue">
    <p>element 1</p>
    <p>element 2</p>
    <p>element 2</p>
</div>

不适用于示例2:

<div class="blue">
    <ul>
        <li><p>Parent 1</p>
            <ul>
                 <li><p>Element 1.1</p></li>
                <li><p>Element 1.2</p></li>
            </ul>
        </li>
    </ul>
</ul>

在示例2中,带有标记的第一个元素p是Parent 1,但是我的代码为每个元素着色.为什么？

小提琴:http://jsfiddle.net/alexix/CYX32/1/

我正在设置单选按钮(隐藏它们并使用标签作为按钮),并尝试将边框半径放在first-child上,但它没有按预期响应,或者我做错了.

如何在第一个标签上实现左边界半径？

在这里看到它> http://jsfiddle.net/sthrc57f/

HTML:

<input type="radio" name="radios" id="radioone" value="one">
<label for="radioone">radio 1</label>
<input type="radio" name="radios" id="radiotwo" value="two" checked="checked">
<label for="radiotwo">radio 2</label>

CSS:

input[type=radio] {
    display:none;
}

input[type=radio] + label {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.5em 2em 0.5em 2em;
    background-color: #eeeeee;
    color: #bbbbbb;
}

input[type=radio] + label:first-child  {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -o-border-top-left-radius: 7px;
    -o-border-bottom-left-radius: 7px;
    -moz-border-top-left-radius: 7px;
    -moz-border-bottom-left-radius: 7px;
}

input[type=radio]:checked + label { 
    background-color: green;
    color: white;
}

input[type=radio]:checked + label:before …