晴海小常识分享

晴海小常识分享

当前位置：首页 > 编程笔记 > 正文
已解决

CSS中常用的伪类选择器

来自网友在路上 11038103提问 提问时间：2023-11-22 21:47:43阅读次数： 103

最佳答案 问答题库1038位专家为你答疑解惑

一 、伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

        3、 :nth-child() 选中第n个子元素

                特殊值： n 所有的

                2n或even 选中偶数

                2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似，

—不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

-将符合条件的元素从选择器中去除

以下为代码演示
 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/*去掉项目符号*/ul {list-style: none;}/* 需求一：将ul里的第一个li自动一直设置为红色 *//* ul>li:first-child{color:red} *//* ul>li:last-child{color:blue} *//* ul>li:not(:nth-child(3)){color: green;} *//* ul>li:not(:nth-of-type(3)){color: green;} *//* li:nth-child(1) {color: pink;} *//* li:nth-of-type(1){background-color: red;} */li:not(:first-of-type){font-size: 50px;}</style></head><body><h1>沁园春·雪</h1><h3>毛泽东</h3><ul><span>测试</span><p>北国风光，千里冰封，万里雪飘。</p><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

查看全文

99%的人还看了

相似问题

猜你感兴趣

版权申明

本文"CSS中常用的伪类选择器"：http://eshow365.cn/6-42007-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！

推荐回答

网站内容来自网络，如有侵权请联系我们，立即删除！粤ICP备2023082154号