CSS的选择器之基本选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*标签选择器*/
    /*p{*/
        /*color:red;*/
    /*}*/
    /*id选择器*/
    #s1{
        color: yellow;
        font-size:18px;
    }
    /*类选择器*/
    .title{
        color:yellowgreen;
        font-size:14px;
    }
    .green1{
        color:green;
    }
    .fon1{
        font-size:30px;
    }
    .xiahuaxian{
        text-decoration: underline;
    }
</style>
<body>

<!--
css的选择器：1 基本选择器  2 高级选择器
 标签选择器
    a.可以选中所有标签
    b.不管标签在哪都能选中
    c.选中的是所有，而不是某一个
 id选择器
    a.同一个页面中id不能重复
    b.任何标签都可以设置id
    c.命名规范要以字母开头，可以有数字，下划线，大小写严格区分
 类选择器(class)
    a.任何标签都可以设置类
    b.类可以重复
    c.类名可以设置多个
    总结
        a.每个标签携带多个类，共同设置样式
        b.类的样式尽可能的小，能够让更多的标签去使用
-->
    <div>
        <p>我是一个段落</p>
    </div>

    <div>
        <span id="s1">123</span>
    </div>

    <div>
        <h3 class="title">我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
        <h3 class="title">我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
        <h3>我是一个三级标题</h3>
    </div>

    <div>
        <p class="green1 fon1">段落1</p>
        <p class="green1 xiahuaxian">段落2</p>
        <p class="fon1 xiahuaxian">段落3</p>
    </div>
</body>
</html>

 

posted @ 2018-11-22 15:32  Nope!!!!  阅读(141)  评论(0)    收藏  举报