- 综合排序
- 最热优先
- 最新优先
- 来自专栏韩曙亮的移动开发专栏
【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )
一、CSS3 简介 ---- CSS3 是在 CSS2 基础上进行扩展后的样式 ; 在 移动端 对 CSS3 的支持 要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ; PC 端老版本浏览器不支持 CSS3 , 尤其是 IE 9 及以下的版本 , 基本无法使用 CSS3 ; CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 二、CSS3 属性选择器权重 ---- CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS 特性 ③ ( CSS 优先级 , * 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器 / 伪类选择器 / 属性选择器 0,0,1,0 ID 选择器 0,1,0,0 标签的行内样式 style 属性 1,0,0,0 important 权重无穷大 三、CSS3 属性选择器 ---- CSS3 属性选择器 可以 使用特定的 CSS 属性 和 属性值 来 选择 特定 的 HTML 标签元素 ; CSS3 属性选择器
1.4K20编辑于 2023-04-24 - 来自专栏各类技术文章~
CSS3关系选择器、属性选择器
属性选择器 属性选择器可以根据元素的属性和属性值来选择元素，CSS3中新增的3种属性选择器： E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value ⚠️以上三种属性选择器E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。 关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 2.兄弟选择器(+、~) 兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素。 临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器，选择器中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。 (老大跟老二，老二跟老三) 普通兄弟选择器(～):该选择器使用‘～’来链接前后两个选择器，选择器中的两个元素有同一父亲，但第二个不必紧跟第一个元素。
1.4K20发布于 2021-10-22 - 来自专栏python3
css3 选择器
以前学习css的时候总是看见一个效果就看一下，没有系统的学习，最近看见了这个css3的网站，打算系统学习下，今天要跟大家分享的是css3的选择器。 我们先来看一张选择器列表图： ? 一、基本选择器 基本选择器参考传送门：http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素 /css3/attribute-selectors IE6不支持属性选择器 CSS3的属性选择器主要包括以下几种： 1、E[attr]：只使用属性名，但没有确定任何属性值； .demo a[id] {background 伪类选择器参考传送门：http://www.w3cplus.com/css3/pseudo-class-selector 1、动态伪类 动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来 3、CSS3的：nth选择器 这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child
77110发布于 2020-01-15 - 来自专栏河湾欢儿的专栏
css3选择器
CSS3新增选择器 属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值 开头的 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的 E[attr="value"]指定了属性名，并且有属性值，而且属值中包含了value 结构性伪类选择器 注意：子节点不包含文本节点 伪类选择器 E:target 表示当前的URL片段的元素类型，这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection
59620发布于 2018-09-06 - 来自专栏全栈程序员必看
CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。 [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的，如id="start1",id="start2",id="start3" */ 三.结构性伪类选择器: 28：E:root，匹配文档的根元素，对于HTML文档，就是HTML元素。 input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然， 参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
79520编辑于 2022-07-20 - 来自专栏全栈程序员必看
CSS3 选择器
CSS3选择器分为：结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素 一、结构型伪类选择器 :first-child选择某个元素的第一个子元素； :last-child选择某个元素的最后一个子元素 二、UI元素状态伪类选择器 1、动态伪类（也称为“锚点伪类”） .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow 2、UI元素状态伪类，比如有“:enabled”,”:disabled”,”:checked” 三、否定选择器，比如”:not” input:not([type="submit"]) { border : 1px solid red; } 四、伪元素 CSS中的伪元素有”:first-line”,”first-letter”,”:before”,”:after”，CSS3是在以前的基础上增加了一个”: ”，也就是变成了”::first-line”,”::first-letter”,”::before”,”::after”，另外还新增了一个”::selection”，两个”::”和一个”:”只是CSS3中用来区分伪类和伪元素
40530编辑于 2022-09-14 - 来自专栏Web前端开发
CSS3常用选择器
一、基本选择器 子元素选择器 概念：子元素选择器只能选择某元素的子元素 语法格式：父元素 > 子元素 （Father > Children） 兼容性：IE8+、FireFox、Chrome、Safari 、Opera 相邻兄弟元素选择器 概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素 语法格式：元素 + 兄弟相邻元素 （Eelement + Sibling） （Eelement ~ Siblings） 兼容性：IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号 、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念：选择属于其父元素的首个子元素的每个 Element 元素 兼容性：IE8+、FireFox 、Chrome、Safari、Opera 3、伪元素 Element::first-line 概念：根据 "first-line" 伪元素中的样式对 Element 元素的第一行文本进行格式化
1.1K20发布于 2019-08-23 - 来自专栏全栈程序员必看
CSS3选择器大全
1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 ，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。 如下表所示： 2.CSS3 结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 13.CSS3选择器 :read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素的样式。
1K10编辑于 2022-09-14 - 来自专栏达摩兵的技术空间
css3-not选择器妙用
前言 css3中增加了not选择器，可以用于排除不符合某些规则的元素，下面我从语法，兼容性，可能的实践三个角度更好的学习使用它。 语法 ：not(cssRules) 兼容性 ? .head_nav3{ &:hover li:not(:hover){ opacity:0.5; background:none; } } 寄语 大家觉得可还好？ 参考文档 w3c selector :not 菜鸟教程 css3 not codepen案例：css3-not
56520发布于 2018-08-28 - 来自专栏python3
CSS 3 伪类选择器
======================================================================================= 伪类选择器 ? ? ? input[type="radio"]+label{ border:1px solid #cdc3ae; padding:5px 20px;
82320发布于 2020-01-14 - 来自专栏全栈程序员必看
CSS3选择器详解
一、CSS3选择器分类 1.基本选择器 2.层次选择器 3.伪类选择器 1）动态伪类选择器 2）目标伪类选择器 3）语言伪类选择器 4）UI元素状态伪类选择器 5）结构伪类选择器 6） 3.语言伪类选择器： 根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或与文档关联，不能从CSS指定。为文档指定语言，有两种方法可以表示： <! 如表单中文本输入框，html元素选中和未选中状态，这几种状态是CSS3种常用状态伪类选择器；详细语法如下： 对于IE6~8使用UI元素伪类选择器需要使用特别的方法处理。
</body> </html> 五、属性选择器 CSS3新增了3个属性选择器，可以对标签进行过滤，更容易定位HTML标签。 下面是CSS3的属性列表。 CSS3遵循了惯用的编码规则，通配符的使用提高样式表的书写效率 常见通配符如下： 属性选择器方法详解 创建简单的HTML结构，设置默认样式： <!2.5K10编辑于 2022-09-18 - 来自专栏全栈程序员必看
css3选择器总结
权重 权重为0000： 通用选择器* {} 组选择器h1, h2, p, em, img {} 后代选择器h1 em{} 子代选择器table>tbody>tr{} 分类选择器div.top,header.main {} +相邻兄弟选择器: div.s+p{} 只能选择后面的 ~通用兄弟选择器： div.s~p{} 只能选择后面的 权重为0001： 标签选择器h3 em {} :first-letter每段首字符( css2不兼容，css3兼容) :first-line每行首字符 当:first-letter和:first-line矛盾时优先:first-letter :before :after :content ::selection用户在页面中选中部分(只能改颜色和背景颜色) 权重0010： 类(class)选择器 .special {} 伪类选择器： :link :visited :hover value”] p=[class^=”value”] p=[class*=”value”] p=[class$=”value”] 元素[class~=”value”]匹配class=”c1 c2 c3
50310编辑于 2022-09-14 - </body> </html> （3）ID选择器 ID选择器以“#”开头，然后接一个自定义的ID名。HTML所有的标签都支持ID选择器，只要在标签中定义id属性就行了。 属性选择器 CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。 结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。 [:nth-child(-3)是错误的写法 ,不支持ie6~ie8 ]。来自专栏全栈程序员必看
CSS3选择器（全部）
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。
89110编辑于 2022-09-14
css3选择器篇
标签选择器： <! id选择器和class选择器： <! 2.选择器可以使用标签名称/id名称/class名称 给所有选择器选中的标签设置属性 兄弟选择器: <! (h1~p)是给指定选择器的后面的所有选择器设置属性。 序选择器: <! 5*/ /*{ color: red; }*/ /*p:nth-child(3n+0)/*结果为:0 3 6*/ /*{ color: red; }*/ /*核心:而
CSS3选择器–结构性伪类选择器
： 1）first-line:为某个元素的第一行文字使用样式； 2）first-letter:为某个元素中的文字的首字母或第一个字使用样式； 3）before: 其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。 background-color: #64b0ff; } </style> </head> <body>
p1
p2
p3< ></head><body>
p1
h1
/*增加了h1标签*/p2
h2
/*增加了h1标签*/p3< 3、E:first-child和E:last-child 1）“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。
CSS(CSS3)选择器（1）
这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器，通过元素类型，class或id匹配一个或多个元素。 2、属性选择器，通过属性/属性值 匹配一个或多个元素。 3、伪类，匹配处于确定状态的一个或多个元素。 #text { font-size: 16px; } /*一个ID名称在文件中必须是唯一的,若是ID名称重复，则可能会出现不可预知的情况，所以一定要避免ID名称的重复*/ 3：.class， 参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
css3新增选择器
一、css3之前的选择器 ID选择器 类选择器 包含选择器(E F) 伪类选择器（:link,visited,hover,active,focus,first-child） 伪元素选择器（::first-line ,first-letter,before,after） 通配选择器(.) 属性选择器(foo[name='martin']) 子包含选择器(E>F) 相邻兄弟选择器(E+F) 二、css3新增选择器 新增属性选择器： E[foo^='bar'] 匹配E元素，该元素包含foo属性 开头 E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾 E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串 新增结构伪类选择器
css3选择器高级部分
序选择器; <! <html lang="en"> <head> <meta charset="UTF-8"> <title>20-属性选择器上</title> <style> / 1.什么是属性选择器? DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style 通配符选择器： <!
CSS3新增选择器
都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。 下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下（E表示标签）： 选择器 功能描述 E[attribute] 选取带有指定属性的元素 >
</body> </html> 上面注释逐一放开效果如下： 2.css3结构伪类选择器 结构伪类选择器是css3中新增的选择器，主要作用是通过文档结构的先后关系来匹配特定的元素，从而减少结构代码中ID属性和class属性的定义，使得文档更简洁。 3.UI伪类选择器 css3中共定义了11中UI伪类选择器。如下： 实例如下： <!零基础学习CSS(3)——交集选择器、并集选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器
ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 交集选择器，语法规则：元素选择器 <!
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号