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

css选择器

时间:2017-09-04 21:19:27      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:优先   示例   链接   :link   margin   gre   介绍   width   tom   

css选择器优先选择:

      <span id=“span” class="span"></span>

      span{color:red;font-size:100px;}

      #span{color:green} id选择器,最先渲染

     .span{color:red} 类选择 器次之

css选择器

       css选择器主要是用于选择需要添加样式的html元素。

       对于css来说,它的选择器有很多,我们主要介绍以下几种:

  id选择器

  Id选择器使用#引入,它引用的是id属性中的值

类选择器

       类选择器使用时,需要在类名前加一个点号(.)

 

属性选择器

  如果需要选择有某个属性的元素,而不论属性是什么,可以使用属性选择器

伪类

  css伪类用于向某些选择器添加特殊效果。

  下面我们介绍一下锚伪类。

  在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬念状态。

      a:link{css属性} 

层级选择器

      父选择器 子选择器 。。。中间空格隔开

     

语法:父级选择器 子级选择器 .....
        示例:
            <div id="d1">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>
            <div id="d2">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>
            
            <style type="text/css">
                #d1 .dd2 span{color:red}
            </style>
border:
        border-width:边框的宽度
        border-color:边框的颜色
        border-style:边框的线型
        
        border-top:上边框
        border-bottom:下边框
        border-left:左边框
        border-right:右边框
                
    padding:
        代表边框内壁与内部元素之间的距离
        padding:10px;代表上下左右都是10px
        padding:1px 2px 3px 4px;上右下左
        padding:1px 2px;上下/左右
        padding:1px 2px 3px;
        padding-top:单独设置
    margin:
        代表边框外壁与其他元素之间的距离
        margin:10px;代表上下左右都是10px
        margin:1px 2px 3px 4px;上右下左
        margin:1px 2px;上下/左右
        margin:1px 2px 3px;
        margin-top:单独设置

 

css选择器

标签:优先   示例   链接   :link   margin   gre   介绍   width   tom   

原文地址:http://www.cnblogs.com/llforeverlove/p/7475695.html

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