css

7、CSS 组合选择符
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）


相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

普通兄弟选择器选取所有指定元素的相邻兄弟元素。
div~p
{
background-color:yellow;
}

8、伪类：
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}

anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
实例
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。、

伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
如果在上面的例子的链接已被访问，它会显示为红色。

:first - child伪类 选择满足条件的第一个元素：
匹配第一个p元素：
p:first-child
{
color:blue;
}

9、伪元素：
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line  //为p元素的首行添加特殊样式，只能用于块级元素
{
color:#ff0000;
font-variant:small-caps;
}

"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(smiley.gif);
}


10、透明度：
0~1   0完全透明  1完全不透明
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

11、CSS 属性 选择器
属性选择器：
[title]
{
color:blue;
}

属性和值选择器：
[title=w3cschool]
{
border:5px solid green;
}
属性和值的选择器 - 多值
[title~=hello] { color:blue; } 或者 [lang|=en] { color:blue; }
表单样式：
input[type="text"]
{
width:150px;
}

12、CSS3 常用特效：
圆角边框（制作椭圆）：
border-radius:20px;

阴影框
div
{
box-shadow: 10px 10px 5px #888888;
}

边界图片：
border-image:url(border.png) 30 30  round;