CSS3 教程2——CSS选择器

2、CSS选择器

作用：选择页面上的某一个或者某一类元素

整个html属于一个DOM树

2.1、基本选择器（掌握）

  1. 标签选择器

    标签选择器会选中页面中所有该标签的元素

    弊端：所有该标签会被同时修改样式

  2. 类选择器 class

    给标签加上class属性，然后选择器用.class的格式

    好处：可以多个标签归类，是同一个class

    示例：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            .class1{
                color:red;
            }
            。class2{
                color:green;
            }
        </style>
    </head>
    <body>
        <h1 class="class1">
            标题1
        </h1>
        <h1 class="class2">
            标题2
        </h1>
    </body>

</html>

  3. id选择器

    给标签写上id，然后选择器使用#id

    id必须保证全局唯一，适用于精准定位网页上的某些元素

    示例：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            .class1{
                color:red;
            }
            。class2{
                color:green;
            }
            #id1{
                color:yellow;
            }
        </style>
    </head>
    <body>
        <h1 class="class1">
            标题1
        </h1>
        <h1 class="class2">
            标题2
        </h1>
        <h1 id="id1">
            标题3
        </h1>
    </body>

</html>

补充思考：如果多个选择器选中同样的标签，哪个生效？

id选择器 > 类选择器 > 标签选择器

注：想要修改css可以在浏览器的调试状态下测试，完成之后再把代码复制到css文件中

小结：

  • 标签选择器：选择一类标签
  • 类选择器 选择所有class属性一样的标签，跨标签
  • id选择器 全局唯一
  • 优先级：id选择器 > 类选择器 > 标签选择器
  • 三个基本的选择器基本可以暴力解决各种问题

2.2 层次选择器（看到会查）

对html文件的结构，当成一颗树来看

  1. 后代选择器 ： 在某个元素的后面，所有的后代

    /*后代选择器*/
body p{
    background:red;
}

  2. 子选择器 ：元素后面的直接孩子

    /*子选择器*/
body>p{
    background:red;
}

  3. 相邻兄弟选择器 ：同辈的下一个

    /*某个元素下方的一个*/
.active + p{
    background:red;
}

  4. 通用兄弟选择器 ：同辈的下面所有

    /**/
.active~p{
    background:red;
}

2.3 结构 伪类选择器

伪类:加了一些条件，起过滤的作用

比如鼠标移动到位置上就会变色的链接

例子：

ul li:first-child{
    background:red;
}
ul li:last-child{
    background:red;
}

/*选择父级元素的第一个元素，并且使当前元素才生效*/
p:nth-child(1){
    
}

p:nth-of-type(1){
    
}

2.4 属性选择器（常用）

相当于将标签、id、类别选择器结合，功能比较强大

/*
属性名 = 属性值（正则表达式）
= 表示绝对等于
*= 包含
^= 以xx开头
$= 以xx结尾 
*/
a[class="class1"]{
    
}
/*
a[id]  存在id属性的
a[class] 存在class属性的
*/

2.5 选择器的重要性

CSS，JS，JQuery，vue都会用到，甚至写爬虫的时候也会用到，是整个技术栈的核心

posted @ 2021-03-03 16:21  枫听风吟  阅读(89)  评论(0)    收藏  举报