CSS之选择器的使用区别

最新推荐文章于 2023-09-20 23:59:46 发布

X_C~!

最新推荐文章于 2023-09-20 23:59:46 发布

阅读量143

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/xc_init/article/details/110382621

版权

三大选择器

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: blue;
        }
        p{
            color: aquamarine;
        }
    </style>
</head>
<body>

<h1>zheshi</h1>
<p>标签</p>
</body>
</html>

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .第一 {
        color: aqua;
    }
    .第三 {
        color: beige;
    }
    .第二{
        color: aquamarine;
    }

</style>
<body>
    <h1 class="第一">第一</h1>
<h1 class="第二">第二</h1>
<h1 class="第三">第三</h1>
</body>
</html>

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #xc {
        color: aquamarine;
    }
    #xc1 {
        color: beige;
    }
    #xc2 {
        color: blue;
    }
</style>

<body>

<h1 id="xc">sdadsa</h1>
<h1 id="xc1">sadddd</h1>
<h1 id="xc2">sadddd</h1>
</body>
</html>

注意优先级问题
id选择器 >> class选择器>>标签选择器

使用说明：
标签选择器：选择一类标签标签{}
类选择器：选择所有class属性一致的标签
跨标签 .类名{}
id选择器：全局唯一！ #id{}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

X_C~!

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之选择器的使用区别

三大选择器1.标签选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: blue; } p{ color: aquamarine;
复制链接

扫一扫