标签: css-selectors

有一个CSS父选择器吗?

如何选择<li>作为锚元素直接父元素的元素?

在示例中,我的CSS将是这样的:

li < a.active {
    property: value;
}
Run Code Online (Sandbox Code Playgroud)

显然有一些方法可以使用JavaScript来实现这一点,但我希望CSS Level 2本身存在某种解决方法.

我尝试设置样式的菜单正在由CMS喷出,因此我无法将活动元素移动到<li>元素...(除非我主题菜单创建模块,我宁愿不这样做).

有任何想法吗?

css css-selectors

2986
推荐指数
27
解决办法
185万
查看次数

是否有"以前的兄弟"CSS选择器?

加号(+)用于下一个兄弟.以前的兄弟姐妹是否有同等效力?

css css-selectors

1253
推荐指数
16
解决办法
62万
查看次数

哪些字符在CSS类名/选择器中有效?

CSS类选择器中允许使用哪些字符/符号?我知道以下字符无效,但哪些字符有效

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
Run Code Online (Sandbox Code Playgroud)

css css-selectors

1171
推荐指数
10
解决办法
37万
查看次数

带有类的第一个元素的CSS选择器

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

.red:first-child {
    border: 5px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<p class="red"></p>
<div class="red"></div>
Run Code Online (Sandbox Code Playgroud)

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

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

.home .red:first-child {
    border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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

css css-selectors

883
推荐指数
12
解决办法
93万
查看次数

什么是"〜"(波浪/波浪/旋转)CSS选择器是什么意思?

搜索~角色并不容易.我正在查看一些CSS并找到了这个

.check:checked ~ .content {
}
Run Code Online (Sandbox Code Playgroud)

这是什么意思?

css css-selectors css3

793
推荐指数
5
解决办法
24万
查看次数

不:第一个孩子选择器

我有一个div包含几个ul标签的标签.

ul只能为第一个标签设置CSS属性:

div ul:first-child {
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud)

但是,我以下尝试为ul除第一个标记之外的其他标记设置CSS属性不起作用:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud)

我怎么能写CSS:"每个元素,除了第一个"?

css css-selectors

750
推荐指数
8
解决办法
71万
查看次数

"+"(加号)CSS选择器是什么意思?

例如:

p + p {
  /* Some declarations */
}
Run Code Online (Sandbox Code Playgroud)

我不知道是什么+意思.这与仅定义p没有的风格有什么区别+ p

css css-selectors

727
推荐指数
8
解决办法
30万
查看次数

可以:not()伪类有多个参数吗?

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

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

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

有任何想法吗?

css css-selectors css3

726
推荐指数
5
解决办法
28万
查看次数

CSS中的通配符*用于类

我有这些我正在设计的div .tocolor,但我还需要唯一的标识符1,2,3,4等,所以我将它添加为另一个类tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}
Run Code Online (Sandbox Code Playgroud)

有没有办法只有一个班级tocolor-*.我尝试使用*这个css中的通配符,但它没有用.

.tocolor-*{
  background: red;
}
Run Code Online (Sandbox Code Playgroud)

css wildcard css-selectors

646
推荐指数
4
解决办法
50万
查看次数

我可以编写一个CSS选择器来选择没有某个类的元素吗?

我想编写一个CSS选择器规则,选择所有没有特定类的元素.例如,给定以下HTML:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我想编写一个选择器来选择所有没有"可打印"类元素,在这种情况下,它是nav和元素.

这可能吗?

注意:在我想要使用它的实际HTML中,将会有更多的元素没有 "可打印"类而不是(我在上面的例子中意识到它是另一种方式).

html css css-selectors

607
推荐指数
8
解决办法
43万
查看次数

标签 统计

css ×10

css-selectors ×10

css3 ×2

html ×1

wildcard ×1