前端-CSS-2-选择器

基本选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，

某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为

它们设置样式了。 选择器为样式规则指定一个作用范围。

基础选择器包括：

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

标签选择器

ID选择器

类选择器

通用选择器

总结：

<!-- 
        css的选择器：1.基本选择器  2.高级选择器

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

        2.id选择器
            # 选中id

            同一个页面中id不能重复。
            任何的标签都可以设置id  
            id命名规范 要以字母 可以有数字 下划线 -  大小写严格区分  aa和AA


        3.类选择器

        1.所谓类 就是class  . class与id非常相似 任何的标签都可以加类
        但是类是可以重复    归类

        2.同一个标签中可以携带多个类 用空格隔开


        类的使用 能够决定前端工程师的css水平到底有多牛逼？

        一定要有”公共类“的概念


        总结：

        1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
        2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

        玩好了类 就等于玩好了css中的1/2

        到底使用id还是用class？
        答案：尽可能的用class。除非一些特殊情况可以用id

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

     -->

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习myself</title>
        <style type="text/css">
        /*.lv{*/
            /*color: #4cae4c;font-size: 20px;*/
        /*}*/
        /*.lv2{*/
            /*color: #2aabd2;*/
        /*}*/
        /*.lv3{*/
            /*color: #c7254e;*/
            /*text-decoration: underline;*/
        /*}*/

            /*设置公共的 下面直接调用*/
        .big{
            color: #4cae4c;font-size: 20px;
        }
        .lv{
            color: #2aabd2;
        }
        .line{

            text-decoration: underline;
        }


        </style>
</head>
<body>
    <div>
        <!--<p class="lv">The best revenge is massive success. </p>-->
        <!--<p class="lv2">The best revenge is massive success. </p>-->
        <!--<p class="lv3">The best revenge is massive success. </p>-->

        <!--直接调用上面公共的定义的class接口-->
        <!--2.同一个标签中可以携带多个类 用空格隔开-->
        <p class="lv big">The best revenge is massive success. </p>
        <p class="lv">The best revenge is massive success. </p>
        <p class="lv big line">The best revenge is massive success. </p>

    </div>
    <div></div>
    <div></div>
</body>
</html>

posted on 2018-10-20 21:11 foremost 阅读(216) 评论(0) 编辑收藏举报