CSS3选择非第一个子元素

有时候我们需要用CSS选择非第一个子元素，例如下面这样的HTML，希望让两个span之间间隔一定的距离，但又不希望简单的给每个span设置margin-right（会导致最后一个span也有margin-right，可能影响之后元素的排版）。


<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

这时如果能排除第一个元素，并给其他元素设置margin-left属性，就能实现比较好的效果了。

可以利用not和first-child，通过下面的CSS实现。


div > span :not(:first-child) {
    margin-left:10px
}

还可以利用兄弟元素选择器+，像这样：


div > span + span {
    margin-left:10px
}

如果HTML是这样的，应该怎么做呢？


<div>
    <span></span>
    <p></p>
    <span></span>
    <span></span>
</div>

其实也很简单，用通配符就可以了：


div > * :not(:first-child) {
    margin-left:10px
}

本文由jzj1993原创，转载请注明来源：http://www.hainter.com/css3-not-first-child

时间： 2024-10-27 07:20:16

CSS3选择非第一个子元素的相关文章

获取第一个子元素屏蔽浏览器的差异

//获取第一个子元素屏蔽浏览器的差异 function getFirstElementChild(element){ //能力检测判断是否支持firstElementChild if(element.firstElementChild){ //支持返回元素 return element.firstElementChild; }else{ //不知此判断下一个兄弟节点 var node = element.firstChild; while(node && node.nodeType !

DOM: 如何获取元素下的第一个子元素

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是: // 让我们假设要将它抽象出来,变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!element) return; var first= element.firstChild; // 处理 w3c 浏览器中第一

[ jquery 选择器 :nth-last-of-type() ] 选取指定(p)父元素下的从后向前数的指定第一个子元素(无关目标元素在父元素中所处的位置)

选取指定(p)父元素下的从后向前数的指定第一个子元素(无关目标元素在父元素中所处的位置): 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' conte

Jquery 获取所有对象的第一个子元素

转自:http://blog.sina.com.cn/s/blog_5fdbd0410100pmnn.html <ul> <li>John</li> <li>Karl</li> <li>Brandon</li></ul> 获取第一个元素: $("ul li:first-child") <div id="getfirst"> <ul>

只允许一个 <configSections> 元素。它必须是根 <configuration> 元素的第一个子元素- HTTP Error 500.19

这还是我第一次遇到这个错误,以前都没太注意配置文件中元素的放置顺序.这次在调试一个ASP.NET MVC项目的时候,突然就爆出HTTP Error 500.19错误,提示无法访问请求的页面,因为该页的相关配置数据无效. 根据网页提供的错误信息,主要原因是configSections元素必须是configuration元素的第一个子元素.而我原本的配置信息如下(错误的): <configuration> <connectionStrings> <add name="S

Jquery获取第一个子元素

如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到Jquery对象,要使用 $($("#divId").children("div").get(0))

Jquery 获取第一个子元素

<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> 获取第一个元素: $("ul li:first-child") <div id="getfirst"> <ul> <li>John</li> <li>Karl</li> <li>

jquery怎么找到元素下面的第一个子元素

<ul><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li></ul> 我们要取到11 所在的 li 元素,有一下几种方法:$('ul').find('li:first');$('ul li:first');$('ul li').eq(0); 这几种方法,就是常用的 jquery 取得第一个元素的方法

Jquery 获取第一个子元素几种写法

<ul> <li>John</li> <li>Karl</li> <li>Brandon</li></ul> 获取第一个元素: $("ul li:first-child") <div id="getfirst"> <ul> <li>John</li> <li>Karl</li>