前端css选择器

一时失言乱红尘 2022-08-31 10:00 209阅读 0赞

# 简单选择器： #

### 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，可以把一个选择器的权重暂时提高到最高，且不能被修改