CSS3选择器

1、属性选择器

E[attr^="val"] ： 选择匹配元素E,且E元素定义了属性attr,其属性值以val开头的任何字符串。

E[attr$="val"]   :  选择匹配元素E，且E元素定义了属性attr,其属性值以val结尾的任何字符串。

E[attr*="val"]   :   选择匹配元素E，且E元素定义了属性attr,其属性值任意位置包含了val。

2、结构性伪类选择器---root

“root”选择器等同于html元素。

：root{ background:red }   等同于  html{background:red}

3、结构性伪类选择器---not

:not选择器称为否定选择器，可以选择某一元素之外的所有元素。

input：not(type="submit"){ background:red }  将除了submit按钮外的其它按钮背景色设置为红色。

4、结构性伪类选择器 --- empty

:empty 选择器表示的就是空。用来选择没有任何内容的元素。

p:empty{ display:none } 将没有任何内容的p元素隐藏。

5、结构性伪类选择器 --- target

：target 选择器称为目标选择器，用来匹配文档（页面）的url的某个标识符的目标元素。

#brand:target{ background:red }   点击href="#brand"的链接，id=brand的背景色变为红色

6、结构性伪类选择器---first-child

:first-child 选择器表示的是选择父元素的第一个子元素的元素E

:nth-child(n)  选择器用来定位某个父元素的一个或多个特定的子元素。其中n是参数，可以是整数值，可以是表达式（n+1）和关键词（odd、even），参数n的起始值始终是1

:nth-last-child(n) 从某父元素的最后一个子元素开始计算，来选择特定的元素。

:first-of-type 主要用来定位一个父元素下的某个类型的第一个元素。

将class=content中的第一个div元素背景色设置为橙色

.content > div:first-of-type {
  background: orange;
}

:nth-of-type 计算父元素中指定的某种类型的子元素。

将div.content 中的偶数段落和奇数div背景设置为橙色

.content> div:nth-of-type(2n+1),
.content > p:nth-of-type(2n){
  background: orange;
}
/*或者*/

.content > div:nth-of-type(2n-1),
.content> p:nth-of-type(2n){
  background: orange;
}
/*或者*/

.content> div:nth-of-type(odd),
.content> p:nth-of-type(even){
  background: orange;
}

:last-of-type 选择父元素下的某个类型的最后一个子元素。

将div.content 最后一个段落元素背景色设置为橙色

.content> p:last-of-type{
  background: orange;
}

:nth-last-of-type(n)  选择父元素指定的某中子元素类型，起始方向从最后一个元素开始。

:only-child 匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

:only-of-type 用来选择一个元素是他的父元素的唯一一个相同类型的子元素，

:enabled 可用表单元素 

可用输入框设置样式
input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

:disabled 不可用表单元素 ，与 :enabled相反

:checked 选中状态

::selection 伪元素用来匹配突出显示的文本（用鼠标选择文本时的文本）。

选中文本，背景色为橙色，文本成白色

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

:read-only 伪类选择器用来指定处于只读状态元素的样式，就是元素中设置了readonly = "readonly"

:read-write 与 :readonly相反

::before 和 ::after  主要用来给元素的前后插入内同，这两个和content配合使用，使用的场景最多的就是清楚浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}