css3选择器 | 易学教程

CSS_05

阅读更多关于 CSS_05

一.元素的显示方式 display 取值： 1.block 让元素的表现和块级一致 2.inline 与行内元素一致 3.inline-block 与行内块元素一致 4.table 与table一致 5.none 不显示元素，隐藏块级：独占一行，可以设置尺寸，上下外边距有效行内：共用一行，尺寸无效，上下外边距无效行内块：共用一行，可以设置尺寸，上下外边距有效 table：独占一行，可以设置尺寸，尺寸以内容为主二.显示效果 visibility 取值：1.visible 默认值，可见 2.hidden 隐藏不可见问题：visibility:hidden和display:none区别 visibility:hidden；隐藏，元素不脱离文档流，在当前页面不可见，但是占据位置 display:none；隐藏，元素脱离文档流，隐藏后不占位置，后面元素上前补位三.透明度 opacity 取值：0~1 值越小越透明问题：opacity和rgba的区别 rgba只会改变当前颜色的透明度 opacity，元素内部只要元素相关的颜色都会跟着透明四.垂直对齐方式 vertical-align 使用场合 1.表格中 td/th 取值 top/middle/bottom 2.img与文字的排版改变的是img与前后文本的对齐方式取值 top/middle/bottom

css3: css3选择器

阅读更多关于 css3: css3选择器

--------------------css3选择器------------------------- css3属性选择器 ~~属性选择器基本上ie7+都支持，可以相对放心的使用见: www.caniuse.com [attr] [attr=value] [attr*=value] //css3 [attr^=value] //css3 [attr$=value] //css3 [attr~=value] ~~ [title~="foo2"] 匹配 <a title="foo1 foo2 foo3"> 可用[attr*=value]实现同等的选择效果 [attr|=value] ~~ [lang|="en-us"] 匹配 <body lang="en-us" > 可用[attr^=value]实现同等的选择效果伪类选择器：结构伪类选择器和状态伪类选择器 > 结构性伪类选择器 (是否根元素，是否为空，是否不包含某元素，子元素选择器(第一最后 nth 奇偶倒数) :root //根元素 :not() // #box :not(h1) :empty :target ~~~子元素选择器修饰限定作用 :first-child // ul#nav li:first-child 选择作为第一个子元素的li :last-child // ul#nav li:last-child

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

阅读更多关于 css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器祖先元素后代元素{ } 子元素选择器（直接子元素选择器）父元素>子元素{ } 兄弟选择器元素+兄弟元素（紧邻该元素之后的下一个兄弟元素）所有兄弟元素选择器元素~兄弟元素（该元素之后的所有兄弟元素） <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div+article{color:red;} </style> </head> <body> <div>这是div</div> <article>这是article</article> <article>这是article</article> </body> </html> <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div~article{color:red;} </style> </head> <body> <div>这是div</div> <article>这是article</article> <article

css3-属性选择器

阅读更多关于 css3-属性选择器

属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法： element[Attribute_Name] element HTML 元素 Attribute_Name 属性名分类描述示例 E[att] 选择属性为 att 的 E 元素 input[name] E[att = “val”] 选择 att 的属性值为 val 的 E 元素 input[autocomplete=“on”] E[att^=“val”] 选择具有 att 属性且属性值以 val 开头的 E 元素 input[class^=“first”] E[att$=“val”] 选择具有 att 属性且属性值以 val 结尾的 E 元素 input[class$=“last”] E[att*=“val”] 选择具有 att 属性且属性值含有 val 的 E 元素 div[class*=“left”] E[att~=“val”] 选择具有 att 属性且属性值为 val 或val与多个属性值用空格隔开的 E 元素 a[class~=“red”] E[att|=“val”] 选择具有 att 属性且属性值为 val 或属性值之间用 “-” 隔开且属性值val在 “-” 前的 E 元素 a[class|=“red”] 来源： CSDN 作者：蓬莱老仙链接： https://blog.csdn.net

总结CSS3新特性(选择器篇)

阅读更多关于总结CSS3新特性(选择器篇)

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ } [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ : 实际中可以应用在区分本地链接与外部链接,通过判断是否有http\.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]) :first-of-type与:last-of-type: 从字面大概能看出来是干嘛使得,第一个这个类型的/最后一个这个类型的... 如上图所示,每个元素内的第一个p与最后一个p都应用了该样式; :only-of-type: 选择仅仅仅有一个此类型的子元素,不包含子元素的子元素; 可以利用:not来实现反选 :only-child: 选择仅有一个子元素的元素; 如果去掉:only-child前边的p,那个孤独的span也会应用该样式; 同样可以使用:not反选, 简单来说,就是有兄弟节点的p所应用该样式; :nth-child(n)

初探css3

阅读更多关于初探css3

属性选择器：　　1.完全匹配的属性选择器。就是完全匹配的字符串。　[id=article]{ 　　　　　　color:red; 　　　　} 　　2.包含匹配选择器。包含有指定的字符串。　　　　语法是：[attribute*=value] attribute 指的属性名，value 指的是属性值，包含采用“*=”符号。　[id*=article]{ 　　　　　　　　　　color:red; 　　　　　　} 　　3.首字符匹配选择器。只要开头字符符合匹配。　　　　语法是：[attribute^=value] attribute 指的属性名，value 指的是属性值，包含采用“^=”符号。　　　[id^=article]{ 　　　　　　　　　　color:red; 　　　　　　} 　　4.尾字符匹配选择器。只要匹配结尾的字符串。　　　　语法是：[attribute$=value] attribute 指的属性名，value 指的是属性值，包含采用“$=”符号。　　　　　　[id$=article]{ 　　　　　　　　　　color:red; 　　　　　　} 伪类选择器：　　1.before 伪类元素选择器，主要作用是在选择某个元素之前插入内容。　　　　语法：元素标签:before{ 　　　　　　　　content:"插入的内容" 　　　　　　　} 　p

神通广大的CSS3选择器

阅读更多关于神通广大的CSS3选择器

每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「 caniuse.com 」。文章目录：　一、基本选择器　　二、层次选择器　　三、伪类选择器　　四、伪元素　　五、属性选择器一、基本选择器 1. 通配选择器「*」 1 *{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0 2 .demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色 2.元素选择器「Element」 1 body{background:#ccc} //选择body元素 2 ul{background:#fff} //选择列表ul元素 3.ID选择器「#id」 1 html: 2 <div id="demo"></div> 3 css: 4 #demo{do something} 4.类选择器「.class」 1 html: 2 <ul class="demo"></ul> 3

CSS3 :nth-child() 选择器

阅读更多关于 CSS3 :nth-child() 选择器

复习巩固一下css3的nth-child()的用法。2015-10-20 1 W3C上的定义： :nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 2 用法实例　　a 用在对元素的特定的子元素进行处理，　　　　比如p:nth-child(3){color:red;} 意思是设置p元素的第3个子元素的字体为红色。　　b 用于隔行变色　　　　odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。　　　　　　c 使用公式 ( an + b )。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值　　　　　　表示设置1,3,5...基数项颜色为红色 3 jQuery选择器中的:nth-child(even)和:even的区别　　a 使用nth-child(even) 页面效果：从1开始的偶数行背景为红色　　b 使用:even 页面效果：从0开始的偶数行背景为红色来源： https://www.cnblogs.com/hopexi/p/4894111.html

CSS3 动画

阅读更多关于 CSS3 动画

CSS3 动画当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称规定动画的时长 animation-name规定@keyframes动画的名称 animation-duration规定动画完成一个周期所花费的秒和毫秒。默认0 animation-timing-function规定动画的速度曲线。默认ease(作用于关键帧周期比如0%-50%是一个关键帧周期) animation-delay规定动画何时开始 animation-iteration-count规定动画被播放的次数。默认是1 animation-direction规定动画是否在下一周期逆向播放 normal:from到to reverse:to到from alternate:from到to,to到from alternate-reverse:to到from,from到to animation-play-state规定动画是否运行和暂停。默认running animation-fill-mode规定对象动画之外的状态: backwards:from之前的状态与from状态保持一致， forwards:to之后的胡宗南给他与to的状态保持一直 both:综合backwards和forwards 来源：

css3中的选择器

阅读更多关于 css3中的选择器

总结（选择器的详细介绍在总结的下方） 1.关系选择器 > ：选择后代多个为多级后代 (较常用) + ：选择同级的下一个，不能为多级。同时其他选择器的条件也要遵守 ~ ：后面的所有同级，同时其他选择器的条件也要遵守格式：标签或类或id>标签或类或id{ } 2.属性选择器 [属性名] :表示标签中包含属性名的 [属性名 = "属性值"] ：表示标签中包含属性名 = "属性值"的 [属性名 ^= "自定义值"] :表示标签中属性值以自定义值开头的 [属性名 $= "自定义值"] ：表示标签中属性值以自定义值结尾的 [属性名 *= "自定义值"] ：表示标签中属性值中含有自定义值字符的 [属性名~= "自定义值"] ：表示标签中属性值包含独立的自定义值的格式：标签或类或id+[ ]{ } 符合前面的选择器的同时，还要符合[ ]里的条件 3.伪类选择器 (较常用) 用后代选择：站在父元素的角度上选中第1个子元素，且该子元素刚好是父素元素下的第1个元素。 fist-child: 站在父元素的角度上选中最后一个子元素，且该子元素刚好是父素元素下的最后一个元素。 last-child: 选中当前子元素，且该子元素是它父元素下的唯一一个子元素 only-child: 站在父元素的角度上选中第（）个子元素（）中可以使用数字，或者使用odd来底部奇数，用even来代表偶数

订阅 css3选择器