CSS选择器原理及使用

{CSS选择器是在设置HTML样式时，经常用到的。对于选择器的熟练掌握运用也可以使网页制作速度和网页优化大大提高。

一、基本选择器

1、通用选择器（通配符）*{}

（通配符我们常用于css样式重置）

2、标签选择器 （以HTML标签＋{} 例如 ：div{} ）

3、类选择器（class选择器）通过给标签自定义class属性控制标签的样。对于自定义class名称需要注意的是class名称的可读性语义（例如：.top-nav{}）

4、id选择器  其用法与class选择器类似，在级别上高于class选择器，多用于Java Script 中。

5、交集选择器  使用方法与字面意思相同 例如

6、并集选择器 这个就比较容易理解了 （例如：#box,p,.abc,h3 {} 其中#box、p、.abc、h3为同级标签）

二、层次选择器

1、后代选择器 标签之间后代选择器以空格隔开  表示其 子代 孙代 和其他后代标签（例如：div p{}）

2、子代选择器 标签之间中间大于号连接  相对于后代选择器范围较小 只包括子代 （例如：div > p {}）

3、相邻兄弟选择器 只能控制标签的下一个同级兄弟标签及其里面的内容  标签之间 + 连接（例如：div+ p{}控制div后面的第一个同级元素）

4、通用兄弟选择器 控制与其同级的标签 类似于我们所说的（表哥表姐）标签之间 ~ 连接（例如：div ~ p{}）

三、属性选择器 （通过标签所带属性名和属性选择标签）

1、[attr] 属性选择器用的是中括号[] ,选中带attr属性的元素

2、[attr = val ]  选中 属性=val 的元素 

3、[attr ^= val ] 选中 属性以 val 开头的 元素

4、[attr $= val ]  选中 属性以 val 结尾的 元素

5、[attr *= val ] 选中 属性包含 val 的元素

6、[attr ~= val ] 选中 属性中有一个val的元素，适用于多个class的元素（其中val必须为单独的）

7、[attr |= val ]  选中 属性值为val或以-隔开的元素 

四、伪类选择器

①、伪类之超链接

1、a:link  未访问时的

2、a:visited 访问过的（可用于其他标签）

3、a：hover 鼠标经过的 （可用于其他标签）

4、a:active 激活时的

②、伪类之子元素

1、选择第一个元素

E:first-child  第一个E元素,这个E元素必须是第一个子元素

E:first-of-type 第一个E类型元素,这个E元素不必是第一个子元素

2、选择最后一个元素

E:last-child 最后一个E元素,这个E元素必须是最后一个子元素

 E:last-of-type 最后一个E类型元素,这个E元素不必是最后一个子元素 

3、选择第 n 个元素

从前往后数

E:nth-child(n)  选择第n个E元素

E:nth-of-type(n)  选择第n个E类型的元素

从后往前数

E:nth-last-child(n)  选择第n个E元素

E:nth-last-of-type(n)  选择第n个E类型的元素

4、选择唯一一个元素

E:only-child E必须是盒子里的唯一子元素

5、选择没有子元素的

 E:empty 选择没有子元素的元素

③、伪类之表单

1、可用状态（:enabled）

2、禁用状态 （:disabled）

3、选中状态 （:checked）

4、选中获取焦点的input元素 （:focus）

④、其他伪类选择器

1、：first-letter （例如：p:first-letter）选择每一个

元素的第一个字母 

2、：first-line （例如：p:first-line）选择每一个

元素的第一行

3、：before （例如：p:before）在每个

元素之前插入内容

4、：after （例如：p:after）在每个元素之后插入内容

以上就是我们经常碰到的一些选择器。根据每个选择器的优缺点选择最实用的选择器，这样就可以提高我们的网页制作速度，在熟练掌握之后再考虑其性能之间的优化，