那些遇到过的问题

不:第一个孩子选择器

OTA*_*TAR 750 css css-selectors

我有一个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:"每个元素,除了第一个"？

Jon*_*Jon 1286

一个您发布的版本的实际工作为所有现代浏览器(如CSS选择3级的支持):

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

如果您需要支持旧版浏览器,或者您受到:not选择器限制的阻碍(它只接受一个简单的选择器作为参数),那么您可以使用另一种技术:

定义一个比你想要的范围更大的规则,然后有条件地"撤销"它,将其范围限制为你想要的范围:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}
Run Code Online (Sandbox Code Playgroud)

限制范围时,请使用您正在设置的每个CSS属性的默认值.

  • @Simon_Weaver:在实践中,IE <9以外的所有东西都支持它.获取此类信息的一个很好的资源是http://caniuse.com. (9认同)
  • 嗯..注意第一个解决方案的限制:https://caniuse.com/#feat=css-not-sel-list第二个对我来说听起来更合理.谢谢! (2认同)

Ale*_*inn 150

这个CSS2解决方案("任何一个ul接一个ul")也可以工作,并且得到更多浏览器的支持.

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

与:not和不同:nth-sibling,IE7 +支持相邻的兄弟选择器.

如果在页面加载后有JavaScript更改这些属性,您应该查看IE7和IE8实现中的一些已知错误. 看到这个链接.

对于任何静态网页,这应该是完美的.

  • @Leven:[quirksmode link](http://www.quirksmode.org/css/selectors/)说它应该在IE7中运行,但只能静态运行.如果您的JS在其前面放置了另一个元素,则可能无法正确更新.这是你看到的问题吗？ (4认同)

ed1*_*nh0 75

由于IE6-8:not不接受,我建议你:

div ul:nth-child(n+2) {
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud)

所以,你选择的每一个ul在它的父元素除了第一个.

有关更多示例,请参阅Chris Coyer的"有用:n-child Recipes"一文.nth-child

  • 考虑到答案是从2013年开始的？ (6认同)

wah*_*wan 48

您可以在“not()”伪类中使用“first-child”伪类。

div ul:not(:first-child){
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud) 
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

替代方法，

  1. 使用“nth-child()”，它将选择第 n 个孩子。

div ul:not(:nth-child(1)){
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud) 
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  1. 使用“nth-of-type()”，它将选择其父元素的第 n 个元素。 

    div ul:not(:nth-of-type(1)){
    background-color: #900;
}
    Run Code Online (Sandbox Code Playgroud) 
    <html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>
    Run Code Online (Sandbox Code Playgroud)

  2. 使用“nth-last-child()”，它将选择从最后一个孩子开始计数的第n个孩子。如果有4个“ul”标签，可以这样写。

div ul:not(:nth-last-child(4)){
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud) 
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  1. 使用“nth-last-of-type()”，它将从最后一个子元素中选择其父元素的第 n 个元素。如果有4个“ul”标签，可以这样写。

div ul:not(:nth-last-of-type(4)){
    background-color: #900;
}
Run Code Online (Sandbox Code Playgroud) 
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这些是处理此类情况的一些最佳方法。

zlo*_*ctb 15 

div li~li {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

支持IE7

Vin*_*oia 12

not(:first-child)似乎不再起作用了.至少使用最新版本的Chrome和Firefox.

相反,试试这个: 

ul:not(:first-of-type) {}
Run Code Online (Sandbox Code Playgroud)

  • 它们都起作用，但是它们具有不同的含义。ul：not（：first-child）的字面意思是“不是其父代的第一个子元素的任何ul元素，因此，如果第一个ul前面带有另一个元素（p `，标题等）。相反，`ul：not（：first-of-type）`表示“容器中除第一个`ul`之外的任何`ul`元素”。您认为OP可能需要后一种行为是正确的，但是您的解释颇具误导性。 (5认同)

Nas*_*imi 7

你可以:not像下面这样使用你的选择器，你可以在里面使用任何选择器:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}
Run Code Online (Sandbox Code Playgroud)

您也可以在:not没有父选择器的情况下使用。

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }
Run Code Online (Sandbox Code Playgroud)

更多例子

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}
Run Code Online (Sandbox Code Playgroud)

小智 5

You can use any selector with not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

705077 次

最近记录：

6 年，2 月 前
相关归档
管理CSS爆炸 681
CSS选择器 - 具有给定子元素的元素 144
如何指定表格的高度,以便显示垂直滚动条？ 98
如何在CSS中选择具有特定类名的"最后一个孩子"？ 95
Google Chrome的两种元素风格之间的差异 71
如何改变Bootstrap的全局默认字体大小？ 47
将背景应用于<html>和/或<body> 46
替换<center> 25
用于Rails的Twitter Bootstrap Gems之间的比较 22
有没有办法写出屏幕阅读器会忽略的内容？ 21
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
确定已安装的PowerShell版本 2543
忽略已提交到Git存储库的文件 2429
何时在CSS中使用margin和padding 2277
如何在Windows上找出正在侦听端口的进程？ 2040
如何在Notepad ++中格式化XML？ 1661
在调用instanceof之前需要进行空检查吗？ 1287
如何重置MySQL中的AUTO_INCREMENT？ 1174
哪个MySQL数据类型用于存储布尔值 1168
"静态"在C中意味着什么？ 1062