CSS选择器

样式

A行内样式

style="color:      background:   "

<style>div{
               color

               background

               }

B内部样式HTML内部

C外部样式  另一文件新建css 

优先级A>

语法规则

selector{
     属性：值；

  }

一、基本选择器

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

选择所有元素*

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元素

3.id选择器#id

4.class选择器 .class

特例：结合选择器p.xx

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

6.子选择器selector1>selector2

7.兄弟选择器selector1~selector2只找弟弟

8.选择器组合selector1,selector2

二、伪元素选择器

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

2.首行::first-line

3.在前边插入::before

4.在后边插入::after

三、伪类选择器

1.结构性伪类选择器

:nth-child()

括号里可以是数字n,n从一开始

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

可以是表达式 5n+2 n从1开始

找第一个：nth-child(1)=first-child

找最后一个：last-child=nth-last-child(1）

倒着数：nth-last-child()

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

：nth-of-type()

括号里可以是数字n,n从一开始

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

可以是表达式 5n+2 n从1开始

找第一个first-of-type =nth-of-type(1)
找最后一个last-of-type=nth-last-of-type(1)
倒着数:nth-last-of-type()
既认数字也认类型，找同类型下的第n个元素

2、ui状态伪类选择器
:hover鼠标悬停状态
:focus焦点状态
:checked选中状态

3.其他伪类选择器

not（）

选择器的优先级规则
1、选择器写的越长(越准确)，优先级越高
2、优先级高低 id选择器>class选择器>元素选择器
3、同级别长度下，css代码按照顺序执行，后边的效果会把前边的覆盖
掉。4、终极规则:以上规则适用大部分场景，特殊场景不适用自行测试