前端开发-CSS 基本选择器

基本选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

基础选择器包括：

标签选择器
类选择器
ID选择器
通用选择器

标签选择器

通过标签名选择元素：

　　标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
　　不管标签藏的多深，都能选中
　　选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        /*标签选择器*/
        p {
            color:red;
            font-size:20px;
        }
        span {
                color:yellow;
            }
    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
        <ul>
            <li>
                <p>是的</p>
                <span>
                    真的哦
                </span>
            </li>
        </ul>
    </div>
    <div>
        <div>
            <div>
                <div>
                    <p>我是另外一个段落</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

id选择器

　　# 选中id

　　同一个页面中id不能重复

　　任何标签都可以设置id

　　id命名规范：要以字母开头，可以有数字，下划线，区分大小写

<!--id选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        /*id选择器*/
        #s1{
                color:red;
                }
        #s2{
                font-size:30px;
                }
    </style>
</head>
<body>
    <div id="box">
        <span id="s1">我是id选择器</span>
        <span id="s2">我也是哦</span>
    </div>

</body>
</html>

类选择器

所谓类就是class，class与id非常相似，任何的标签都可以加类，但是类是可以重复的
同一个标签中可以携带多个类，用空格隔开
一定要有”公共类“的概念

<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        /*类选择器*/
        .title{
                color:yellowgreen;
                font-size: 12px;
                }
        .alex{
                color:red;
                }
        .active{
                color:yellow;
                }
    </style>
</head>
<body>
    <div id="box2">
        <h3 id="h" class="title mike tom alex">我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
        <h3 class="title">我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
    </div>

</body>
</html>

　　总结：

不要去试图用一个类将我们的页面写完，这个标签携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用
到底使用id还是用class？尽可能的用class，除非一些特殊情况可以用id

　　原因：id一般是用在js的，也就是说js是通过id来获取到标签

通用选择器

使用*选择所有元素：

* {
        color:black;
}

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style type="text/css">
        .lv{
                color:green;
                }
        .big{
                font-size:40px;
                }
        .line{
                text-decoration:underline;
                }

    </style>
</head>
<body>
        <!--公共类 共有的属性-->
        <div>
            <p class="lv big">段落1</p>
            <p class="lv line">段落2</p>
            <p class="line big">段落3</p>
        </div>

</body>
</html>