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

我正在尝试选择除了和之外input的所有元素.typeradiocheckbox

很多人已经表明你可以放入多个参数:not,但是使用type似乎无论如何都没有用到我试试.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

有任何想法吗？

我有这个布局:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

使用这些CSS规则:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute; …

如果我有这个HTML,我如何选择 CSS 之间#one和#twoCSS 之间的所有元素？我不能使用jQuery.

<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>

jQuery或其他JavaScript库是否支持CSS4选择器？甚至浏览器？我该如何测试它们？

例如,为标准输入样式,我写了类似的东西:

input:not([type="checkbox"]):not([type="radio"]) {
    background-color: blue;
}

然而,这会增加特异性,所以如果我想使用类来覆盖它,我必须做类似的事情:

.red.red.red {
    background-color: red;
}

有没有办法在不改变功能的情况下降低原始输入选择器的特异性？