CSS学习之基本选择器

最新推荐文章于 2024-08-18 23:31:20 发布

qq_45821482

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量110

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_45821482/article/details/128938018

版权

本文介绍了CSS中四种基本的选择器类型：标签选择器用于选中特定类型的元素，类名选择器通过指定的类名来设置样式，ID选择器基于元素的唯一ID来应用样式，而通配符*可以作用于所有元素。此外，还提到了这些选择器的优先级顺序：ID选择器>类名选择器>标签选择器>通配符。

摘要由CSDN通过智能技术生成

1.标签选择器

常用格式：标签名{ }

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h2{
        color: red;
    }
</style>
<body>
    <h2>CSS学习</h2>
</body>
</html>

这样h2标题中的CSS学习就变成红色

2.类名选择器

格式：.类名{ }

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .first{
        color: red;
    }
</style>
<body>
    <h2 class="first">CSS学习</h2>
</body>
</html>

这样h2标题中的CSS学习就变成红色

3.id选择器

格式：#id名{ } 每个标签最多只能有一个idl

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #first{
        color: red;
    }
</style>
<body>
    <h2 id="first">CSS学习</h2>
</body>
</html>

这样h2标题中的CSS学习就变成红色

4.通配符

格式：*{ }选中页面所有的标签

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        color: red;
    }
</style>
<body>
    <h2>CSS学习</h2>
</body>
</html>

这样h2标题中的CSS学习就变成红色

其中，这四种选择器优先级为id选择器>c类名选择器>标签选择器>通配符