css3新增伪类

最新推荐文章于 2022-03-03 11:57:58 发布
最新推荐文章于 2022-03-03 11:57:58 发布
阅读量449 收藏
点赞数
li:first-of-type   选择li父元素第一个li子元素

代码及效果如下：

li:last-of-type   选择li父元素最后一个li子元素

代码及效果如下：


li:only-of-type   选择li父元素只有一个li子元素的元素

代码及效果如下：



li:first-child   选择li父元素下第一个元素为li的元素

代码及效果如下：



ZFDcsdn
关注
CSS3 新增伪类有那些？
liuhao9999的博客
03-23 341
（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数 值，也可以接受函数。 （2）elem:nth-last-child(n)作用同上，不过是从后开始查找。 （3）elem:last-child选中最后一个子元素。 （4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。 （5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。 （6）ele.
html四个伪类使用的效果,详解如何使用CSS3伪类选择器：nth-child()【原创】
weixin_29332779的博客
06-05 871
CSS3的出现无疑给前端开发人员带来了巨大的优势，今天我们着重介绍CSS3中一个新出现的强大伪类选择器：nth：child()；为了方便大家理解，我今天会通过展示曾经做过的项目页面，让大家直观清晰的了解这一伪类选择器的功能和使用技巧1.首先大家了解下该伪类的语法法： ：nth-child(an+b)ps:可惜的是该伪类选择器不支持ie浏览器，当要兼容ie浏览器的时候，我们只有每一个li...
css伪类
qq_36631168的博客
11-09 399
CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 元素。 p:nth-child(2) 选择属于其父元素的第二
CSS3新增伪类汇总
热门推荐
小红帽的博客
06-02 1万+
:root 选择文档的根元素，等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 :enabled 选择可用的表单元素 :disabled 选择禁用的表单元素 :checked 选择被选中的表单元素 :after 在元素内部最前添加内容
CSS3 新增伪类
onion_line的博客
03-05 431
    css3新增伪类     :checked 单选框或者复选框被选中p:first-of-type 指定其父元素的首个 p 元素的属性列如：<p>我是第1个p标签</p> <p>我是第2个p标签</p> <p>我是第3个p标签</p> <p>我是第4个p标签</p> p:f
CSS3新增伪类有那些
LuckXinXin的博客
02-18 380
:root 选择文档的根元素，等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 :enabled 选择可用的表单元素 :disabled 选择禁用的表单元素 :checked 选择被选中的表单元素 :after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n :nth-last-child(n).
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
HTML5新增的Css选择器、伪类介绍
09-28
这些HTML5新增的CSS选择器和伪类极大地扩展了CSS的表达能力，让开发者能够更精确地控制页面元素的样式，同时减少了编写CSS的复杂性。通过熟练掌握这些特性，可以创建出更加精致、动态的网页设计。
CSS3新增伪类
衣乌安、随笔
06-04 281
CSS3新增伪类p:last-of-type         选择其父元素的最后的一个P元素p:last-child            选择其父元素的最后子元素(一定是P才行) p:first-of-type        选择其父元素的首个P元素p:first-child           选择其父元素的首个p元素(一定是p才行) p:only-child　　　　选择其父元素的只有一个元素...
css3新增伪类 伪元素
qq_14993591的博客
06-27 430
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .para { .
nth-child的坑 - 不管元素的类型
l13640698113的博客
10-09 654
nth-child的坑 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素. :nth-child(n) / nth-last-child选择器匹配属于其父元素的第 n 个子元素 / 倒数开始数第n个元素，不论元素的类型。 <style> li:nth-last-child(2) { color: red; } li:nth-of-type(2) { colo
css3新特性总结(伪类)
dongbo201413的专栏
04-07 407
css3新增了许多伪类，但是IE8以及更低版本的IE浏览器不支持css3伪类，所以在使用时要是涉及到布局等意象全局的样式，应该多考虑一下。 1.elem:nth-child(n) 这个伪类选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数（如4n-1）。需要注意的是，n是从1开始计算，而不是0。 我们可以使用一个无序列表来测试： ...
CSS3.0新增伪类选择器
若有博文对您有帮助，欢迎点赞关注，收藏评论。
03-03 768
CSS3.0新增伪类选择器结构性伪类选择器根节点子节点奇，偶个节点xn+y个节点UI元素状态伪类选择器浏览器专属的属性在脚本中修改样式 结构性伪类选择器 根节点 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"/> <title> :root伪类选择器 </title>
[CSS]CSS3有哪些新增的伪类
DaftJayee的博客
08-10 521
要求能写出常用的几个就行了，不用全部写 element:first-of-type: 父元素中第一个element元素 element:last-of-type: 父元素中最后一个element元素 element:only-of-type: 父元素中唯一一个element元素 element: :nth-of-type(n): 父元素中第n个element类型的element element:nth-last-of-type(n): 父元素中倒数第n个element类型的element ele
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？...
09-11 283
CSS 选择符： 1.id选择器(# myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[...
Css3新增伪类target
ass_am3的博客
06-17 396
在css3中新增了很多比较好用的伪类，今天给同学们带来一个比较有意思的伪类——:target; 下面我们用一个简单的例子来认识：target伪类。 案例：我们在页面上放置了三个a标签 源代码如下： 样式部分： 这样，就能实现一个功能，当我们依次点击页面上的one,two,three链接之后，下面的数字会依次改变字体大小和字体颜色。 如下图所示： 加入没有这个css3新增的伪类的话，我们要实现类似的功能要用JS，给跳转绑定点击事件，然后...
css3新增的伪类选择器
05-17
CSS3新增了许多伪类选择器，以下是一些常见的示例： 1. :nth-child(n) 选择器：选择父元素下的第 n 个子元素，可以使用公式 an+b 来定义规则。 2. :not(selector) 选择器：选择不符合 selector 的元素。 3. :...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值