CSS三种常用选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS三种常用选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS的优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被引擎收录

CSS三种导入方式

就近原则，哪种样式距离修饰内容近，就选择那个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--内部样式-->
        h1{
            color:chartreuse;
        }
    </style>
</head>
<body>
<link rel="stylesheet" href="style.css">
<!--行内样式：在标签内编写style属性-->
<h1 style="color: aqua">hello,world!</h1>
</body>
</html>

外部样式两种写法
链接式：

<link rel="stylesheet" href="style.css">外部样式

导入式：

<style>
        @import url("style.css");
    </style>

选择器：选择页面某一个，或者某一类元素

标签选择器：会选择这个页面所有标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器会对统一标签进行选择-->
    <style>
        h1{
            color: #27c52e;
            background: aqua;
            border-radius: 34px ;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>好好学习</h1>
<h1>天天向上</h1>
<p>hello,world</p>
</body>
</html>

类选择器：可以复用。形式为：英文状态下点加类名加大括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qingjiang{
            color: aqua;
        }
        .kuangshen{
            color: blue;
        }
    </style>



</head>
<body>
<h1 class="qingjiang">好好学习</h1>
<h2 class="kuangshen">好好学习</h2>
<h3>好好学习</h3>

</body>
</html>

id选择器：全句唯一，不可复用。形式为：英文状态下井号加ID名加大括号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#qingjiang{
    color: brown;
}
    </style>
</head>
<body>
<h1 id="qingjiang">世上无难事</h1>
<h1 >世上无难事</h1>

</body>
</html>