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 属性选择器...: E[att] 选择器 : E 指的是 HTML 标签元素 , att 指的是标签中定义的属性 ; 该选择器的作用是 , 将定义了 att 属性的 E 标签都选择出来 ; E[att=“val”] 选择器
属性选择器 属性选择器可以根据元素的属性和属性值来选择元素,CSS3中新增的3种属性选择器: E[att^=value]属性选择器是指选择名称为E的标记中的att属性,att属性值包含前缀为value...E[att$=value]是选择属性值包含后缀为value的子字符串 E[att*=value]是选择属性值包含value的子字符串,例如:div[id*=section] 表示匹配包含id属性,且id...⚠️以上三种属性选择器E都是可以省略的,若省略则表示可以匹配满足条件的任意元素。 关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。...临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器,选择器中的两个元素有同一父亲,而且第二个元素必须紧跟第一个元素。...(老大跟老二,老二跟老三) 普通兄弟选择器(~):该选择器使用‘~’来链接前后两个选择器,选择器中的两个元素有同一父亲,但第二个不必紧跟第一个元素。
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。 CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用。...元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值; 属性:值; } 在元素类型匹配时,就可以使用类似正则的匹配方法。...伪元素选择器 通常,CSS中会有一些已经定义好的元素选择器,我们通过 选择器:伪元素{属性名:值} 来定义。 ...常用的伪选择器有: 1 first-line 伪元素选择器:某个元素的第一行 2 first-letter:某元素的首字母 3 after:某元素之后插入内容,如 :before{ content...required:支持这个属性,并且定义了required的 optional:支持requried属性,但是没有定义的 1 2 3 <style type=
一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div...[class=mydemo] 3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置; div[class*=mydemo] 4、E[attr^=val] 表示的属性值里包含val...字符并且在“开始”位置; div[class^=mydemo] 5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置; div[class$=demos] 二、伪类选择器...除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。...可改变选中文本的样式; ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念 CSS3
属性选择器 1E[att$=”val”]{ sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。 1 18 列表项目 18 列表项目 19 20 21 属性选择器的权值是
以前学习css的时候总是看见一个效果就看一下,没有系统的学习,最近看见了这个css3的网站,打算系统学习下,今天要跟大家分享的是css3的选择器。 我们先来看一张选择器列表图: ?...一、基本选择器 基本选择器参考传送门:http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素...CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有.../css3/attribute-selectors IE6不支持属性选择器 CSS3的属性选择器主要包括以下几种: 1、E[attr]:只使用属性名,但没有确定任何属性值; .demo a[id] {background...3、CSS3的:nth选择器 这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法: 1):fist-child
CSS3新增选择器 属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值...,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[...attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的 E[attr="value"]指定了属性名,并且有属性值,而且属值中包含了value 结构性伪类选择器 E:...注意:子节点不包含文本节点 伪类选择器 E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件...E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection
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
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素。...div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以...max属性值来限定),且实际输入值在该范围内时使用的样式。...input::placeholder{ color:red; } 至此,CSS(CSS3)选择器的简单说明笔记就到这里结束了,其实这些内容包含了CSS(CSS3)世界的绝大多数常用选择器,当然,...参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。
我把CSS3分为了:CSS选择器、CSS属性、CSS模型框架三部分。...---- 第一部分:基本选择器 ---- 比如最常用的类选择器,就是根据类(class属性),来选择HTML元素。html元素内添加class属性,css中前置个点即可。...类选择器根据class属性来匹配,同理 id选择器根据id属性来匹配,但优先级比类选择器高。...---- 第二部分:属性选择器 ---- 以上类、id、标签选择器都是最基本的选择器,最为常用。其次就是属性选择器。...首先概括一下概念吧,属性选择器就是根据属性来选择HTML元素,来应用CSS样式(比如你的某个属性符合我的要求,我就给你应用样式)。
一、CSS3选择器分类 1.基本选择器 2.层次选择器 3.伪类选择器 1)动态伪类选择器 2)目标伪类选择器 3)语言伪类选择器 4)UI元素状态伪类选择器 5)结构伪类选择器 6)...否定伪类选择器 4.伪元素 5.属性选择器 二、基本选择器语法 这里着重说一下群组选择器(selector1,selector2,…,selectorN),是将有相同样式的元素分组在一起,...如表单中文本输入框,html元素选中和未选中状态,这几种状态是CSS3种常用状态伪类选择器;详细语法如下: 对于IE6~8使用UI元素伪类选择器需要使用特别的方法处理。... 五、属性选择器 CSS3新增了3个属性选择器,可以对标签进行过滤,更容易定位HTML标签。 下面是CSS3的属性列表。...CSS3遵循了惯用的编码规则,通配符的使用提高样式表的书写效率 常见通配符如下: 属性选择器方法详解 创建简单的HTML结构,设置默认样式: <!
一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari...(Eelement ~ Siblings) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号...隔开 语法格式:元素1, 元素2, …, 元素n (Eelement1, Element2, …, Elementn) 兼容性:IE6+、FireFox、Chrome、Safari、Opera 二、属性选择器...Element[attribute] 概念:选择所有带有attribute属性元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera Element[attribute...(大多用在表单元素上) :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框) 兼容性:IE9+、FireFox、Chrome、Safari、Opera 2、CSS3
1.CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。...display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 在CSS2中引入了一些属性选择器...,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。...要正常使用:disabled选择器,需要在表单元素的HTML中设置“disabled”属性。 11.CSS3选择器 :checked选择器 在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。...在CSS3中,我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。... (3)ID选择器 ID选择器以“#”开头,然后接一个自定义的ID名。HTML所有的标签都支持ID选择器,只要在标签中定义id属性就行了。...CSS3在CSS2的基础上新增了3个属性选择器,分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。...三个新增的选择器和已定义的E[attr]、E[attr=”value”]、E[attr~=”attr”]、E[attr|=”value”]共同构成强大的HTML属性过滤器。 <!...结构伪类选择器是CSS3新设计的选择器,TA利用HTML的树状结构实现元素选择,可以减少class属性和id属性的定义。
ul> 我是标题 核心;给html标签设置相应的css属性...2.选择器可以使用标签名称/id名称/class名称 给所有选择器选中的标签设置属性 兄弟选择器: 我是超链接 我是段落 我是标题 我是段落 我是段落 我是段落 核心:给指定选择器后面紧跟的那个选择器选中的标签设置属性...(h1~p)是给指定选择器的后面的所有选择器设置属性。 序选择器: 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 我是项目 属性选择器
权重 权重为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...:active :focus 元素状态伪类: :enabled :disabled :checked :focus 属性选择器:[属性] 元素[属性][属性] 元素[属性=“
属性选择器 1.1. 属性存在性选择器 1.2. 属性值直接匹配选择器 1.3. 属性值正则匹配选择器 2. AMCSS——基于HTML属性的CSS模块化技术 3....属性选择器 The CSS attribute selector matches elements based on the presence or value of a given attribute...属性存在性选择器 语法: [attr] Represents elements with an attribute name of attr. 示例: <!...属性值直接匹配选择器 语法: [attr=value] Represents elements with an attribute name of attr whose value is exactly...属性值正则匹配选择器 语法: [attr^=value] Represents elements with an attribute name of attr whose value is prefixed
developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors 然后是场景: 此处需要将所有包含overflow: scroll行内样式(也就是元素的style属性内写样式
css04.css 1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9...love 其值为me 29 30 属性选择器 1 补充示例 31 属性选择器 2 补充示例 32 属性选择器 3 补充示例 33 属性选择器 4 补充示例... 34 属性选择器 5 补充示例 35 属性选择器 6 补充示例...36 属性选择器 7 补充示例 37 38 39 发布者:全栈程序员栈长,转载请注明出处:https
因此,CSS3 新增了一个动画属性animation。...与过渡属性transition属性不同的是,CSS3 的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步, 实现更为复杂的动画效果。...CSS3中通过animation实现动画和transition实现动画非常类似,都是通过改变元素的属性值来实现动画效果的。...CSS3动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性: animation-name,主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes...在CSS3中就是通过@keyframes属性来实现这样的效果的。
领取专属 10元无门槛券
手把手带您无忧上云