HTML&CSS基础-常用选择器

　　　　　　　　　　HTML&CSS基础-常用选择器
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰
一.html源代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        
        <style type="text/css">
            /*
             * 
             * 元素选择器:
             *    作用:
             *         通过元素选择器可以选择页面种所有指定元素
             *     语法:
             *         标签名称 {}
             * 
             * 案例如下:
             *         为页面中的所有的p元素，设置一个字体颜色为红色;
             *         将h1元素设置为黄色;
             * 
             * */
            p{
                color: red;
            }
            
            h1{
                color: yellow;
            }
            
            /*
             *id选择器: 
             *     作用:
             *         通过元素的id属性值选中唯一的一个元素,即id是不可用重复的哟~
             *     语法:
             *         #id属性值{}
             * 
             *     案例如下:
             *         将id为p4的标签字体大小设置为50px.
             * 
             * */
            #p4{
                font-size: 50px;
            }
            
            /*
             * 
             * 类选择器:
             *     作用:
             *         class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
             *         通过元素的class属性值选中一组元素
             *     语法:
             *         .class属性值{}
             * 
             * 案例如下:
             *         将p2类属性标签颜色修改为蓝色
             *         将p1类属性标签字体大小设置为50px
             * */
            .p2{
                color:blue;    
            }
            
            .p1{
                font-size: 50px;
            }
            
            /*
             * 选择器分组(并集选择器):
             *     作用:
             *         通过选择器分组可以同时选择多个选择器对应的元素
             * 
             *     语法:
             *         选择器1，选择器2，选择器N{}
             * 
             *     案例如下:
             *         为id为p3,class为p5且是h1的比钱，同时设置一个背景颜色为浅绿色
             * 
             * */
            #p3,.p5,h1{
                background-color:chartreuse ;
            }
            
            /**
             * 通配符选择器:
             *     它可以用来选张页面的所有元素
             * 
             *  语法:
             *         *{}
             * 
             * 案例如下:
             *         将所有标签均设置为深紫色
             *
             *  *{
             *      color: darkviolet;
             *  }
            
            /**
             * 复合选择器:
             *     作用:
             *         可以选中同时满足多个选择器的元素
             *     语法:
             *         选择器1选择器2选择器N{}
             * 
             * 案例如下:
             *         为拥有class为p6的span元素设置一个颜色背景为红色
             * 
             * 
             */
            span.p6{
                background-color: red;
            }
            
            /**
             * 对于id选择器来说，不建议使用复合选择器,为什么？
             *         对于具体id标识的元素没有必要使用复合选择器，因为咱们通过id就能确认到唯一的一个元素了，选择整个文档的p标签需要将所有的p标签拿到手后再使用id过滤起步多此一举么？
             */
            p#p4{
                background-color: yellow;
            }
        </style>
    
    </head>
    <body>
            
            <h1 id=p3 class="p5">《登高》</h1>        
            
            <p>风急天高猿啸哀，</p>
            
            <p class="p2 p1">渚清沙白鸟飞回。</p>
            
            <p>无边落木萧萧下，</p>
            
            <p id="p4">不尽长江滚滚来。</p>
            
            <p class="p2 p1">万里悲秋常作客，</p>
            
            <p class="p2">百年多病独登台。</p>
            
            <p class="p6">艰难苦恨繁霜鬓，</p>
            
            <span class="p6">潦倒新停浊酒杯。</span>
    </body>
</html>
二.浏览器打开以上代码渲染结果
posted @ 2017-01-03 17:06 尹正杰阅读(483) 评论(0) 编辑收藏举报
刷新页面返回顶部
尹正杰

HTML&CSS基础-常用选择器

公告
