伪类选择器

最新推荐文章于 2022-11-02 23:34:40 发布
最新推荐文章于 2022-11-02 23:34:40 发布
阅读量137 收藏 1
点赞数
分类专栏： css3 前端 文章标签： 伪类选择器 伪元素选择器 层级选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39299249/article/details/102971259
版权
前端 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
css3
5 篇文章 0 订阅
订阅专栏

伪元素选择器

在这里插入图片描述

结构选择器

在这里插入图片描述

UI元素状态伪类选择器

在这里插入图片描述

否定伪类选择器

在这里插入图片描述

层级选择器

E>F 子选择器，

只选择父元素E下的子元素，如下的选择div下的span,结果选择到AAAA，并没有选择到 段落二 ，这是因为 段落二不是div的子元素，而是子元素 p 的子元素
在这里插入图片描述
在这里插入图片描述

E+F 兄弟选择器

E+F兄弟选择器，样式只会在F兄弟上显示，也就是跟E紧邻的下面一个兄弟才会显示出设置的样式；当E元素最紧临的下面的兄弟元素不是要找的F元素，设置的样式就会没人认领，如下的 i+span ,由于i 元素最紧临的下一个兄弟元素是 br，不是span，所以设置的字体为红色没人认领这个样式。而 span+p 找到的是

段落二

，可以看到结果段落二变成了粉色，这是因为css的继承性。子元素会把父元素的一些属性样式继承过来，具体可参考 css的三大特性

在这里插入图片描述
在这里插入图片描述

E~F 通用选择器

与E+F不同的是，只要是E元素下面的兄弟F元素，不管距离远近，样式都会相应显示
在这里插入图片描述

在这里插入图片描述

链接伪类选择器

在这里插入图片描述

加油，你是最棒的
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
伪类选择器的使用和语法
09-19
伪类选择器的使用和语法 摘要：本文将详细介绍伪类选择器的使用和语法，包括伪类选择器的作用、语法、案例演示和注意事项等。 一、伪类选择器的作用 伪类选择器是一种特殊的选择器，可以选中某些元素，并且可以...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
CSS伪类选择器
热门推荐
Jan's的博客
11-01 3万+
CSS的选择器有很多种，有一种选择器，与其他选择器完全不同，我们来讲一讲这个选择器——伪类选择器 伪类选择器 我们伪类选择器有几种，我们来看看第一种 静态伪类: 只能用于超链接的样式 :link超链接点击之前 :visited链接被访问过之后 以上两种样式，只能用于超链接 实际用法还得实际分析，我们来看看这一张图： 这里我写了两个超链接，看我箭头指的文章，你会发现这两个超链接颜色是不一样的 为什么会不一样呢？ 因为第一个链接，是我访问过的网站链接 而第二个链接，我的浏览器没有访问..
jQuery伪类选择器
WangJinPing_的博客
11-01 1566
一、简单伪类选择器 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素（非子元素） :last或last() 选择某元素的最后一个元素（非子元素） :odd 选择某元素的索引值为奇数的元素 :even 选择某元素的索引值为偶数的元素 ...
使用css伪类选择器,css的伪类选择器的使用
weixin_31597759的博客
08-03 1909
伪类选择器，在不同情况下显示的css，伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的，掌握好基础很重要。名字实例说明:linka:link选择所有未被访问的链接:visiteda:visited被访问的链接:activea:active所有活动的链接:hovera:hover鼠标所在的链接:focusInput:focus获得焦点的input的css:f...
[CSS]伪类选择器
luckyboy!的博客
08-21 2万+
伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
CSS伪类选择器详细讲解
最新发布
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
html中结构伪类选择器,结构伪类选择器
weixin_30308101的博客
06-03 1697
属性选择器元素的属性，我们都知道是什么。例如下面代码中type和value就是input元素的属性。属性选择器，顾名思义，就是通过属性来选择元素的一种方式。属性选择器 说明E[attr^="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc开头的任何字符串。E[attr$="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc结尾的任何字符...
html伪类选择器
oxh499780424的博客
09-25 1825
就是在当前标签的前加上想加的内容。他们不是边框，是after，::before。就是响应鼠标滑过的选择器，当你给标签加上的时候，鼠标一滑过就会发生你再里面定义的事件。想让他们实现的内容出现在标签旁的任意位置可以采用父相子绝的定位方式。如果你想让当前容器的兄弟容器实现动作的话，可以使用兄弟选择器。鼠标一滑过就让他出现阴影，并且往上移动。就是当前标签获得焦点的时候触发的。
html伪类选择器Before,css3 伪元素和伪类选择器详解
weixin_31060209的博客
06-07 1105
伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪元素选择器：并不是针对真正的元素使...
结构伪类选择器
m0_62181310的博客
04-04 5784
6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd。5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even。7.:nth-child(-n+i) 选择父元素里前i项子元素。11.选择父元素里边按照不同类型的第n个子元素。2.选择父元素里边的最后1个子元素。1.选择父元素里边的第1个子元素。选择父元素里边的最后1个子元素。3.选择父元素里边第n个子元素。选择父元素里边的第1个子元素。选择父元素里边第n个子元素。...
结构伪类选择器（总结）
12-22
下面将详细阐述每一种结构伪类选择器的作用和用法。 **一类选择器：基于子元素的位置** 1. `:first-child`：选择其父元素的第一个子元素。例如，如果要为每个列表的第一项设置特殊样式，可以使用`li:first-child`...
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
四种css 伪类选择器
12-13
X:after  Example Source Code ：.clearfix:after {content: “”;...:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。X:hover  Example S
Math中的常用方法和toFixed()保留小数
weixin_39299249的博客
12-07 5453
Math.ceil() ——> 向上取整 如: Math.ceil(5.6)=6 Math.ceil(0.45)=1 Math.ceil(-3.14)=-3 Math.floor() ——> 向下取整(效果同于parselnt()取整) 如: Math.floor(5.6)=5 Math.floor(0.45)=0 Math.floor(-3.14)=-4 Math.round(...
JavaScript的三种引入（使用）方式
weixin_39299249的博客
12-02 3973
1.行内式（不推荐使用 2. 内嵌式jS代码 3. 外链式JS代码(推荐) 1）外链式js代码只要引入了html页面，就会在页面打开的时候直接触发 2）新建一个.js后缀的文件,在文件内泻js代码,把写好的js文件引入html页面 如下：分别在head、body、html内引入同级目录下的 index.js、ceshi.js、test.js三个文件——由于通常弓|擎是按着从上往下的顺序来解析网页...
JavaScript发展历史(JS)
weixin_39299249的博客
12-02 1592
JavaScript发展历史(JS) 1.1994年， 网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器——只能浏览页面，浏览器无法与用户互动，当时解决这个问题有两个办法，一个是采用现有的语言,允许许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript...
伪元素选择符
weixin_39299249的博客
11-07 1544
伪元素选择符
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值