CSS的选择器-2.2-id选择器和类选择器

最新推荐文章于 2023-04-02 15:12:45 发布

say hi.

最新推荐文章于 2023-04-02 15:12:45 发布

阅读量421

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108144791

版权

1.什么是id选择器
id是指我们可以在HTML标签上设置一个id属性值
id属性的特点是一个HTML文档中，是唯一的，不能重复
格式为 #id { property : value ;… }
含义：可以选中页面中含有id属性的值的元素，从而给其增加样式
例如

华为5G技术

注意：命名id时，（即属性的写法）
id名中间不能有空格，否则，是一个非法的id定义
且不能以数字开头
也不能包含 & @ 这类字符
但可以是文字 ，比如

哈哈哈哈

小例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        #title ,#title2 {
            color: red;
        }
        #哈 {
            color: aqua;
        }
    </style>
</head>
<body>
    <h1 id="title">我是出镜率很高的h1</h1>
    <h2 id="哈">哈哈哈哈</h2>
    <h2 id="title2">我是出镜率不高的h2</h2>
</body>
</html>

2.什么是类选择器？
格式 .class { property : value ; …}
类选择器中的类指的是class属性
有相同class属性值的都会被选中
class与id相比不具有唯一性
class属性的值通常以字母开头中间不能有空格

类选择器可以和元素选择器组合使用(一会举个例子)
例如：

华为5G技术

小例子2: 挺好的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        /* #title ,#title2 {
            color: red;
        }
        #哈 {
            color: aqua;
        } */
        .title {
            color: blue;
        }


        .phone {
            font-size: 30px;
        }

        /* 类选择器可以和元素选择器组合使用
        p.phone  中间没有空格，紧挨着 */
        p.phone {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="title">我是出镜率很高的h1</h1>
    <h2 id="哈">哈哈哈哈</h2>
    <h2 id="title2">我是出镜率不高的h2</h2>
    <div class="title">华为5G技术</div>


    <!-- 类选择器可以和元素选择器组合使用,怎么个组合方式 -->
    <div class="phone">P40</div>
    <div>路由器</div>
    <div>智慧屏</div>
    <div class="phone">Mate40</div>
    <p class="phone">nova</p>
</body>
</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的选择器-2.2-id选择器和类选择器

1.什么是id选择器id是指我们可以在HTML标签上设置一个id属性值id属性的特点是一个HTML文档中，是唯一的，不能重复格式为 #id { property : value ;… }含义：可以选中页面中含有id属性的值的元素，从而给其增加样式例如华为5G技术注意：命名id时，（即属性的写法）id名中间不能有空格，否则，是一个非法的id定义且不能以数字开头也不能包含 & @ 这类字符但可以是文字，比如哈哈哈哈小例子1：
复制链接

扫一扫