首页 > Web开发 > 详细

CSS的选择器之基本选择器

时间:2018-11-22 15:44:48      阅读:139      评论:0      收藏:0      [点我收藏+]
<!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.任何标签都可以设置标签
    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>

 

CSS的选择器之基本选择器

原文:https://www.cnblogs.com/Nopeeee/p/10001358.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!