CSS中常用的伪类选择器

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

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

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

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

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>

CSS中常用的伪类选择器相关推荐

css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙撰写时间: 2019年1月19日鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
CSS中常用的几种选择器是哪几种呢？
CSS中常用的选择器: (一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器 (五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素 (一)基本选择器 ...
CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
:is()伪类选择器 :where()伪类选择器
1.1 :is()伪类选择器在日常写代码中,经常遇见重复的同一个元素在不同的标签中的情况,这样我们想要统一写一个这个元素的样式时就会比较麻烦,稍加不注意就会出现错误.例如: li a, artcil ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...

CSS中常用的伪类选择器

CSS中常用的伪类选择器相关推荐

最新文章

热门文章