CSS3属性选择器详解 及 双色球实战开发_html/css_WEB-ITnose

.balls span{

margin-left:0.8em;

}

.balls span{

margin-left:0.8em; /*设置数字球之间的距离为0.8em*/

display:block; /*将数字球span设为块，便于调整宽和高*/

float:left; /*使数字球向左浮动，连在一行显示*/

width:1.4em; /*设置数字球span的宽高*/

height:1.4em;

border:1px solid red;/*设置数字球边框为红色，这个是为了便于查看设置的样式是否已经生效*/

-webkit-border-radius:0.7em;/*设置span圆角半径，如果半径为总长度一半，则就形成了圆*/

-moz-border-radius:0.7em;

border-radius:0.7em;

text-align:center; /*使数字球中的字水平居中显示*/

line-height:1.4em; /*使数字球中的字垂直居中显示*/

}

.balls span{

margin-left:0.8em; /*设置数字球之间的距离为0.8em*/

display:block; /*将数字球span设为块，便于调整宽和高*/

float:left; /*使数字球向左浮动，连在一行显示*/

width:1.4em; /*设置数字球span的宽高*/

height:1.4em;

 border:1px solid red;/*设置数字球边框为红色，这个是为了便于查看设置的样式是否已经生效*/

-webkit-border-radius:0.7em;/*设置span圆角半径，如果半径为总长度一半，则就形成了圆*/

-moz-border-radius:0.7em;

border-radius:0.7em;

text-align:center; /*使数字球中的字水平居中显示*/

line-height:1.4em; /*使数字球中的字垂直居中显示*/

color:#FFFFFF; /*设置span中字体颜色*/

box-shadow:0.15em 0.15em #999; /*给ball应用阴影效果，增加立体感*/

}

/*给所有的ball应用样式*/

.balls span[title]{ /*给设置了title属性的span 应用样式*/

 background-color:#FF0000;

}

/*给class以blueball为结尾的span元素应用样式*/

.balls span[class$="blueball"]{

 background-color:#0033CC;

}

    实战互联网

.prefer_docs dd{ /*清除dd 到 dl 边框的距离*/

margin-left:0px;

}

.prefer_docs ul{/*重新设置ul样式*/

list-style-type:none;

padding-left:0px;

margin-left:0px;

}

.prefer_docs li{/*调整推荐文档的上下距离*/

margin-bottom:2px;

}

.prefer_docs a{/*去除文档超链接下划线*/

text-decoration:none;

}

.prefer_docs a:hover{/*给超链接应用鼠标滑过时的样式*/

color:red;

text-decoration:underline;

}

.prefer_docs a span{ /*定义文档类型图标显示区域大小*/

background: no-repeat;

display:block;

height:16px;

width:16px;

float:left;

margin-right:2px;

}

.prefer_docs a span{ /*导入文档类型背景图片*/

background-image:url(pkg_icon.png);

}

.prefer_docs a[href$="ppt"] span{/*所有以ppt为结尾的，应用ppt图标*/

background-position:-856px -36px;

}

.prefer_docs a[href*="pdf"] span{/*给链接中包含pdf文字的链接，应用pdf图标*/

background-position:-625px -36px;

}

.prefer_docs a[class|="doc"] span{/*给class以doc或者doc- 开头的链接，应用doc图标*/

background-position:-877px -36px;

}

.prefer_docs a[class~="net"] span{/* class属性中，含有net值的链接，应用Internet图标 */

background-position:-520px -36px;

}