学习记录 --【零基础CSS学习】03.ID选择器和类选择器

钟情于山海

已于 2022-05-10 10:43:06 修改

阅读量3.2k

点赞数 1

文章标签： css 学习 html

于 2022-05-10 10:42:55 首次发布

本文链接：https://blog.csdn.net/m0_37612107/article/details/124682655

版权

本文详细介绍了HTML中的ID选择器和类选择器。ID选择器通过#标识，确保页面中每个ID的唯一性，常用于JS交互；类选择器使用.标识，可复用，适合CSS样式定义。示例展示了如何使用ID和类选择器改变元素的字体样式，强调了类选择器在CSS中的重要性。

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

一、ID选择器

二、类选择器

一、ID选择器

1.id属性是标准属性，任何元素都可以有id属性。
2.使用id选择器时，要在id值前加上"#"
3.id选择器只能选中一个元素，同一个页面要保证id的唯一性(不同元素有相同id，也属于非法)
4.定义id时，必须要以字母开头，可以包含数字、下划线等符号。
5.定义id时，不要与标签名相同

示例：给id为“one”的元素字体变成红色，给id为“two”的元素字体设置为30px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #one{
            color: red;
        }
        #two{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li id="one">ID选择器1</li>
        <li id="two">ID选择器2</li>
        <li>ID选择器3</li>
        <li>ID选择器4</li>
        <li>ID选择器5</li>
        <li>ID选择器6</li>
    </ul>
</body>
</html>

二、类选择器

1.class属性是标准属性，任何元素都可以有class属性。
2.使用class选择器时，要在class值前加上"."
3.class选择器可以被多个元素共同使用，不同元素可以有相同的class值
4.同一个元素可以有多个类名，多个类名时要用空格隔开
5.尽量使用类选择器，而不是id选择器。(id一般是js使用，class是css使用)

示例：给类名为“one”的元素字体颜色变红，字体加粗；给类名为“two”的元素字体字号变为30px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .one{
            color: red;
            font-weight: 600;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">我要自学网1</div>
        <p class="one two">我要自学网2</p>
        <span class="one">我要自学网3</span>
    </div>
    <strong class="two">Strong元素下我要自学网</strong>
</body>
</html>