学习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相当没有内容的空
标签，一般没有什么意义
注意
- 在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往后的元素）
<style>
P~h1{
Background:red;
}
</style>
<body>
<p>p</p>
<h1>h1</h1>
<h1></h1>
</body>
例子
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
网友评论