CSS级联样式表——选择器

liyang199103031

已于 2022-03-04 11:39:30 修改

阅读量497

点赞数

文章标签： css elementui html

于 2022-03-04 11:37:24 首次发布

本文链接：https://blog.csdn.net/liyang199103031/article/details/123272937

版权

单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /*选择器的优先级 通配符<标签<类=属性<id*/
        #divd{/*ID选择器*/
            background-color: blue;
        }
        [id="divd"]{/*属性选择器*/
            background-color: blueviolet;
        }
        .divc{/*类选择器*/
            background-color: gray;
        }
        div{/*标签选择器*/
            background-color: red !important;
        }
        *{/*通配符选择器*/
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="divd" class="divc" style="width: 100px; height: 100px;"></div>
</body>
</html>

并列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
        }
        .big-box{
            width: 200px;
            height: 200px;
        }
        .box.box1{
            background-color: red;
        }
        .box.box2{
            background-color: yellow;
        }
        .big-box.box1{
            background-color: gray;
        }
        .big-box.box2{
            background-color: blue;
        }
        #box_id.box1{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box_id" class="box box1"></div>
    <div class="box box2"></div>
    <div class="big-box box1"></div>
    <div class="big-box box2"></div>
</body>
</html>

派生选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        strong em{/*标签 和 标签*/
            color: green;
        }
        strong .cls2{/* 标签 和 类*/
            color: blue;
        }
        .cls1 .cls2{/*类 和 类*/
            color: yellow;
        }
        [id] #id2{/*属性 和 ID*/
            color: red;
        }
        #id1 #id2{/*ID 和 ID*/
            color: pink;
        }
    </style>
</head>
<body>
    <p>
        <strong id="id1" class="cls1">
            <em id="id2" class="cls2">
                你好！
            </em>
        </strong>
    </p>
</body>
</html>

分组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style type="text/css">
        input,
        textarea{
            /*outline: none;*//*去掉轮廓*/
            outline-color: green;/*轮廓的颜色*/
            outline-style:dotted;/*轮廓的样式*/
            outline-width: 3px;/*轮廓的宽度*/
        }
    </style>
<body>
    <input type="text">
    <textarea id="text"></textarea>
</body>
</html>

选择器的权重及越级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .divs h1{
            color: red;
        }
    </style>
    <!--
        权重                      值（256进制）
        *                          0
        标签、伪元素                1 
        class、属性、伪类           10
        id                         100
        内联样式                   1000
        !important                 正无穷

        计算机里的正无穷<正无穷 + 1

    -->
</head>
<body>
    <div class="divs">
        <p>
            <h1>你好！</h1>
        </p>
    </div>
    <div class="divs">
            <h1>你好！</h1>
    </div>
</body>
</html>

其他杂项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        <style>//第二种：内部样式表,在head标签内部
        选择器{
            属性名: 属性值;//所有行都要写分号，就算是最后一行
        }
        </style>
    -->
    <style>
        div{
            background-color: cornflowerblue !important;/*强行把该行样式的优先级提升，important的权限是最高的，慎用*/
        }
    </style>
    <link rel="stylesheet" type="text/css" href="index.css"/><!--第三种：外部样式表，rel="stylesheet"必须写-->
        
    
</head>
<body><!--权重（优先级)：内联样式>内部样式>外部样式--><!--有疑问-->
    <div></div><!--第一种：内联样式/行间样式/行内样式-->
    <div id="div1"></div>
    <div class="div2">asd</div>
    <div class="div2">qwe</div>
    <p name="name1">张三李四王五赵六</p>
    <p name="name1">张三李四王五赵六</p>
    <input type="text" tstdnams="" />
    <div></div>
</body>
</html>



/*ID选择器(标签的id属性)*/
#div1{
    width: 100px;
    height: 200px;
    background-color: yellow;
}
/*类选择器(标签的class属性)*/
.div2{
    width: 100px;
    height: 200px;
    color: blueviolet;
}
/*标签选择器(直接在html里面找div标签)*/
div{
    width: 300px;
    height: 330px;
    background-color: blue;
}
/*通配符选择器*/
*{/**号代表所有*/
    background-color: darkblue;
}
/*属性选择器（多用于input）*/
[name="name1"]{
    color: firebrick;
}
[name]{/*不写name等于什么，那么找所有标签有name属性的*/
    color:aquamarine;
}
input[tstdnams]{/*找input有tstdnams的*/
    color: rebeccapurple;
}

liyang199103031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS级联样式表——选择器

单选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫