小墨の博客

梦想需要付诸行动,否则只能是梦

【HTML】CSS选择元素


在调整样式中我们经常会遇到这样的情况,相邻且相同元素之间间隔20px时并且第一个元素没有变化。

<div>
<span>这是第1个元素</span>
<span>这是第2个元素</span>
<span>这是第3个元素</span>
<span>这是第4个元素</span>
<span>这是第5个元素</span>
<div>

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


这时候我们可以利用兄弟元素选择器+,像这样:

span + span {
    margin-right: 20px
}

或者

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


css 选择其父元素下的某个元素

一,选择器

  :first-child      p:first-child(first第一个 child子元素)(找第一个子元素为p)

  :last-child      p:last-child(last倒数  child子元素)(找倒数第一个子元素为p)

  :first-of-type        p:first-of-type(first第一个 type类型)(找第一个p)

  :last-of-type        p:last-of-type(last倒数 type类型)(找倒数第一个p)

  :nth-child(n)        p:nth-child(2)(2第二个 child子元素)(找第二个子元素为p)

  :nth-last-child(n)      p:nth-last-child(2)(last倒数 2第二个 child子元素)(找倒数第二个子元素为p)

  :nth-of-type(n)    p:nth-of-type(2)(2第二个 type类型)(找第二个p)

  :nth-last-of-type(n)  p:nth-last-of-type(2)(last倒数 2第二个 type类型)(找倒数第二个p)

  :only-of-type       span:only-of-type(only只有一个 type类型)(只有一个类型为span的)

  :only-child       p:only-child(only只有一个 child子元素)(只有一个子元素,这里只有一个那么那一个也只能是p了)

二,效果

测试html:

<div class="test">
    <span>span</span>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p></div><div class="test">
    <p>p1</p>
    <span>span</span>
    <p>p2</p>
    <p>p3</p></div><div class="test">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <span>span</span></div>

 

p:first-child

/*属于其父元素的首个子元素的每个 <p> 元素*//*先找p元素 再找p的父元素下的第一个子元素为p的(first第一个 child子元素)(找第一个子元素为p)*/p:first-child {
    background-color: yellow;
}

 

 

p:last-child

/*属于其父元素的最后一个子元素的 p 元素*//*先找p元素 再找p的父元素下的倒数第一个子元素为p的(last倒数  child子元素)(找倒数第一个子元素为p)*/p:last-child {
    background-color: yellow;
}

 

p:first-of-type

/*指定父元素的首个 p 元素*//*先找p元素 再找p的父元素下的第一个p元素(first第一个 type类型)(找第一个p)*/p:first-of-type {
    background: #ff0000;
}

p:last-of-type

/*指定父元素的最后一个 p 元素*//*先找p元素 再找p的父元素下的倒数第一个p元素(last倒数 type类型)(找倒数第一个p)*/p:last-of-type {
    background: #ff0000;
}

 

p:nth-child(2)

/*规定属于其父元素的第二个子元素的每个 p 的背景色:*//*先找p元素 再找p的父元素下的第二个子元素为p(2第二个 child子元素)(找第二个子元素为p)*/p:nth-child(2) {
    background: #ff0000;
}

 

p:nth-last-child(2)

/*规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数:*//*先找p元素 再找p的父元素下的倒数第二个子元素为p(last倒数 2第二个 child子元素)(找倒数第二个子元素为p)*/p:nth-last-child(2) {
    background: #ff0000;
}

 

 p:nth-of-type(2)

/*规定属于其父元素的第二个 p 元素的每个 p:*//*先找p元素 再找p的父元素下的第二个p元素(2第二个 type类型)(找第二个p)*/p:nth-of-type(2) {
    background: #ff0000;
}

 

p:nth-last-of-type(2)

/*规定属于其父元素的第二个 p 元素的每个 p,从最后一个子元素开始计数:*//*先找p元素 再找p的父元素下的倒数第二个p元素(last倒数 2第二个 type类型)(找倒数第二个p)*/p:nth-last-of-type(2) {
    background: #ff0000;
}

 

span:only-of-type

/*指定属于父元素的特定类型的唯一子元素的每个 p 元素*//*先找span 再找span的父元素下只有一个类型为span的元素(only只有一个 type类型)(只有一个类型为span的)*/span:only-of-type {
    background: #ff0000;
}

 

p:only-child

/*规定属于其父元素的唯一子元素的每个 p 元素:*//*先找p 再找p的父元素下只有一个子元素(only只有一个 child子元素)(只有一个子元素,这是只有一个那么那一个也只能是p了)*/p:only-child {
    background: #ff0000;
}


参考:

https://blog.csdn.net/heyw886/article/details/84109148

https://www.pianshen.com/article/6787497282/


张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:533
    • 页面总数:20
    • 分类总数:96
    • 标签总数:212
    • 评论总数:63
    • 浏览总数:274202

    | | |
    | |  Z-Blog PHP