CSS选择器的应用于区分

待我称王封你为后i 2023-07-11 05:50 14阅读 0赞

学习CSS中，我们会学到很多中CSS选择器，那么我们如何记住，并区分，什么时候使用什么样的选择器呢，在这里我整理了CSS常见的选择器，以及知识点，方便大家使用

## 1.ID选择器 ##

CSS: \#elem\{\}  
HTML:ID= ‘elem’  
注意：1.在一个页面中，ID值是唯一的  
2.命名范围，字母 \_ -数字（命名的第一位不能是数字）  
3.命名方式，驼峰式，下划线式，短线式  
驼峰式：searchButton（小驼峰） 第二个字母大写（常用）  
SearchButton（大驼峰） 两个单词的首字母都是大写  
短线写法：Search-button(W3C 推荐写法)  
下划线写法：search\_button  
快捷创建：div \#div1 +tab键  
例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #div1{ 
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #div2{ 
            background-color: blue;
        }
        #div3{ 
            background-color: brown;
        }
        .dog{ 
            background-color: antiquewhite;
        }
        p.dog{ 
            background-color: black;
        }
    </style>
    <body>
        <div id="div1">
            这是一个块
        </div>
        <div id="div2"> 
            这又是一个块
        </div>
        <div id="div3">又有一个块</div>
    
        <div class="dog">12351241</div>
    </body>
    </html>

## 2.CLASS选择器 ##

css：.elem{}
      HTML:class =“elem”

例子：

.dog{ 
        background-color: antiquewhite;
        } 
        .content{ 
            font-size:30px
        }
        <div class="dog">12351241</div>
        <div class="dog">sadbasdbsa</div>
        <p class="dog content">sa12321</div>

全部都可以应用此类属性  
注意：1.class选择器是可以复用的  
2.可以添加多个class样式  
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序  
4.标签+类的写法: p.dog\{background-color: black;\}

## 3.标签选择器(元素选择器) ##

css：div{}
        html：`<div>`
            使用场景：
            用法1：修改标签原有的属性
            用法2：复杂的选择器中

## 4.群组选择器(分组选择器) ##

css: div,p,span{}
        div,#text,.dog{background :red}
        可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

## 5.通配符选择器 ##

\*\{\} -> div,ul,li,p,h1  
尽量避免使用通配符选择器，因为会给所有的标签添加样式。慎用  
使用场景：  
去掉所有标签的默认样式

## 6.层次选择器 ##

后代：M N:只是寻找M后的N 以及M后的所有N 结构  包括父子的父子
        父子：M > N：寻找M后的N  不包括父子的父子 只有一层关系，不关系后代
        兄弟：M ~ N:当前M后的所有N标签，就是M~N 之间的标签
        相邻：M + N：当前M相邻的N标签  只会选择后面相邻的一个标签

## 7.属性选择题 ##

M[attr]  M元素选择指定为attr属性的集合
      完全匹配：  M[attr=value]    M元素选择指定为attr属性和value值的集合
      部分匹配：  M[attr*=value]    M元素选择指定为attr属性并且包含值为value的集合
      起始匹配：  M[attr^=value]    M元素选择指定为attr属性并且起始值为value的集合
      结尾匹配：  M[attr$=value]     M元素选择指定为attr属性并且结束值为value的集合
      组合匹配：  M[attr1][attr2]     M元素选择满足多个属性的集合

## 8.伪类选择器 ##

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加
        
    M（选择器）：伪类{}
    
    ：link    访问前的样式（只能添加给a标签）
    ：visted  访问后的样式（只能添加给a标签）
    ：hover   鼠标移入时的样式（可以添加给所有的标签）
        div{
        width: 200px;
        height: 200px;
        background: red;
    }
    div:hover{
        background: blue;
    }  鼠标移入时由红色变为蓝色
        ：active  鼠标按下时的样式（可以添加给所有的标签）
    
        注意：如果四个伪类都生效的，一定要注意顺序：L V H A
             一般网址值这样设置：a{}a:hover
             例子：a{color:gray;}
                a:hover{color red}
    
    :after   通过伪类的方式给元素添加一些文本内容 例：div:after{content: "world";}  在div中内容后面添加内容world
    :before  通过伪类的方式给元素添加一些文本内容 例：div:before{content: "world";}  在前面添加内容
        注：为了方便添加的文本进行单独的属性
            例：div：after{content："world"; color:red;}    
    :checked   用于选择框 选择过后改变属性
    :disableed 只有不能操作是，才有次类样式
    :focus 输入光标的样式
    
    结构性伪类选择器
        ：nth-of-type（）
        例：li:nth-of-type(2){background: red;}
                列表li中第2列应用样式 （1）第一项  （2）第二项 （n） 代表0~无穷大  （2n）（2n+1）更换换色
        ：nth-child（）
            :first-of-type 第一个
            :lsat-of-type 最后一个
            only-of-type 只有一个时的样式
    
        ：nth-of-type（）和：nth-child（）的区别
            type：类型
            child：孩子  在类型中的第几个应用数学