CSS3选择器兼容_CSS3选择器不兼容_css3选择器 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【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 属性选择器

7002 0

css3 选择器

以前学习css的时候总是看见一个效果就看一下，没有系统的学习，最近看见了这个css3的网站，打算系统学习下，今天要跟大家分享的是css3的选择器。我们先来看一张选择器列表图： ?...一、基本选择器 基本选择器参考传送门：http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素...CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有.../css3/attribute-selectors IE6不支持属性选择器 CSS3的属性选择器主要包括以下几种： 1、E[attr]：只使用属性名，但没有确定任何属性值； .demo a[id] {background...3、CSS3的：nth选择器这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child

5331 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

4412 0

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

2253 0

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以...]{ background-color:red; ] /*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素*/ 三.结构性伪类选择器...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

5492 0

CSS3关系选择器、属性选择器

属性选择器 属性选择器可以根据元素的属性和属性值来选择元素，CSS3中新增的3种属性选择器： E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value...⚠️以上三种属性选择器E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。...2.兄弟选择器(+、~) 兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素。...临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器，选择器中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。...(老大跟老二，老二跟老三) 普通兄弟选择器(～):该选择器使用‘～’来链接前后两个选择器，选择器中的两个元素有同一父亲，但第二个不必紧跟第一个元素。

9892 0

CSS3选择器详解

一、CSS3选择器分类 1.基本选择器 2.层次选择器 3.伪类选择器 1）动态伪类选择器 2）目标伪类选择器 3）语言伪类选择器 4）UI元素状态伪类选择器 5）结构伪类选择器 6）...如表单中文本输入框，html元素选中和未选中状态，这几种状态是CSS3种常用状态伪类选择器；详细语法如下：对于IE6~8使用UI元素伪类选择器需要使用特别的方法处理。...使用js库，选用内置已兼容UI元素伪类选择器的js库或框架，任何在代码中引入它们并完成想要的效果，由Keith Clark 编写的Selectivizr脚本是一个不错的选择。... 五、属性选择器 CSS3新增了3个属性选择器，可以对标签进行过滤，更容易定位HTML标签。下面是CSS3的属性列表。...CSS3遵循了惯用的编码规则，通配符的使用提高样式表的书写效率常见通配符如下：属性选择器方法详解创建简单的HTML结构，设置默认样式： <!

2K1 0

CSS3常用选择器

一、基本选择器 子元素选择器 概念：子元素选择器只能选择某元素的子元素语法格式：父元素 > 子元素（Father > Children）兼容性：IE8+、FireFox、Chrome、Safari...（Eelement ~ Siblings）兼容性：IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号...二、属性选择器 Element[attribute] 概念：选择所有带有attribute属性元素兼容性：IE8+、FireFox、Chrome、Safari、Opera Element...元素（只用于单选按钮和复选框）兼容性：IE9+、FireFox、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念：选择属于其父元素的首个子元素的每个.../选择器的每个元素语法格式：父元素:not(子元素/子选择器) （Father:not(Children/selector)）兼容性：IE9+、FireFox、Chrome、Safari、Opera

8272 0

CSS3选择器大全

，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。...3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...7.CSS3 结构性伪类选择器—last-child :last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。...在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。...13.CSS3选择器 :read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素的样式。

7211 0

CSS3选择器（全部）

CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。...1，基本选择器 （1）标签选择器(类型选择器) 统一定义常用标签的基本样式。 2，组合选择器 （1）包含选择器 包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点。 <!...CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。...结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。

7291 0

css3选择器篇

标签选择器： <!...类选择器： <!...id选择器和class选择器： <!...2.选择器可以使用标签名称/id名称/class名称给所有选择器选中的标签设置属性兄弟选择器: <!...(h1~p)是给指定选择器的后面的所有选择器设置属性。序选择器: <!

4824 0

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

2801 0

css3在IE下兼容

原文地址：http://blog.csdn.net/bingqingsuimeng/article/details/44201433 做前端的同学都应该听说或者用过，是一段脚本，可以让ie实现css3里的圆角和阴影效果...css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-css3.htc，允许你在ie下去使用css3的部分东西。...ie-css3的使用方法很简单，在你需要使用css3的样式里加入behavior: url(js/ie-css3.htc);就可以了（括号里是ie-css3.htc的地址） ie-css3.htc

1.1K4 0

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字符串新增结构伪类选择器

5623 0

CSS(CSS3)选择器（1）

这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。...在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器，通过元素类型，class或id匹配一个或多个元素。...（例如每个段落的第一个字，或者某个元素之前生成的内容） 5、组合器，这里不仅仅是选择器本身，还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。 6、多用选择器，这些也不是单独的选择器。...这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

67910 0

CSS3之flex兼容写法

今天还是变谈CSS3里的flex怎么处理兼容的 flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题...那就不好用了，今天咱们就说下如果写flex才能保证兼容性。 flex之所以有兼容性。...webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */} 2.子元素的兼容写法...这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的，所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下，个别不兼容的移动设置才会识别，哪些是旧的语法，你懂的。...所以上面的兼容写法应该是这样的才对 .box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /*

1.5K1 0

常用的CSS3选择器

目录一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。二、关系选择器 1.子代选择器（>）子代选择器主要用来选择某个元素的第一级子元素。...2.兄弟选择器（+、~）兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。...（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

4.1K2 0

CSS(CSS3)选择器（2）

该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以...]{ background-color:red; ] /*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素*/ 三.结构性伪类选择器...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

9836 0

CSS3高级选择器用法

CSS3的高级选择器在开发中还是蛮有用的，下面我们来看一下都有哪些高级选择器。...1、相邻兄弟选择器 作用：匹配指定元素的相邻【下一个】兄弟元素语法：由 + 号来充当连接符，如 选择器1+选择器2 示例：html代码如下 .../ul> 我们用相邻兄弟原则器选择id为p1的元素下面id为u1的元素，给它背景设置为红色 #p1+#u1{ background:#f00;} 效果如下： 2、通用兄弟选择器...作用：匹配到某元素【后面的】【所有指定】兄弟元素语法：由~充当结合符，如 选择器1~选择器2 示例：我们用通用兄弟选择器选择id为p1的元素后面所有的ul元素，将其背景设置为红色 #p1~ul{...，在CSS3中，所有的伪元素选择器，全部使用两个冒号。

6095 0

css3选择器高级部分

序选择器; <!...1.什么是属性选择器?...[attribute^=value] CSS3代表了开头是value就行，其他的不管 [attribute~=value] CSS2代表了被空格隔开的包含value的就行 [attribute*=value...] CSS3代表了只要包含value就行了 ?...通配符选择器： <!

3121 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭