选择器

选择器的分类
1.基本选择器
  (1)通用选择器
匹配页面上的所有元素
*{
   border:1px solid red;
}
  (2)元素选择器
选取页面上所有的特定类型的元素
p{
color:red;
}
  (3)id选择器
根据元素的id选择特定的元素.
#abc{
color:red;
}
  (4)类选择器
选择页面上所有的具有某一class属性的元素
.abc{
color:red;
}
  (5)属性选择器
[attr]
选择具有attr属性的元素
[attr="value"]
选择属性值等于value的元素
[attr^="value"]
选择属性值开头匹配value的元素
[attr&="value"]
选择属性值末尾匹配value的元素
[attr*="value"]
选择属性值包含value的元素
[attr~="value"]
选择属性值具有多个值时具有value值的元素
2.复合选择器
  (1)分组选择器
selector,selector,selector,...{
...
}
  (2)后代选择器
parent child ...{
...
}
选择parent元素下的所有child元素(不在乎层次,即孙子元素也包括在内)
  (3)子选择器
parent > child{
...
}
选择parent下面所有子child元素(只选择parent下面的第一层,孙子元素不包括在内)
  (4)相邻兄弟选择器
selector1 + selector2 {
...
}
选择selector1的后面的第一个兄弟selector2节点
  (5)兄弟选择器
selector1 ~ selector2 {
...
}
选择selector1的后面的所有兄弟selector2节点
3.伪元素选择器
  ::first-line{
...
  }
  选择块级元素的首行
  ::first-letter{
...
  }
  选择块级元素的首个字母(对中文则是第一个字)
  ::before{
content:"..."
  }
  文本前插入
  ::after{
content:"..."
  }
  文本后插入
  ::selection{
...
  }
  被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式.
  ::placeholder
  匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。(修改input元素的placeholder样式)
4.伪类选择器
  伪类选择器分为4种类型:结构性伪类,UI伪类,动态伪类,其他伪类.
  伪类都需要加上前置的选择器来进行限制,否则没啥调用
  ①结构性伪类
1.根元素选择器
:root
基本没啥用,选个html咩用?
2.子元素选择器 
伪类有4个
(1):first-child/:last-child
选择第一个/最后一个子元素
(2):only-child
选择只有一个子元素的元素的那个子元素
(3):only-of-type
选择只有一个指定类型的子元素的元素的那个子元素
exp:div>p:only-of-type
表示选择div下面只有一个p子元素的div下的那个p元素(div可以有多个子元素)
(4)nth-child(n)
选择第n个子元素
(5)nth-last-child(n)
选择倒数第n个子元素
(6)nth-of-type(n)
选择特定的第n个子元素
exp:div>p:nth-of-type(2)
表示选择div下的第二个p类型的子元素
(7)nth-last-of-type(n)
同(6)倒数的特定的第n个子元素
  ②UI伪类
主要针对表单元素
1.:enable/:disabled
选择启用/禁用的元素
2.:checked
选择被选中的input元素(radio/checkbox)
貌似在chrome53.0.2758.116不管用
3.:default
选择默认状态的元素(比如说一个checkbox初始状态为checked)
貌似在chrome53.0.2758.116不管用
4.:invalid/:valid
选择不合法/合法的input
5.:required/:optional
选择必须填写/非必须填写的input元素
  ③动态伪类
一般对超链接
1.:link
没有访问的状态
2.:visited
访问过的状态
3.:active
激活的状态
4.:hover
鼠标悬停的状态
5.:focus
获得焦点的状态
  ④其他伪类
1.:not()
a:not([href*="baidu"])
表示选择href属性不包含baidu的a元素
2.:empty
选择内容为空的元素
3.:target
当定位到锚点时选择该元素