HTML——选择器

最新推荐文章于 2022-07-01 21:11:35 发布

Sushi_Law

最新推荐文章于 2022-07-01 21:11:35 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/Sushi_Law/article/details/101042701

版权

选择器

选择器分为标签选择器（元素选择器）,类选择器，id选择器，通配符选择器，伪类选择器，链接伪类选择器，结构（位置）伪类选择器，目标伪类选择器。

标签选择器

标签选择器是指用HTML 的标签名称作为选择器，按标签名称分类，从页面中某一标签指定css样式

`例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            background-color: #333333;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，尽量使用英文字母来表示。

可同时有多个目标为同一类名。多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

id选择器

id选择器使用“#”进行标识，后面紧跟id名。
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
这点和类名选择器不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #div1{
            width: 300px;
            height: 300px;
            background-color: #333333;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

        *{
            padding: 0;
            margin: 0;
        }

伪类选择器

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如：hover，伪类选择器也分为很多不同的种类。