标识为深颜色的CSS3新增的伪元素选择器

margin-top: 0px; margin-bottom: 0px; padding: 0px; overflow-wrap: break-word; clear: both; text-indent: 28px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">标识为深颜色的CSS3新增的伪元素选择器

padding: 0px; overflow-wrap: break-word; clear: both; text-indent: 28px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">伪元素选择器，主要包括如表3-8所示的几种情况。标识为深颜色的CSS3新增的伪元素选择器。

表3-8  伪元素选择器

                       

border-color: rgb(242, 242, 242) windowtext windowtext rgb(242, 242, 242); line-height: 22px; padding: 0px; overflow: hidden; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> 

选择符

 		border-top-color: rgb(242, 242, 242); border-right-color: rgb(242, 242, 242); border-bottom-color: windowtext; border-left: none; line-height: 22px; padding: 0px; overflow: hidden; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"> 

功能描述

 
 

E:first-letter/E::first-letter

 		 

设置对象内的第一个字符的样式

 
 

E:first-line/E::first-line

 		 

设置对象内的第一行的样式

 
 

E:before/E::before

 		 

设置在对象前发生的内容。用来和content属性一起使用

 
 

E:after/E::after

 		 

设置在对象后发生的内容。用来和content属性一起使用

 
 

E::selection

 		 

设置对象被选择时的颜色

 

备注: "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

:before 选择器在被选元素的内容前面插入内容。使用 content 属性来指定要插入的内容。下列案例3-3所示在每个 <p> 元素前面插入内容，并设置所插入内容的样式：

                    例3-3 example03.html

 

<!DOCTYPE  html>

 

<html>

 

<head>

 

<meta charset="UTF-8">

 

<style>

 

p{   font-size: 35px; }

 

p:before{ content:"";display:  inline-block;

 

height: 45px;     width:  45px;background:url(img/face.gif);

 

}

 

p:after{

 

content: ""; display: inline-block;

 

 height: 45px;width: 45px; background:url(img/snow.gif);

 

}

 

</style>

 

</head>

 

<body>

 

<p>我是唐老鸭。</p>

 

<p>我住在 Duckburg。</p>  

 

<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

 

</body>

 

</html>

 

运行例3-3，选中所有的p元素前添加图片背景：并添加相应样式，效果如图3-5所示。

标识为深颜色的CSS3新增的伪元素选择器

图3-5 在p元素添加背景的效果图

3.2.6CSS高级特性

1.CSS层叠性和继承性

所谓层叠性是指多种CSS样式的叠加。所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。并不是所有的CSS属性都可以继承，例如下面的属性就不具有继承性：边框属性，定位属性，内/外边距属性，布局属性，背景属性，元素宽高属性。

2.CSS优先级

   定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。例如如下格式代码：

 

<p   id="header" >

 

<strong>文本的颜色</strong>

 

</p>

 

对应的权重值：

 

p strong{  color:black}              /*权重为:1+1*/

 

strong.blue{ color:green;}          /*权重为:1+10*/

 

.father strong{  color:yellow}       /*权重为:10+1*/

 

p.father strong{ color:orange;}     /*权重为:1+10+1*/

 

p.father .blue{  color:gold;}        /*权重为:1+10+10*/  

 

#header strong{  color:pink;}        /*权重为:100+1*/  

 


 

#header strong.blue{  color:red;}   /*权重为:100+1+10*/

 

在考虑权重时，还需要注意一些特殊的情况，具体如下：

（1）继承样式的权重为0。

（2）行内样式优先。

（3）权重相同时，CSS遵循就近原则。

（4）CSS定义了一个!important命令，该命令被赋予最大的优先级。

注意：复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。


Top
×