前端css选择器

简单选择器：

1. 元素选择器：

/* 元素选择器 */
        p{color: red;}

2.id选择器

 /* id选择器 */
        #red{color: red;}

3.类选择器，一个元素可以有多个类

 /* 类选择器 */
        .redclass{color: red;}

4.通配选择器

 /* 通配选择器 */
        *{color: red;}

---

复杂选择器：

1.        交集选择器，两个选择器直接连接

  /* 选择div且class为red的元素,如果有元素选择器需要放在最前面*/
        div.red{
            color: red;
        }

        并集选择器，两个选择器用，连接

 /* 设置h1元素和 class为div的元素的样式*/
        h1,div{
            color: red;
        }

2.     子元素选择器，父元素>子元素

 div>p{
            color: red;
        }
div>p>span{
            color: red;
        }

        后代元素选择器，祖先元素   后代元素

 div span{
            color: red;
        }

        后一个兄弟选择器，前一个兄弟+后一个兄弟（紧邻）

 h1+p{
            /* 只对p生效 */
            color: red;
        }

        后面兄弟选择器，前一个~后面所有兄弟

h1~p{
            /* h1后面的所有p都生效 */
            color: red;
        }

3.属性选择器：

元素选择器[属性名]：含有属性名

元素选择器[属性名="属性值"]：含有属性名且包含属性值

元素选择器[属性名^="值"]：以值为开头

元素选择器[属性名$="值"]：以值为结束

元素选择器[属性名*="值"]：包含值

        p[title]{
            color: red;
        }
        p[title="abc"]{
            color: red;
        }
        p[title^="abc"]{
            color: red;
        }
        p[title$="abc"]{
            color: red;
        }
        p[title*=abc]{
            color: red;
        }

4.伪类选择器：

伪类即不存在的类，特殊的类，用来描述处于某个状态的元素

例如：第一个元素，被点击的元素，鼠标放置在上面的元素等

伪类一般用：开头，

针对所有子元素排序：

• : first-child 第一个子元素
• : last-child 最后一个子元素
• : nth-child(x) 第x个子元素------特殊取值，n：全部，2n/even第偶数个，2n+1/odd第奇数个

针对同一类型子元素排序：

• : first-of-type第一个子元素
• : last-of-type 最后一个子元素
• : nth-of-type(x) 第x个子元素------特殊取值，n：全部，2n/even第偶数个，2n+1/odd第奇数个

:not(),将符合的剔除，:not(:frist-child),从选中的子元素中剔除第一个

ul>li:first-child{
            color: red;
        }
        ul>li:last-child{
            color: red;
        }
        ul>li:nth-child(1){
            color: red;
        }

        ul>li:first-of-type{
            color: red;
        }
        ul>li:last-of-type{
            color: red;
        }
        ul>li:nth-of-type(1){
            color: red;
        }

4.1伪类在超链接a上的使用

:link 超链接a独有的伪类 没有访问过的（正常的链接）

:visited 超链接独有的伪类 访问过的 只能修改颜色（为了隐私）

:hover 通用 表示鼠标移入

:active 通用 表示点击

        a:link{
            color: red;
        }
        a:visited{/*只能修改颜色*/
            color: red;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: red;
        }

5.伪元素

代码中不存在的元素，特殊状态或者位置的元素

:: frist-letter 第一个字母

:: frist-line 第一行 

:: selection 选中的内容

注意：before和after得结合content 才能显示效果

:: before 元素的开始

:: after 元素的结束

        p::first-letter{
            color: red;
        }
        p::first-line{
            color: red;
        }
        p::selection{
            color: red;
        }
        p::before{/*before和after得结合content使用才能有效果*/
            content: "123";
            color: red;
        }
        p::after{
            content: "123";
            color: red;
        }

6.选择器权重：

规则：内联样式>id选择器>类选择器>元素选择器>通配选择器>继承样式

在元素比较的时候，复杂选择器的权重通过加和得到，但始终满足上诉规则。

注意：!important，可以把一个选择器的权重暂时提高到最高，且不能被修改