CSS中的高级选择器

最新推荐文章于 2024-04-21 23:12:30 发布
原创 最新推荐文章于 2024-04-21 23:12:30 发布 · 245 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨CSS中不常被使用的高级选择器，包括[target]、[lang|=en]、:invalid和:optional等，揭示如何利用这些选择器增强网页布局和交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在CSS中我们平常所用的选择器为 #id{} .class{} \ *{} \ p\ div,p \div p\div>p\div+p
现在我们还有些比较冷门的高级选择器可以使用如：

[target] 选择所有带有target属性元素
在这里插入图片描述

[lang|=en] 选择一个lang属性的起始值="EN"的所有元素
1
2
:invalid 用于匹配输入值为非法的元素

1
1
:optional 用于匹配可选的输入元素
1
1

CSS:高级选择器
yiXin_Chen的博客
12-22 596
1. 属性选择器 2. 并集选择器 3. 交集选择器 4. 后代选择器 5. 伪类选择器
CSS 高级选择器
weixin_43641202的博客
03-27 573
CSS 高级选择器与简单的文本样式高级选择器层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器属性选择器E【attr】属性选择器E【attr=val】属性选择器E【attr*=val】属性选择器E【attr^=val】属性选择器E【attr$=val】属性选择器 高级选择器 层次选择器 层次选择器是通过 HTML的文档对象模型元素间的层次来选择元素的，主要层次包括后代、父子、相邻兄弟和通用兄弟几种关系，通过它们之间的关系可以快速选定需要的元素。 选择器 类型 功能描述 E F 后代选择
表格、表单和高级选择器
System10010的博客
06-13 391
表格、表单和高级选择器 1. 掌握表格的使用 1.1 表格的基本语法 表格是我们在日常生活用到的非常多的一种数据表现形式。 它的结构清晰、稳定、易于管理，且使用简单。 例如：工资条、后台管理系统各种数据表、考试成绩单、简历模板… <!-- 声明表格 --> <table> <!-- 表格由行和列组成 --> <!-- table row 行 你想要几...
属性选择器
梦寐的博客
08-22 435
    属性选择器 属性选择器            功能描述 E[attr]                选择匹配具有属性attr的E元素 E[attr=val]            选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） E[attr^=val]            选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 E[...
【转载】CSS高级选择器，指定选择对象，非常有意义，转载一下
dowhathowtodo
05-09 218
原文：征服高级CSS选择器译自：Taming Advanced CSS Selectors版权所有，转载请注明出处，多谢！！ CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div...
CSS的高级选择器
Changkaix的博客
03-25 1384
层次选择器 1.后代选择器：两个选择符之间必须要以空格隔开。 例如： ul li{ color:red; } 2.子选择器： li > p{ color:red; } 3.相邻兄弟选择器：选择器active相邻的下一个li的背景变色 例如：.active + li{ background:red; } 4.通用兄弟选择器 ...
CSS——高级选择器
最新发布
qq_60624992的博客
04-21 652
与相邻兄弟选择器使用方法相同，格式有所改变，生效范围有所扩大，只要在同级下方都会生效。通过class属性来引用，被引用后的元素，只有与其相邻的下方的同一个标签生效。此选择器只能写在.css文件当中，引用使用。此选择器与层次选择器类似，不过，其生效条件是必须要有。标签1 不生效，被标签1 嵌套中的 标签2才生效。3）子标签:nth-of-type(){}1）父标签 子标签 ：元素位置的修饰{}2）子标签:nth-child(){}【属性值的匹配可以使用正则表达式】标签名[属性名=属性值]{}
CSS：高级选择器
weixin_50991888的博客
10-12 126
层次选择器 1.后代选择器：在某个元素的后面 祖爷爷，爷爷，爸爸，儿子 2. 代码实现后的结构： 层次选择器 1.后代选择器 2.子选择器 3.相邻弟弟选择器 4.通用选择器 后代选择器 子选择器 body下面的第一代才有 相邻弟弟选择器 同辈（不包括自己） 通用兄弟选择器（不包括自己） ...
css 高级选择器
ximengyun的专栏
05-04 785
1.直接子选择器： 使用类似 body > .intro Sub-Pixel .intro { font-style:italic;} body > .intro { font-weight:bold;} Recipes for Cheese Cheese is a remarkably versatile food,available
CSS高级选择器
Changkaix的博客
03-31 194
1. p:first-of-type{ background: red;} p:first-of-type 选择属性其父元素的首个p元素的每个<p>元素 p:last-of-type{ background: red } p:last-of-type选择属性其父元素的最后p元素的每个p元素 p:only-of-type{ background:red; } p:...
css几种高级选择器
m0_68505386的博客
03-24 726
css的高级选择器主要分为层次选择器和属性选择器两种。 层次选择器主要有：后代选择器，子选择器，相邻兄弟选择器，通用兄弟选择器。 后代选择器如下，样式只针对.a里面的p标签。
css高级选择器和基本选择器
luckyGirlIT的博客
07-05 4862
ID选择器>类选择器>标签选择器 1.层次选择器 *相邻兄弟选择器，只对后面的兄弟有作用，对前面的兄弟没效果。 *相邻兄弟选择器，E+F E不会产生效果效果 2.结构伪类选择器 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点 E F:nth-child(n)在父级里从一个元素开始查找，不分类型 E F:nth-of-type(n)在父级里...
深入解析CSS3高级选择器及其应用
"本文主要介绍了CSS3中的高级选择器，包括属性选择器、结构性伪类选择器和伪元素选择器的使用方法。" 在CSS3中，选择器的扩展大大增强了样式表的灵活性和表现力。以下是关于这些高级选择器的详细说明： ### CSS3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值