ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css3 伪类选择器

2021-09-17 18:36:37  阅读:152  来源: 互联网

标签:css3 code 伪类 -- demo 选择器 child line example


结构性伪类

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;} image

|

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

    code example
    .line:last-child {background: #ff1133;} image

|

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

    code example
    .line:nth-child(n+2) {color: #ccc;} image

|

  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;
    }
    image

|

  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;} image

|

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;} image

|

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

    code example
    .line:nth-last-of-type(2n){border-left: 3px solid lightskyblue;} image

|

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

    code example
    .line:first-of-type{text-decoration: line-through;} image

|

  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;} image

|

  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;
    }
    image

|

否定伪类

  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;} image

|

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;}
    image

|

  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;}
    imageimage

|

  1. ::selection

    暂时没用过

标签:css3,code,伪类,--,demo,选择器,child,line,example
来源: https://www.cnblogs.com/y-y77/p/15305829.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有