伪类选择器

目录

一、概念及作用

二、分类

三、动态伪类

四、结构伪类

五、否定伪类

六、UI伪类

​七、目标伪类

 八、语言伪类(了解即可)


一、概念及作用

1、概念

像类,但不是类,是元素的一种特殊状态

2、作用

选中特殊状态的元素

二、分类

1、动态伪类

2、结构伪类

3、否定伪类

4、UI伪类

5、目标伪类

6、语言伪类

三、动态伪类

1、类型

(1):link  超链接未被访问的状态

(2):visited  超链接访问过的状态  

(3):hover  鼠标悬停在元素上的状态

(4):active  元素激活的状态

(5):focus  获取焦点的元素

注意:

link、visited、hover、active四个有严格的先后顺序;

表单类元素才能使用 :focus伪类

2、举例

(1)代码

        /* 选中的是没有访问过的a元素 */
        a:link {
            color: aqua;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: hsl(323, 100%, 50%);
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover {
            color: cornflowerblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active {
            color: darkgray;
        }
        input:focus {
            color: #7a0ae9;
            background-color: cornsilk;
        }
        select:focus {
            color: coral;
            background-color: #00a6ff;
        }
<a href="https://www.jd.com">京东</a>
<a href="https://www.bilibili.com">哔站</a>
<br>
<input type="text">
<select>
    <option value="one">1</option>
    <option value="two">2</option>
</select>

(2)运行效果

运行效果视频

四、结构伪类

1、代码

/* 选中的是div的第一个儿子p元素 —— 结构1 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构2 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构3 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的后代p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构4 */
/* div p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的后代p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构5 */
/* div p:first-child {
     color: #ff9f7f;
} */
/* 选中的是p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构6 */
/* p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素 —— 结构7 */
/* div>p:last-child {
     color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素 —— 结构8 */
/* div>p:nth-child(3){
     color: #ff9f7f;
} */
/* 选中的是div的偶数个儿子p元素 —— 结构9 */
/* div>p:nth-child(2n){
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素(按照所有同类型兄弟计算的) —— 结构10 */
/* div>p:first-of-type{
     color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素(按照所有同类型兄弟计算的) —— 结构11 */
/* div>p:last-of-type{
     color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素(按照所有同类型兄弟计算的) —— 结构12 */
/* div>p:nth-of-type(3){
     color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素(按照所有兄弟计算的) —— 结构13 */
/* div>p:nth-last-child(3){
     color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素(按照所有同类型兄弟计算的) —— 结构14 */
/* div>p:nth-last-of-type(3){
     color: #ff9f7f;
} */
/* 选中的是没有兄弟的span元素 —— 结构15 */
/* span:only-child {
     color: #ff9f7f;
} */
/* 选中的是没有同类型兄弟的span元素 —— 结构16 */
/* span:only-of-type {
     color: #ff9f7f;
} */
/* 选中的是html根元素 */
/* :root {
     background-color: #99d21e;
} */
/* 选中的是没有内容的div元素 */
div:empty {
     width: 100px;
     height: 100px;
     background-color: #4deded;
}
    <!-- 结构1 -->
    <!-- <div>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div>    -->
    <!-- 结构2 -->
    <!-- <div>
        <span>张三:93分</span>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div> -->
    <!-- 结构3 -->
    <!-- <div>
        <marquee>
            <p>张三:93分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div>  -->
    <!-- 结构4 -->
    <!-- <div>
        <marquee>
            <p>张三:93分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div>  -->
    <!-- 结构5 -->
    <!-- <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三:93分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div> -->
    <!-- 结构6 -->
    <!-- <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三:93分</p>
        </marquee>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
    </div> -->
    <!-- 结构7 -->
    <!-- <div>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
    </div>    -->
    <!-- 结构8 -->
    <!-- <div>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
    </div>   -->
    <!-- 结构9 -->
    <!-- <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div> -->
    <!-- 结构10 -->
    <!-- <div>
        <span>测试</span>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
    </div>   -->
    <!-- 结构11 -->
    <!-- <div>
        <span>测试</span>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
        <span>测试</span>
    </div>  -->
    <!-- 结构12 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三:93分</p>
        <span>测试2</span>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构13 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三:93分</p>
        <span>测试2</span>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构14 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三:93分</p>
        <span>测试2</span>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构15 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
        <span>测试3</span>
    </div>     -->
    <!-- 结构16 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三:93分</p>
        <p>李四:88分</p>
        <p>王五:80分</p>
        <p>赵六:76分</p>
        <p>孙七:74分</p>
    </div>     -->
    <!-- 结构17 -->
    <div></div>

关于n的值:

(1)0或不写:什么都选不中——几乎不用

(2)n:选中所有子元素——几乎不用

(3)1~正无穷的整数:选中对应序号的子元素

(4)2n或even:选中序号为偶数的子元素

(5)2n+1或odd:选中序号为奇数的子元素

(6)-n+3:选中的是前3个(公式中n从0开始计算)

五、否定伪类

1、作用

排除满足括号中条件的元素

2、格式

:not(选择器) 

3、举例

/* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
/* div>p:not(.fail){
       color: red;
} */
/* 选中的是div的儿子p元素,但是排除title属性值以“加油”开头的 */
/* div>p:not([title^="加油"]){
       color: red;
} */
/* 选中的是div的儿子p元素,但是排除第一个儿子p元素 */
div>p:not(:first-child){
    color: red;
}
<div>
    <p>张三:93分</p>
    <p>李四:88分</p>
    <p>王五:80分</p>
    <p class="fail" title="加油,赵六">赵六:56分</p>
    <p class="fail" title="加油,孙七">孙七:54分</p>
</div>

六、UI伪类

1、代码

/* 选中的是勾选的复选框或单选按钮 */
/* 复选框和单选框的背景色是受到限制的 */
input:checked {
    width: 100px;
    height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
    background-color: #f0f068;
}
/* 选中的是可用的input元素,去掉:enabled效果一样 */
input:enabled {
    background-color: #db7474;
}
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>

2、效果

七、目标伪类

1、格式

:target   选中锚点指向的元素

2、举例

(1)代码

div {
    background-color: #e79292;
    width: 400px;
    height: 50px;
}
div:target{
    background-color: #9ddc14;
}
    <a href="#one">去看1</a>
    <a href="#two">去看2</a>
    <a href="#three">去看3</a>
    <a href="#four">去看4</a>
    <a href="#five">去看5</a>
    <a href="#six">去看6</a>
    <div id="one">1</div>
    <br>
    <div id="two">2</div>
    <br> 
    <div id="three">3</div>
    <br> 
    <div id="four">4</div>
    <br> 
    <div id="five">5</div>
    <br> 
    <div id="six">6</div>
    <br>

(2)效果(点击去看4,4的颜色改变)

 八、语言伪类(了解即可)

1、格式

:lang()   根据指定的语言选择元素(本质是看lang属性的值)

2、举例

(1)代码

div:lang(en) {
    color: aqua;
}
/* div:lang(zh-CN) {
    color: burlywood;
} */
:lang(zh-CN) {
    color: #5059ff;
}
    <div>您好</div>
    <div lang="en">html</div>
    <p>前端</p>
    <span>css</span>

(2)运行效果

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值