CSS的高级选择器

层次选择器
结构伪类选择器
属性选择器

层次选择器

选择器	类  型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

 

 

注意：

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器

 

 相邻兄弟选择器

 

 靠近的p变为红色

通用兄弟选择器

active后面的使用兄弟p都为黄色

 

 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

 

文本样式

文本属性

属性             含义                              举例
color          设置文本颜色                   color:#00C;
text-align    设置元素水平对齐方式   text-align:right;
text-indent 设置首行文本的缩进       text-indent:20px;
line-height 设置文本的行高               line-height:25px;
text-decoration 设置文本的装饰       text-decoration:underline;

文本颜色

color属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

 

 

                                                                                                                               排版文本段落

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

文本修饰和垂直对齐

文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性：middle、top、bottom

 

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

 

 文本阴影

 

 超链接伪类

伪类样式

语法：标签名:伪类名{声明;}

 

                                                                                                                                                                   使用CSS设置超链接

 

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

 

设置伪类的顺序：a:link->a:visited->a:hover->a:active

 

list-style-type
list-style-image

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

 

 

 

 

list-style

去除列表前面的小黑点

 

 背景样式

背景颜色
background-color

背景颜色值：十六进制方法表示

transparent

背景图像
background-image

背景图像
background-image属性

 

 

背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景定位

background-position属性

值	含义
Xpos Ypos	单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right垂直方向的关键词：top、center、bottom

 

设置背景

背景属性
background属性   背景样式简写

 

 

                                                                                                                                                                                                                                                       背景尺寸

设计师如何对背景图片的大小进行控制呢？
背景尺寸 background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

 

CSS3渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

CSS3渐变兼容

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-

线性渐变