css选择器

选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。

要使用css我们首先要在html页面上引用，例如：

然后再在css文件里进行接下来的操作。

在html里可以进行行内样式和内部样式的修改，例如

行内样式修改：

内部样式修改：

而css属于外部样式修改，其中的优先级关系为：行内样式  >  外部样式  =  内部样式

———————————————————————————————————————————

css使用的基本原理可以理解为：

比如：

———————————————————————————————————————————

接下来列举一些css的选择器：

一.基本选择器

1.元素选择器 ：用元素名称做选择

特例：选择所有元素用 *

举例子：

对全页面设置颜色

对页面下div元素设置颜色

2.属性选择器：

 div[id] 有id属性的div元素

 div[id=xx] 有id属性,且id属性值为xx的div元素

 div[id*=xx] 有id属性,且id属性值为包含xx的div元素

 div[id^=xx] 有id属性,且id属性值为以xx开头的div元素

 div[id$=xx] 有id属性,且id属性值为以xx结尾的div元素

举例子：

对div下有id属性,且id属性值为以xx结尾的div元素设置颜色

3.id选择器 ：运用 # 符号

举例子：

选取id为xx的元素设置颜色

4.class选择器：运用 . 符号

举例子：

选取class值为xx的元素设置颜色

特例:结合选择器:

举例子：

对class值为xx的p元素设置颜色

5.包含选择器: selector1 selector2 强调包含

举例子：

对div下面的所有p标签设置颜色

6.子选择器： selector1>selector2 强调父子

举例子：

对div下面的子元素p标签设置颜色

7.兄弟选择器 ：selector1~selector2

只找弟弟：

举例子：

对class值为cc下面所有class值为aa的标签设置颜色

所有弟弟：

举例子：

对class值为cc下面所有标签设置颜色

8.选择器结合： selector1,selector2,selector3,...

举例子：

对p元素、div下包含的a元素、span元素设置颜色

 二.伪元素选择器

1.首字母：   ::first-letter   只能用于块级元素

举例子：

对div元素的首字母设置颜色

2.首行：   ::first-line    只能用于块级元素

举例子：

对div元素的首行设置颜色

3.在前面插入：   ::before

举例子：

在div元素前面插入aaa的文字并设置插入文字的颜色字体大小

4.在后面插入：    ::after

举例子：

在div元素后面插入aaa的文字并设置插入文字的颜色字体大小

三.伪类选择器

1.结构性伪类选择器：

:nth-child()    ：

      括号里可以是数字n

      可以是英文单词，odd代表奇数，even代表偶数

      括号里可以是表达式，比如5n+2

      找第一个用 :nth-child(1)  或者 :first-child

      找最后一个用 :last-child 或者 :nth-last-child(1)

      倒着数用 :nth-last-child()

      只认数字，如果类型刚好符合，则被选中

:nth-of-type()    ：

      括号里可以是数字n

      可以是英文单词，odd代表奇数，even代表偶数

      括号里可以是表达式，比如5n+2

      找第一个用 :first-of-type  或者 :nth-of-type(1)

      找最后一个用 :last-of-type 或者 :nth-last-of-type(1)

      倒着数用 :nth-last-of-type()

      既认数字也认类型，找同类型下的第n个元素

举例子：

寻找第一个div元素设置颜色

2.ui状态伪类选择器：

      :hover  鼠标悬停状态

      :focus  焦点状态

      :checked  选中状态

举例子：

将ul下的li元素设置为鼠标悬停状态并设置鼠标停止选中后的颜色

3.其他伪类选择器：

not()     ：

举例子：

排除ul下class值为java和class值为php的li元素设置颜色

其他选择器的优先级规则

   1.选择器写的越长（越精准），优先级越高

   2.优先级高低  id选择器 > class选择器 > 元素选择器

   3.同级别长度下，css代码按照顺序执行，后边的效果会把前边的覆盖掉

   4.终极规则：以上规则适用大部分场景，特殊场景不适自行测试