css3选择器
1、基本选择器
（1）通配符选择器（*）
* {
marigin: 0;
padding: 0;
}
（2）标签选择器 如div p li
p{
background-color: grey;
color: orange;
}
(3) 类选择器（.class）
.important {
font-weight: bold;
color: yellow;
}
(4)多类名 选择器
p.items {
color: red;
}
（5）id选择器
#first {
background: lime;
color: #000;
}
（6）群组选择器
.first, .last {
background: green;
color: yellow;
border: 1px solid #ccc;
}
2、复杂选择器
（1）后代选择器
.demo li {
color: blue;
}
（2）子元素选择器
ul > li {
background: green;
color: yellow;
}
（3）兄弟元素选择器
li + li {
background: green;
color: yellow;
border: 1px solid #ccc;
}
（4）通用兄弟选择器
.active ~ li {
background: green;
color: yellow;
border: 1px solid #ccc;
}
3、CSS3属性选择器
[attribute] [target]选择所有带有target属性元素
.demo a[href][title] {
}
[attribute=value] [target=-blank]选择所有使用target="-blank"的元素
/**选择了.demo下id="first"的a元素 **/
.demo a[id="first"] {
}
/**选择了.demo下id="first"，且拥有title属性的a元素 **/
.demo a[id="first"][title] {
}
[attribute^=value] a[src^="https"]选择每一个src属性的值以"https"开头的元素
a[href^="mailto:"] {
}
[attribute$=value] a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素
a[href$="png"] {
}
[attribute*=value] a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素 元素值匹配。
a[title*="site"] {
}
E[attribute|=value]
img[src|="figure"] {
}
<img src="figure-0.png" alt="图1">
<img src="figure-1.png" alt="图1">
<img src="figure-2.png" alt="图1">
E[attribute~=value]
a[class~="links"] {
}
<a href="" class="links item">hangge.com</a>
4、动态伪类选择器
a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/
a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/
a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/
5、UI元素状态伪类选择器
- <input type="text"/> 有 enable 和 disabled 两种状态，前者为可写状态后者为不可写状态
- <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。
-
input[type="text"]:disabled { } /** 下面对所选中的的复选框设置样式 **/ input[type="checkbox"]:checked { }
5、CSS3伪类选择器
:nth-child(n) p:nth-child(2)选择每个p元素是其父级的第二个子元素 父类的2个元素要是标签，不是则不匹配。
.demo li:nth-child(3) {
}
/** 选择.demo下所有偶数位置的li子元素（2,4,6...） **/
.demo li:nth-child(even) {
}
/** 选择.demo下第5个位置起的所有li子元素（5,6,7...） **/
.demo li:nth-child(n+5) {
}
/** 选择.demo下前5个li子元素（1,2,3,4,5） **/
.demo li:nth-child(-n+5) {
}
/** 选择.demo下从1起，隔3取1的所有li子元素（1,5,9...） **/
.demo li:nth-child(4n+1) {
}
:nth-last-child(n) p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
.demo li:nth-last-child(3) {
}
/** 选择.demo下倒数第2个起偶数位置的li子元素（倒数第2个,倒数第4个...） **/
.demo li:nth-last-child(even) {
}
/** 选择.demo下倒数第5个位置起的所有li子元素（倒数第5个,倒数第6个...） **/
.demo li:nth-last-child(n+5) {
}
/** 选择.demo下最后5个li子元素（倒数第1,2,3,4,5） **/
.demo li:nth-last-child(-n+5) {
}
/** 选择.demo下从最后1个起，隔3取1的所有li子元素（倒数第1,5,9...） **/
.demo li:nth-last-child(4n+1) {
}
:last-child p:last-child指定只有选择每个p元素是其父级的最后一个子级。
.demo li:last-child {
}
:first-child p:first-child指定只有当<p>元素是其父级的第一个子级的样式
.demo li:first-child {
}
E:only-child
.demo p:only-child {
}
E:empty
p:empty {
display: none;
}
- E:first-of-type：类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
- E:last-of-type：类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
- E:nth-of-type(n)：类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
- E:nth-last-of-type(n)：类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
- E:only-of-type：类似于 E:only-child，只不过它选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素
6、否定伪类选择器
匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器。
input:not([type="submit"]) {
border: 1px solid red;
}
7、CSS3伪元素选择器
是一个行内元素，需要转换成块:display:block float:**position:。
注意： Before 与 after
必须添加content,哪怕不设置内容，也需要content:””。
E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、
E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
:first-letter p:first-letter选择每一个<P>元素的第一个字母或者第一个汉字
/** 首字下沉 **/
p::first-letter {
font-size: 56px;
float:left;
margin-right:3px;
}
:first-line p:first-line选择每一个<P>元素的第一行
/** 比如说改变每个段落的第一行文本的样式 **/
p::first-line {
font-weight:bold;
}
:before p:before在每个<p>元素之前插入内容 使用contant插入内容
.clearfix::before {clear: both;}
:after p:after在每个<p>元素之后插入内容
::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
p::selection {
background: red;
color: #fff;
}
posted on
