CSS中常见的复合选择器和伪类选择器

一、常见的复合选择器

1、交集选择器

        该选择器是根据多个条件去查找一个元素

        例子：p.main{  }   .main.container{ }

        注意：交集选择器中不可能出现两个元素

2、并集选择器

        该选择器是根据条件去查找多个元素

        例子：.main, .container{ }

3、后代选择器

        该选择器是根据指定元素选择符合要求的后代元素

        例子：ul  li { }

4、子代选择器

        该选择器是选中指定元素中符合要求的子代选择器

        例子：div>a { }

5、兄弟选择器

        相邻兄弟选择器        例子：div+p { }

        通用兄弟选择器        例子：div~p { }

        注意：只选择睡在下铺的兄弟

6、属性选择器

        写法1：[title] { ]

        写法2：[title = "container"] { }

        写法3：[ title^= "a" ] { }    以字母a开头，可以不止一个字母

        写法4：[ title$= "a" ] { }    以字母a结尾，可以不止一个字母

        写法5：[ title*= "a" ] { }    有字母a就可以，可以不止一个字母

二、伪类选择器

1、动态伪类

        a:link { }        超链接特有

        a:visited { }   超链接特有

        a:hover { }

        a:active { }

        input:hover { } 表单类控件特有 

2、结构伪类

        :first-child { }

        :last-child { }

        :nth-child ( an+ b ) { }

        注意：以上三种是按照所有兄弟计算的

        :first-of-type { }

        :last-of-type { }

        :nth-of-type ( an + b) { }

        注意：以上三种是按照同类型中所有兄弟计算的

        除了以上常用的六种结构伪类之外，还有一些不常用的结构伪类

        比如：:nth-last-child() { }

                   :nth-last-of-type() { }

                   :only-child { }

                   :only-of-type { }

                   :root { } 等同于  html { }

                   div:empty { }

3、否定伪类

        :not(){ } 排除满足括号中条件的元素

4、UI伪类

        和表单元素有关

        input:checked { }  被选中的单选框或者复选按钮

        input:enabled { }   可用的表单元素

        input:disabled { }   不可用的表单元素

5、目标伪类

        :target { }  选中锚点指向的元素

6、语言伪类

        :lang(en) { }       

三、伪元素选择器

        伪元素：很像元素，但不是元素，是元素中的某一位置

        例子：div::first-letter { }            div::first-line { }     div::selection{ } 被鼠标选择

                   input::placeloder {  }     

                   p::before{ content:"￥" }  选中p元素最开始的位置，创建子元素  

                   p::after { content:".00" }  选中p元素结束时的位置，创建子元素

四、选择器优先级

简单来说：

行内样式 > ID选择器  >  类选择器  >  元素选择器  > 通配选择器 

详细来说：

    权重计算方式：

        1、ID选择器

        2、类、伪类、属性选择器

        3、元素、伪元素选择器

注意：行内样式大于所有选择器

           !importment 权重最高

五、CSS三大特性

层叠性：

如果发生了样式冲突就会根据选择器优先级来进行样式的覆盖

继承性：

元素会自动拥有父元素祖先元素上的某些样式

优先级：

!impoortment > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承选择器