css（二）- 基本选择器_实验2名称:css选择器和常用属性实验2目标:熟悉css选择器和常用属性的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/TynMhxx/article/details/87556929

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        body {
            color: darkorange;
            /*font-size: 44px;*/
        }
        #box {
            background: antiquewhite;
        }
        #s1 {
            color: blueviolet;
        }
        #s2 {
            color: blue;
            font-size: 22px;
        }
        .gr {
            color: green;
        }
        .big {
            font-size: 40px;
        }
        .und {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!--
        css的选择器：1.基本选择器  2.高级选择器
        基本选择器：
        1.标签选择器
            标签选择器可以选择所有的标签元素，比如div p ul li等
            不管标签藏得多深都可以选中
            选中的是所有的，而不是一个的，所以说是'共性'，不是'特性'
        2.id选择器
            #选中标签
            同一个页面中id不能重复
            任何的标签都可以设置id
            id命名规范：以字母开头，严格区分大小写，可以有数字，下划线_，减号-
        3.类选择器
            1.所谓的类就是class .class与id非常的相似，任何标签都可以加类
            但是类可以重复  归类
            2.同一个标签可以携带多个类，用空格隔开
            要有'公共类'的概念
            总结：
                1.不要试图用一个类完成页面，一个标签要携带多个类，共同设置样式
                2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
                3.尽可能的用class，除非特殊情况可以使用id
                  id一般是用在js上的，js是通过id来获取到标签
    -->
    <div>
        <p>我是一个段落</p>
    </div>
    <div id="box">
        <span id="s1">123</span>
        <span id="s2">234</span>
    </div>
    <div>
        <p class="gr big">段落1</p>
        <p class="gr und">段落2</p>
        <p class="big und">段落3</p>
    </div>
</body>
</html>