爱陪小樱桃

导航

 

标签(空格分隔): 标签选择器


选择器定义:

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

基础选择器包含:

1.标签选择器
2.类选择器
3.ID选择器
4.通用选择器

标签选择器:

顾名思义通过标签名来选择元素;
例如:

p {
  color: red;
}

将所有的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;*/
            /*font-size:20px;*/
        
        /*}*/
        body{
            color: gray;
            font-size: 12px;

        }
    </style>
</head>
<body>
<!--
css选择器
1.标签选择器:
        标签选择器,可以选中所有的标签,比如div,ul,li,p等等;
        不管标签的藏得多深,都能选中;
        选中的是所有的,不是某一个,所以说这个标签选择器选中的是"共性"的属性,而不是"特性"


-->
    <div>
        <p>我是一个段落</p>
        <ul>
            <li>
                <span>
                    想想吧!!!
                </span>
            </li>
        </ul>

    </div>
    <div>
        <div>
            <div>
                <div>
                    <p>
                        藏得深的段落
                    </p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

id选择器:

通过元素的ID值选择元素:
例如:

#i1 {
  color: red;
}

将id值为i1的元素字体颜色设置为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的选择器</title>
    <style type="text/css">
        /*id选择器*/
        #box{
            color: green;
        }
        #s1{
            color: red;
        }
        #s2{
            color: red;
            font-size:16px;
        }

    </style>
</head>
<body>
<!--
css选择器
1.标签选择器:
        标签选择器,可以选中所有的标签,比如div,ul,li,p等等;
        不管标签的藏得多深,都能选中;
        选中的是所有的,不是某一个,所以说这个标签选择器选中的是"共性"的属性,而不是"特性"
2.id 选择器:
    #选中id
    同一个页面中id不能重复,
    是不是所有的标签都可以加标签呢?任何的标签都可以设置ID,但是ID的命名一定要规范,字母开头后边可以数字,下划线等等;



-->
    <div>
        <p>我是一个段落</p>
        <ul>
            <li>
                <span>
                    想想吧!!!
                </span>
            </li>
        </ul>

    </div>
    <div>
        <div>
            <div>
                <div>
                    <p>
                        藏得深的段落
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="box">
        <span id="s1">123</span>
        <span id="s2">234</span>
    </div>

</body>
</html>

类选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的选择器</title>
    <style type="text/css">
        /*id选择器*/
        #box{
            color: green;
        }
        #s1{
            color: red;
        }
        #s2{
            color: red;
            font-size:16px;
        }
        .titile{
            color: yellowgreen;
            font-size: 12px;
        }
        .aaaa{
            color: red;
        }

    </style>
</head>
<body>
<!--
css选择器
1.标签选择器:
        标签选择器,可以选中所有的标签,比如div,ul,li,p等等;
        不管标签的藏得多深,都能选中;
        选中的是所有的,不是某一个,所以说这个标签选择器选中的是"共性"的属性,而不是"特性"
2.id 选择器:
    #选中id
    同一个页面中id不能重复,
    是不是所有的标签都可以加标签呢?任何的标签都可以设置ID,但是ID的命名一定要规范,字母开头后边可以数字,下划线等等;
3.类选择器:
    所谓类:.,class 与id非常的相似,可以作用任何标签,
    但是id特性是唯一,但是类是可以重复的,叫做归类;
    同一个标签中可以携带多个类;多个类之间用空格隔开;

-->
    <div>
        <p>我是一个段落</p>
        <ul>
            <li>
                <span>
                    想想吧!!!
                </span>
            </li>
        </ul>

    </div>
    <div>
        <div>
            <div>
                <div>
                    <p>
                        藏得深的段落
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="box">
        <span id="s1">123</span>
        <span id="s2">234</span>
    </div>
    <div>
        <h3 id="h" class="titile xiaoma egon aaaa">woshi yige sanji bieti </h3>
        <h3 class="titile">woshi yige sanji bieti </h3>
        <h3 class="titile">woshi yige sanji bieti </h3>
        <h3>woshi yige sanji bieti </h3>
        <h3>woshi yige sanji bieti </h3>
        <h3>woshi yige sanji bieti </h3>
    </div>

</body>
</html>

类选择器:具体的可以查看代码注释里面;

如何正确的使用类选择器及总结:

需求:
段落1:40px,绿色
段落2:绿色,下划线
段落3:下划线,40px

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

        }
    </style>
    <div>
        <p class="lv">段落1</p>
        <p class="l2">段落2</p>
        <p class="l3">段落3</p>
    </div>

</head>
<body>

</body>
</html>

方案2:

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

        }
    </style>
    <div>
        <p class="lv big">段落1</p>
        <p class="lv un">段落2</p>
        <p class="un big">段落3</p>
    </div>

</head>
<body>

</body>
</html>

总结:不要试图,用一个类的页面写完,这个标签要携带多个类共同设置样式,
2.每个类要尽可能的小,有公共的概念,能够让更多的标签使用

  • 总结:
    到底是用id修改样式还是用class呢?
    答案:尽可能的使用class,除非特殊的原因,ID是用来js,也就是说js是通过ID来获取到标签的,后边我们还会说的这个内容;在css中尽量不要用id,(一般的来说,css用class,js用ID,更像是一种约定)
posted on 2019-01-23 23:41  cherry小樱桃  阅读(2616)  评论(0编辑  收藏  举报