CSS选择器的应用于区分

最新推荐文章于 2023-03-11 23:42:47 发布

RaoDuty

最新推荐文章于 2023-03-11 23:42:47 发布

阅读量215

点赞数 1

分类专栏：成长过程文章标签： css css3

本文链接：https://blog.csdn.net/qq_42724864/article/details/104649883

版权

成长过程专栏收录该内容

49 篇文章 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：孩子  在类型中的第几个应用数学

RaoDuty

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的应用于区分

学习CSS中，我们会学到很多中CSS选择器，那么我们如何记住，并区分，什么时候使用什么样的选择器呢，在这里我整理了CSS常见的选择器，以及知识点，方便大家使用1.ID选择器CSS: #elem{}HTML:ID= 'elem' 注意：1.在一个页面中，ID值是唯一的 2.命名范围，字母 _ -数字（命名的第一位不能是数字） 3.命名方式，驼峰式，下...
复制链接

扫一扫

专栏目录