css3选择器--有助快速编写样式

学习CSS3中的选择器有助于我们更简洁更快编写样式

Paste_Image.png

结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red} /匹配奇数行/
p:nth-child(even){background:red} /匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n)表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n)表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n) 表示E父元素中的第n个字节点，且类型为E，从后向前计算
E:empty 表示E元素中没有字节点。注意：子节点包含文本节点，E:empty相当没有内容的空
标签，一般没有什么意义

注意

1. 在js中数组是0开始计数，而在css3中是从1开始计数的
   2.P:nth-of-type(2)与p:nth-child(2)是有区别的
   P:nth-of-type(2) 找p标签父级下的第二个p元素
   例子

P:nth-of-type(2)

效果图

p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还是p标签
例子

p:nth-child(2)

效果图

两者等价
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
 
补充
transition:1s;是表示过渡的时间
例子

transition:1s;

鼠标划过显示的效果图

Js是这样写前缀

Js是这样写前缀

不同版本的浏览器而设置不同的前缀

不同版本的浏览器而设置不同的前缀

属性选择器：

E[attr]只使用属性名，但没有确定任何属性值
E[attr=”value”]指定属性名，并指定了该属性的属性值
E[attr~=”value”]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔
开，其中词列表中包含了一个value词，而且等号前面的”~”不能不写
E[attr^=”value”]指定了属性名，并且有属性值，属性值是以value开头的
属性选择器例子（指定所有的happy）
例子

指定所有的happy

效果图

属性选择器例子（指定leo的happy）
例子

指定leo的happy

效果图

属性选择器例子（指定old的happy）
例子

指定old的happy

效果图

属性选择器例子（指定value开头的happy）
例子

指定value开头的happy

效果图

属性选择器(2)

E[attr$=”value”]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*=”value”]指定了属性名，并且有属性值，而且属性值中包含了value
E[attr|=”value”]指定了属性名，并且属性值是value或者以”value-”开头的值（比如说
zh-ch）
注意IE7及以上的支持
 
属性选择器例子（指定value结尾的词的happy）
例子

指定value结尾的词的happy

效果图

属性选择器例子（指定value任何一个包含的词的happy）
例子

指定value任何一个包含的词的happy

效果图

属性选择器例子（指定value中的只有那个词和后面带的—的happy）（注意：只以b开头的不可以）
例子

指定value中的只有那个词和后面带的—的happy

效果图

结构伪类(1)

E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child 表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。
注意：子节点不包含文本节点

支持浏览器

两者等价
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)

伪类(2)

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection 表示E元素在用户选中文字时
E::before 生成内容在E元素前

伪类（3）

E::after生成内容在E元素后
E:not(s)表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content属性 
E：target;相当瞄点，把隐藏的相对应显示出来

E：target;

Paste_Image.png

表单的input中的enabled和disabled(原来是设置表单的禁用或者启用的字体颜色或别的)
例子

input中的enabled和disabled

效果图

表单的input:checked(原来是设置表单的按钮勾选时变化位置或者别的)
例子

input:checked

没勾选的效果图

勾选后的效果图

P~h1（p往后的元素）

p

h1

例子

input:checked~span（input往后的元素）

选择其中一个

P:first-line/p:first-letter/p::selection/p:before/p:after(注意before和after都是为了在前面或后面加内容—其中加了display:block;就会自己另起一行；还有p::selection不同浏览器兼容不同，所以需要加前缀)
例子

P:first-line/p:first-letter/p::selection/p:before/p:after

效果图

h1:not(.h2) 除去这个标签：（其余标签都设置背景颜色）
例子

h1:not(.h2)

效果图

注意
input中的radio的name需要统一

name需要统一

往后会继续更新CSS3知识，谢谢大家阅读本人的文章，都祝愿你们心想事成！

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping