- 综合排序
- 最热优先
- 最新优先
- 来自专栏韩曙亮的移动开发专栏
【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )
一、CSS3 简介 ---- CSS3 是在 CSS2 基础上进行扩展后的样式 ; 在 移动端 对 CSS3 的支持 要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ; PC 端老版本浏览器不支持 CSS3 , 尤其是 IE 9 及以下的版本 , 基本无法使用 CSS3 ; CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 二、CSS3 属性选择器权重 ---- CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 ) 本博客中的 权重公式 ; 权重叠加计算公式示例 : 根据下面的 基础选择器 权重 表格 , 进行权重叠加计算 ; CSS 选择器 选择器优先级 - 权重计算 继承父标签的样式 important 权重无穷大 三、CSS3 属性选择器 ---- CSS3 属性选择器 可以 使用特定的 CSS 属性 和 属性值 来 选择 特定 的 HTML 标签元素 ; CSS3 属性选择器
1.4K20编辑于 2023-04-24 - 来自专栏zaking's
CSS(CSS3)选择器（1）
这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 2、属性选择器，通过属性/属性值 匹配一个或多个元素。 3、伪类，匹配处于确定状态的一个或多个元素。 这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。 那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。 #text { font-size: 16px; } /*一个ID名称在文件中必须是唯一的,若是ID名称重复，则可能会出现不可预知的情况，所以一定要避免ID名称的重复*/ 3：.class， 参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
856100发布于 2018-05-02 - 来自专栏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 3、CSS3的：nth选择器 这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child IE6-8浏览器不支持:not()选择器 5、伪元素 CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整
77110发布于 2020-01-15 - 来自专栏zaking's
CSS(CSS3)选择器（2）
该部分主要为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伪元素的用法。
1.2K60发布于 2018-05-02 - 来自专栏河湾欢儿的专栏
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功能强大的属性选择器 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 red; } 4.CSS3 结构性伪类选择器—empty :empty选择器表示的就是空。 13.CSS3选择器 :read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素的样式。
1K10编辑于 2022-09-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-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中新增的3种属性选择器： E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/<em>css</em> ⚠️以上三种属性<em>选择器</em>E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。 关系<em>选择器</em> 1.子代<em>选择器</em>(>) 子代<em>选择器</em>主要用来选择某个元素的第一级子元素。 临近兄弟<em>选择器</em>(+):该<em>选择器</em>使用‘+’来链接前后两个<em>选择器</em>，<em>选择器</em>中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。 (老大跟老二，老二跟老三) 普通兄弟<em>选择器</em>(～):该<em>选择器</em>使用‘～’来链接前后两个<em>选择器</em>，<em>选择器</em>中的两个元素有同一父亲，但第二个不必紧跟第一个元素。
1.4K20发布于 2021-10-22 - 来自专栏全栈程序员必看
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; }*/ /*核心:而
css伪元素选择器有哪些_css3伪选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 伪元素选择器和标签选择器一样，权重为1。 ---- 没有所谓失败，除非你不再尝试！ 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
CSS3选择器01—CSS2.1部分选择器
这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 2、属性选择器，通过属性/属性值 匹配一个或多个元素。 3、伪类，匹配处于确定状态的一个或多个元素。 这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。 那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。 #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字符串 新增结构伪类选择器
【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
一、CSS 引入方式 1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 ) CSS ( Cascading Style Sheets ) 层叠样式表 有 3 种引入方式 : 内联样式 : 用户注册信息</h3> 内嵌样式 : CSS 样式代码 写在 HTML 文档的 <head> 标签中 的 <style> 标签中 ; 适用场景 : 内嵌样式 引入 CSS 样式 适合 单个网页 的样式定义 属性名称1: 属性值1; 属性名称2: 属性值2; 属性名称3: 属性值3; } </style> </head> 外链式 : 将 CSS 样式代码 写在一个单独的 </style> </head> 二、CSS 选择器 1、CSS 基础选择器 CSS 选择器 : 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } 子元素选择器
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号