当前位置：首页 > article >正文

HTML之CSS三大选择器

article 2025/2/10 17:08:08

HTML之CSS三大选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            1.元素选择器 根据标签的名字确定样式的作用元素
            语法：标签名{}
            缺点：某些同名的元素不希望使用某些样式，某些不同名的元素希望使用某些样式，都无法协调

            2.id选择器 根据标签的id确定样式的作用元素
            一般每个元素都有自己的id属性，但是在同一个页面中不同标签的id不应该相同，id具有唯一性
            语法：#id值{}
            缺点：id具有唯一性，样式只能作用于一个元素上，不适合用于多个元素
            
            3.class选择器 根据标签的class确定样式的作用元素
            元素的class属性值可以重复，而且一个元素的class属性可以有多个值
            语法：.class属性值{}
            缺点：class属性值可以重复，样式作用范围不确定
        */
        /*自测优先级 id选择器>元素选择器>class选择器*/
        /*加上type修饰范围*/
        input[type="button"] { 
            width: 100px;
            height: 30px;
            background-color: red;
            color: white;
            border: 1px solid;
            border-radius: 5px;
            margin: 10px;
            font-family: '隶书';
        }
        #btn3[type="button"] { /*加上type修饰范围*/
            width: 100px;
            height: 30px;
            background-color: red;
            color: rgb(166, 40, 40);
            border: 1px solid;
            border-radius: 5px;
            margin: 10px;
            font-family: '隶书';
        }
        .shapeClass{
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }
        .colorClass{
            background-color: sandybrown;
            color: white;
            border: 3px solid forestgreen;
        }
        .fontClass{
            font-family: '隶书';
            font-size: 20px;
        }
    </style>
</head>

<body>
    <input id="btn1" type="button" value="按钮1" />
    <input id="btn3" type="button" value="按钮3" />
    <input id="btn2" class="shapeClass colorClass fontClass" type="button" value="按钮2" />
</body>
</html>