CSS选择器

最新推荐文章于 2022-11-02 11:31:52 发布

miku@meow

最新推荐文章于 2022-11-02 11:31:52 发布

阅读量295

点赞数

分类专栏：笔记文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_51847874/article/details/122447616

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

1、关系选择器
1、伪类选择器
1、伪对象选择器
1、属性选择器

元素选择器的优先级> 全局选择器
CSS选择器概述
作用：选择器就是根据不同需求把不同的标签选出来。
选择器分类
选择器分为基础选择器和复合选择器：

基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id选择器和通配符选择器。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，包括：后代选择器、子选择器、并集选择器和伪类选择器等。
基础选择器
1.标签选择器
标签选择器的语法格式如下：
标签名{
属性1:属性值2;
属性2:属性值2;
…
}

定义：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
作用：标签选择器可以把某一类标签全部选择出来，比如：所有的

标签和所有的标签
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签

2.类选择器
类选择器的语法格式如下：
.类名{
属性1:属性值1;
属性2:属性值2;
…
}

注意：
1、类选择器使用"."（英文点号）进行标识，后面紧跟我们自己定义的类名；
2、长名称或词组可以使用中横线来为选择器命名；
3、命名要有意义，并且不要使用纯数字、中文等命名，尽量使用英文字母来表示；
4、可以使用多类名的形式，但标签中的class属性中的多个类名必须以空格分开

3.id选择器
id选择器的语法格式如下：
#id名{
属性1:属性值1;
属性2:属性值2;
…
}

注意：
1、id属性只能在每个HTML文档中出现一次；
2、id选择器和类选择器最大的不同就是使用次数；
3、类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4.通配符选择器
通配符选择器的语法格式如下：
*{
属性1:属性值1;
属性2:属性值2;
…
}

注意：
1、通配符选择器不需要调用，自动就给所有的元素使用样式

复合选择器
1.后代选择器
后代选择器的语法格式如下：
元素1 元素2{ 样式声明 }

注意：
1、元素1和元素2中间用空格隔开；
2、元素1是父级，元素2是子级，最终选择的是元素2；
3、元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
3、元素1和元素2可以是任意的基础选择器

2.子选择器
子选择器的语法格式如下：
元素1 > 元素2{ 样式声明 }

注意：
1、元素1和元素2中间用大于号隔开；
2、元素2必须是亲儿子，其孙子、重孙等都不归它管

3.并集选择器
并集选择器的语法格式如下：
元素1,元素2{ 样式声明 }

注意：
1、元素1和元素2中间用英文逗号隔开；
2、并集选择器通常用于集体声明，为多组标签定义相同的样式

4.伪类选择器
链接伪类选择器
a:link ——选择所有未被访问的链接
a:visited ——选择所有已被访问的链接
a:hover ——选择鼠标指针位于其上的链接
a:active ——选择活动链接，即鼠标按下未弹起的链接

注意：
1、为了确保生效，要按照LVHA的顺序声明：:link :visited :hover :active

:focus伪类选择器
:focus伪类选择器的语法格式如下：
input:focus{
background-color:blue;
color:red
}

注意：
:focus伪类选择器用于选取获得焦点的表单元素

<span> 标签被用来组合文档中的行内元素。

<a href="#">超链接</a>

全局选择器

在 head 和head 之间 加入
<style>
        *{
            color: red;
        }
    </style>

ID 选择器
id不可以相同，可以和class相同用#

总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        color:;  字体颜色


        2、选择器
        作用：选中写样式的元素
        语法：
        选择器{}

        1）基础选择器
        ①全局选择器  通用选择器
        *{}

        选中范围：所有元素

        ②元素选择器
        HTML的所有元素去掉尖括号
        p{}
        div{}
        a{}
        b{}
        i{}
        span{}
        img{}
        input{}
        h1{}

        选中范围：所有指定的元素

        ③类选择器
        利用HTML的class属性（除了br没有，其他元素都有class属性）
        类名可以重复，一个class可以取多个属性值，用空格隔开

        class命名规则：
        a、可以包含数字、字母、_、-
        b、不可以以数字开头
        c、起有意义的名字
        d、区分大小写

        .className{}

        a{}  元素选择器
        .a{}  类选择器
        b{}   元素选择器
        .b{}  类选择器
        c{}   不合法
        .c{}  类选择器
        img{}  元素选择器
        .img{}  类选择器

        ④ID选择器
        利用HTML的id属性（除了br，其他元素都有id属性）
        ID名字具有唯一性

        #IDName{}
        ID命名规则同class命名规则

        2）选择器的优先级
        行内样式>ID选择器>类选择器>元素选择器>全局选择器
   权重： 1000     100     10         1

        3）HTML通用属性
        除了br，其他元素都有的属性
        ①title：鼠标悬停给予提示
        ②style：行内样式
        ③class：类选择器
        ④id：ID选择器


        */


        /*全局选择器*/
        *{
           color: red;
        }

        /*元素选择器*/
        div{
            color: green;
        }
        span{
            color: hotpink;
        }
        /*类选择器*/
        .box{
            color: purple;
        }
        .box1{
            background-color: gainsboro;
        }

        /*ID选择器*/
        #box{
            color: gold;
        }



    </style>
</head>
<body>
<div class="box box1" id="box" style="color: plum;" title="hhhh">div</div>  //行内部分
<div>div</div>
<div>div</div>
<p class="box">p</p>
<p>p</p>
<p>p</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<span class="box">span</span>
<span>span</span>



</body>
</html>