css3 伪类选择器

时间:2021-09-24 19:29:10   收藏:0   阅读:138

结构性伪类

demo

<div class="parent">
	<div class="line">aaa</div>
	<div class="line">bbb</div>
	<div class="line">ccc</div>
	<div class="line">ddd</div>
</div>
  1. :first-child --选择第一个元素

    code example
    .line:first-child {background: #289373;} 技术分享图片

|

  1. :last-child --选择最后一个元素

    code example
    .line:last-child {background: #ff1133;} 技术分享图片

|

  1. :nth-child(n) --选择每个元素;:nth-child(n+2) --选择第2个开始的每个元素;

    code example
    .line:nth-child(n+2) {color: #ccc;} 技术分享图片

|

  1. :empty --选择空元素

    demo code example
    <div class="parent">
    <div class="line">aaa</div>
    <div class="line">bbb</div>
    <div class="line">ccc</div>
    <div class="line">ddd</div>
    <div class="line"></div>
    </div>
    .line:empty{
    height: 16px;
    background-color: lavender;
    }
    技术分享图片

|

  1. :only-child() --匹配属于父元素中唯一子元素的.line

    demo code example
    <div class="parent">
    <div class="line">aaa</div>
    <div class="line">bbb</div>
    <div class="line">ccc</div>
    </div>
    <div class="parent">
    <div class="line">ddd</div>
    </div>
    .line:only-child{text-decoration: underline;} 技术分享图片

|

demo

<div class="_parent">
    <div class="line">aaa</div>
    <div class="line">bbb</div>
    <span class="line">pccc</span>
    <div class="line">ccc</div>
    <span class="line">pddd</span>
    <div class="line">ddd</div>
</div>
  1. :nth-of-type(2n) --选择每类(标签)的2n个

    code example
    .line:nth-of-type(2n){border: 1px solid lightgray;} 技术分享图片

|

  1. :nth-last-of-type(2n) --倒数选择每类(标签)的2n个

    code example
    .line:nth-last-of-type(2n){border-left: 3px solid lightskyblue;} 技术分享图片

|

  1. :first-of-type --选择每类(标签)的第一个

    code example
    .line:first-of-type{text-decoration: line-through;} 技术分享图片

|

  1. :only-of-type

    demo code example
    <div class="_parent">
    <div class="line">aaa</div>
    <div class="line">bbb</div>
    <span class="line">pccc</span>
    <p class="line">33333</p>
    </div>
    .line:only-of-type{color: lightcoral;} 技术分享图片

|

  1. :root() --匹配文档的根元素。在HTML标准通用标记语言下的一个应用)中,根元素永远是HTML

    暂时没用过

目标伪类

  1. :target --相关URL#后面指向的元素

    demo code example
    <div class="artivle">
    <div class="nav">
    <a class="item1" href="#item1">item1</a>
    <a class="item2" href="#item2">item2</a>
    </div>
    <div class="content">
    <div id="item1" class="item">item1111</div>
    <div id="item2" class="item">item2222</div>
    </div>
    </div>
    .item:target{
    background: #000;
    color: lightyellow;
    }
    技术分享图片

|

否定伪类

  1. :not() --取反

    demo code example
    <div class="_parent">
    <div class="line">aaa</div>
    <div class="line">bbb</div>
    <span class="line">pccc</span>
    <p class="line">33333</p>
    </div>
    .line:not(.line:first-child){color: lightsalmon;} 技术分享图片

|

UI元素状态伪类

  1. :hover

  2. :visited

  3. :active

    demo code example
    <div class="ui-a">
    <a href="#nav1">item1</a>
    <a href="#nav2">item2</a>
    <a href="#nav3">item3</a>
    </div>
    .ui-a a{text-decoration: none;}
    .ui-a a:hover{border-bottom: 1px solid mediumblue;}
    .ui-a a:visited{color: green;}
    .ui-a a:active{color: red;}
    技术分享图片

|

  1. :enabled

  2. :disabled

  3. :checked

  4. :focus

    demo code example
    <form action="">
    <input type="text" disabled><br/>
    <input type="text" ><br/>
    <input type="checkbox">男
    </form>
    form input:focus{outline-color: red;}
    form input:enabled{border: 1px solid blue;}
    form input:disabled{background: #ccc;}
    form input:checked{outline: 1px solid darkred;}
    技术分享图片技术分享图片

|

  1. ::selection

    暂时没用过

原文:https://www.cnblogs.com/y-y77/p/15305829.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!