[你必须知道的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系列]第一回:丰富的利器尾话 
原文地址:https://www.cnblogs.com/shihao/p/1710791.html