码迷,mamicode.com
首页 > Web开发 > 详细

css选择器(基础)

时间:2017-11-05 11:27:59      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:第一个   ber   理解   必须掌握   line   color   方法   练习   组成   

CSS选择器:

    一个样式的语法是由选择器+属性+属性值三部分组成;

 

    到底什么是选择器呢?

 

答:个人直白的理解为:选择一种要对它进行操作的标签的方法就叫做选择器。也就是说选择器就是一种选择元素的方式。

 

    1,元素选择器

    <!DOCTYPE html>

    <html>

    <head>

        <title>选择器</title>

        <style type ="text/css">

            div{

                collor:red;

            }

        </style>

    </head>

    <body>

            <p>长风破浪会有时,直挂云帆济沧海</p>

            <div>会当凌绝顶,一览众山小</div>

            <span>天生我材必有用,千金散尽还复来</span>

    </body>

    </html>

 

    2,id选择器  <!--同一页面不能出现两个相同的id-->

    <!DOCTYPE html>

    <html>

    <head>

        <title>选择器</title>

        <style type ="text/css">

            #neo{

                collor:red;

            }

        </style>

    </head>

    <body>

            <p>长风破浪会有时,直挂云帆济沧海</p>

            <div id="neo">会当凌绝顶,一览众山小</div>

            <span>天生我材必有用,千金散尽还复来</span>

            <div>数风流人物,还看今朝</div>

    </body>

    </html>

 

    3,class选择器   <!--同一页面可以出现两个相同的class-->

        <!DOCTYPE html>

    <html>

    <head>

        <title>选择器</title>

        <style type ="text/css">

            .neo{

                collor:red;

            }

        </style>

    </head>

    <body>

            <p class="neo">长风破浪会有时,直挂云帆济沧海</p>

            <div class="neo">会当凌绝顶,一览众山小</div>

            <span>天生我材必有用,千金散尽还复来</span>

            <div>数风流人物,还看今朝</div>

    </body>

    </html>

 

    4,子元素选择器

            <!DOCTYPE html>

    <html>

    <head>

        <title>选择器</title>

        <style type ="text/css">

            #neo #number1{

                collor:red;

            }       <!--表示选择“id为neo的父元素”下的number1子元素的内容-->

            #neo2{

                color:blue

            }       <!--表示选择“id为neo2的父元素所有内容-->

        </style>

 

    </head>

    <body>

            <div id="neo">

                <p id="number1">长风破浪会有时,直挂云帆济沧海</p>

                <p id="number2">会当凌绝顶,一览众山小</p>

            </div>

            <div id="neo2">

                <p id="subject1">长风破浪会有时,直挂云帆济沧海</p>

                <p id="subject2">会当凌绝顶,一览众山小</p>

            </div>

    </body>

    </html>

 

    5,群组选择器

       

    <!DOCTYPE html>

    <html>

    <head>

        <title>选择器</title>

        <style type ="text/css">

                #number1,#number2,#subject1,#subject2{color:#eee;font-szie:18px;}

            </style>

 

    </head>

    <body>

            <div id="neo">

                <p id="number1">长风破浪会有时,直挂云帆济沧海</p>

                <p id="number2">会当凌绝顶,一览众山小</p>

            </div>

            <div id="neo2">

                <p id="subject1">长风破浪会有时,直挂云帆济沧海</p>

                <p id="subject2">会当凌绝顶,一览众山小</p>

            </div>

    </body>

    </html>

 6,伪类选择器

     1,:after与content属性一起连用,用于定义在对象后面的内容

       语法:选择符::after{content:"文字";}

        选择符::after{content:url(图片路径);}

  2,:before与content属性一起连用,用于定义在对象后面的内容

       语法:选择符::before{content:"文字";}

       选择符::before{content:url(图片路径);}

    3,:first-letter:定义对象内第一个字符的样式。

   说明:*(该伪元素只能用于块级元素。)

 4,:first-line:定义对象内第一行的样式。

  说明:*(该伪元素只能用于块级元素。)

!!!ie6以下版本浏览器不支持伪对象选择器

10:53:17   2017-11-05

以上就是几种常见的选择器,也是css必须掌握的要点,希望大家勤加练习,共同进步!

 

css选择器(基础)

标签:第一个   ber   理解   必须掌握   line   color   方法   练习   组成   

原文地址:http://www.cnblogs.com/zhoudingkun/p/7786835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!