zoukankan      html  css  js  c++  java
  • [你必须知道的css系列]第一回:丰富的利器选择符尾话


    在CSS中除了常规的选择符的使用以外,还有两个比较特殊的对属性操作的选择符方式,这就是这篇要介绍的“伪类”,“伪对象”。

    一、伪类

        伪类可以用来指定一个或者多个与其相关的选择符的状态,伪类的形式为:选择符:伪类{属性:属性值;}

        例如,下面我们设置锚点标签a的几种状态

        

                       a:link{color:Red;}
                       a:visited
    {color:Blue;}
                       a:hover
    {color:Blue;}
                       a:active
    {color:Black;}

    伪类可以让用户在使用页面的过程中增加更多交互效果,而不必去使用过多的JS来辅助完成。

    例如:当我要使输入框获得焦点时的背景色为黑色,我可以这样写:

    input:hover
    {
        background-color
    :Black;
    }
    <input type="text" value="" />

    所以当我们鼠标移过文本框时就会出现黑色背景。提醒一下,该死的IE6和IE7对伪类支持得太有限了。所以CSS中我认为最好玩的一部分也就黯淡无谓了。

    二、伪对象

        伪对象是在HTML的文档指定的信息之外,创建了文档的额外信息。例如,在段落标签P的前后添加文字信息等。

        伪对象的形式为:选择符:伪对象{属性:属性值;}

        这里要说一下,伪对象跟伪类一样,在IE6和IE7下面支持得太有限了。这里我可以通过FF来展示下伪对象的强大之处。

        例如:这边为段落标签P的信息补充文字信息:

         

    <style type="text/css">
    p:before
    {content:"4月13号";}
    p:after
    {content:"今天星期二";}
    </style>
    <p>ssssssssssssssssssss</p>

    来看一下效果:


    IE6,7下效果


      
      FF,IE8下效果

    可以看到IE8以前的版本因为不支持伪对象,所以只显示了P中的文字。

    这边伪对象就先介绍到这里,后面的话会介绍一些比较实用的伪类伪对象,其它的你可以查查CSS的手册。

    关于选择符最后的一些话:

          css我之前就说了翻译过来叫层叠样式表,所以其特色就在于层叠。所谓层叠即表示CSS会根据选择符的使用而将样式相互叠加或者覆盖。选择符之间藕断丝连的关系往往让我们许多人觉得难以处理,但如果我们能很好的掌握它,会发现其实也就那么回事。

          1.选择符的覆盖

     看一段代码:

    <style type="text/css">
    span
    {
        color
    :Red;
    }
    </style>

    这么简单的一段代码估计谁都知道什么意思,span里面的内容会变成红色的。

    改现在我改成:

    <style type="text/css">
    span
    {
        color:Red;
    }
    span
    {
        color:Blue;
    }
    </style>

    在下面再次定义了一下span标记的颜色,前面的就被后面的覆盖掉了。在我们日常开发中可能有一种用法就是:先将所有元素的内外补丁都设为0,然后根据实际的用法再次定义内外补丁的间距。

    <style type="text/css">
    *
    {
        margin:0;
        padding:0;
    }
    .clear
    {
        margin:10px 0 10px 0;
    }
    </style>

       2.选择符Z的继承

         “子承父业”不仅在我们的社会中表现,在CSS中也存在着。当我们在CSS中定义body的文字或颜色时,那body的所有子元素都将继承body中的相关定义。

          如:

    <style type="text/css">
    body
    {
    font-size
    :20px;
    }
    div
    {
        color
    :Blue;
    }
    </style>

    显示效果不用我截图了。div里面的字体以20PX显示,且绿色。

    说一下,并不是所有的后代标签都会继承父级元素的CSS属性,例如:标题标记h1-h6这6个标签将会使用浏览器的默认样式设置的文字大小。body再怎么定义对它都不管用。

    掌握选择符继承的特性,灵活利用将会对后期编写CSS带来许多的便利,节约开发的时间。因此在编写CSS代码之前,我们通常要做的就是利用CSS的继承我对整个页面进行统筹规划、细致分析,以优良的CSS代码实现页面的而已及样式。

     3.选择符的权重和优先级别

         即使在不太复杂的样式中,也可能有两个或者更多的选择符同时定义一个标签元素。如果这些选择符中声明的属性不同也就罢了,如果声明的属性和相同,而设置的属性值不同该怎么办,这时候就要考虑到选择符的权重及优先级别。

        CSS给每个选择符都分配一个权重值,我们可以将网页定义的样式分为4种:HTML,编写者,用户,浏览器。HTML表示在HTML中使用的样式;编写者表示CSS文件的编写人员;用户也就是浏览器网页的用户所设置的样式;浏览器也就是浏览器的默认样式。

        为了让用户对样式有更多的控制能力,可以对属性设置!important关键字声明,提升属性的权重值。添加!important关键字声明的属性在优先级别中是最高的。

        来看一下,CSS样式所采用的优先顺序:

    • 标有!important关键字声明的属性。
    • HTML中CSS样式属性。
    • 工程师编辑的CSS文件样式属性。
    • 用户设置的样式。
    • 浏览器默认样式。
     这里要提一下,在工程师编写的CSS样式中,以选择符的组合方式来决定优先级别,相同的选择符组合方式将根据CSS样式先后次序而决定优先级别。
    代码
    <style type="text/css">
    p
    {color:Red;}
    p.myColor
    {color:Black;}
    .myColor
    {color:Yellow;}
    #myColor
    {color:Blue;}
    </style>
    p>ssssssssssssssssssss</p>
    <p class="myColor">sssssssssssssssssss</p>
    <p id="myColor" class="myColor">ssssssssssssssssssss</p>
    <p style="color:Green" class="myColor" id="myColor">sssssssssssssssssssssss</p>

    上面代码显示如下:

     

    呵呵,上面的截图就是同一个标签使用不同样式定义的方法,显示的效果。估计初学的人会有点摸不着头脑,搞不懂为什么同一个P所显示的效果会不同呢。其实这些都不是问题,你只要记住下面的这个优先级值就可以。

    标签选择符、伪类及伪对象:优先级值为1。

    类选择符、属性选择符:优先级值为10。

    ID选择符 :优先值为100。

    style属性:优先级值为1000。

    其它的如通配符等:优先级值为0。

    根据上面的原则,统计出CSS样式表中出现的每个选择符个数,再相加,最终得出的值就是某个选择符的优先级别。

    如上面的这个例子:

    •       p=1
    •       p.myColor=1+10=11
    •       .myColor=10
    •       #myColor=100
    •       style="color:red;"=1000

    现在再看哪个应用于哪个是不是比较直观了呢。

    对了再提一下 !important关键字,它的优先级别是最高的,而这个并没有放在优先级值计算中。

    这边大家可以自己动手试一下,在代码中加一个!important看看会有什么效果。!important关键字的优先级最高,所有用的时候一定要谨慎。

    好了关于选择符这就是一个终结了!就讲到此为此吧!这第一回总算完成了。接下来就开写第二回吧。名字还没想好。

    还是那句话:有什么问题还是直接给我留言。

    你必须知道的css系列-第一回

    [你必 须知道的css系列]开篇有益

    [你必 须知道的css系列]第一回:冠冕堂皇:CSS的作用及其基本结构

    [你必 须知道的css系列]第一回:丰富的利器:CSS选择符之通配符、类选择符、包含选择符、ID选择符

    [你必 须知道的css系列]第一回:丰富的利器2:CSS选择符之子选择符、相邻选择符 

    [你必 须知道的css系列]第一回:丰富的利器3:CSS选择符之属性选择符

    [你必 须知道的css系列]第一回:丰富的利器终结篇:选择符的组合关系及选择符总结

    [你必须知道的css系列]第一回:丰富的利器尾话 
  • 相关阅读:
    mac下完全卸载程序的方法
    Mac下检测NSTableView的滑动事件的方法
    一行代码起动全屏
    Unsupported compiler '4.0' selected for architecture 'i386'类错误解决办法
    编译错误“The run destination My Mac 64bit is not valid for Running the scheme '***',解决办法
    ios项目中导入百度地图SDK出错的问题
    Unable to resolve target 'android9'解决办法
    ios保存录制好的视频到相簿的方法
    NSTableView系列之代码创建(不用nib)
    谈内链优化不是每个站点都能做的
  • 原文地址:https://www.cnblogs.com/shihao/p/1710791.html
Copyright © 2011-2022 走看看