#css2中的选择器
1.元素选择器
*通配符选择符、html类型选择符、id选择符、class选择符
2.关系选择器
E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器)
3.伪类选择器
E:link(链接伪类选择器-默认链接)
E:visited(链接伪类选择器-点击过的链接)
E:hover(用户操作伪类选择器-鼠标滑过)
E:active(用户操作伪类选择器-鼠标点击)
E:focus(用户操作伪类选择器-过去光标)
E:lang()(:lang()伪类选择器-匹配使用特殊语言的E元素)
4.属性选择器
E[att](选择具有att属性的E元素)
E[att="val"](选择具有att属性且属性值等于val的E元素)
E[att~="val"](选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素<通俗的说属性值不唯一的时候选择>)
E[att|="val"](选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素)
5.伪对象选择器
E:first-letter(设置对象内的第一个字符的样式)
E:first-line(设置对象内的第一行样式)
E:before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
E:after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
#css3 新增选择器
1.关系选择器
E~F兄弟选择器(选择E标签"后面的"所有兄弟标签F)<没发现与E+F的却别>
2.结构伪类选择器
E:first-child (在所有兄弟中E标签为第一个child的时候选择) = 跟 E:nth-child(1)是一样的效果
E:last-child (在所有兄弟中E标签为最后一个child的时候才选择)
E:nth-child(int 第x个child)
(在所有兄弟中第x个child为E标签的时候才选择)
E:nth-child(even) 偶数(从1开始) =
E:nth-child(2n)
E:nth-child(odd) 奇数(从1开始) = E:nth-child(2n+1)
E:nth-last-child(int 倒数第x个child) - 正好与E:nth-child相反
E:only-child (E标签为独生子的时候才选择)
---------------------------------------------
of-type 系列 如:
E:child-of-type 中，只对E标签类型的兄弟们加上1234..标记来选择
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type()
E:nth-last-of-type()
html:root{} 跟
html{} 效果是一样的
3.UI元素状态伪类选择器
input:disabled
disabled类型表单的样式
input:enabled enabled类型表单的样式
input:checked 被选中表单项的样式
4.属性选择器
E[attr^="val"] 属性值以val开头的
E[attr$="val"] 属性值以val结尾的
E[attr*="val"] 属性值中存在val字符的
5.伪对象选择器
#以下四种虽然是"::"号，但与css以前版本的":"单冒号的效果一样
E::first-line E标签里面的第一行字符串（可以为<br />换行，也可以被容器的宽度自动换行）
E::first-letter E标签里面的第一个字符
E::before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
E::after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
|
1
2
3
4
5
6
7
|
/* 例子 * a[href$="rar"]::after{ * content:url(../images/rar.jpg) * } * #content:"也可以这样输出字符串" * 作用：a标签的href属性为rar结尾的标签后面加上图片标签 * */ |
E::selection E标签中的文字被选中的时候背景颜色（默认为深蓝色） #不支持FF、支持chrome
#css3 新增属性
1.css1&2中的文本属性
text-indent css1 文本缩进
letter-spacing css1 文字之间的间隔
word-spacing css1 单词之间插入的空格格数
vertical-align css1/css2 垂直对齐方式
white-space css1
空格的处理方式(对应值:normal | pre | nowrap | pre-wrap | pre-line)
#direction css2 文本流方向
#unicode-bidi css2
用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
|
1
2
3
4
5
|
/*如: #b{ direction:rtl; (将文档流变成从又向左书写) unicode-bidi:bidi-override; } */ |
line-height css1 行高
2.css3中新增的文本属性
text-overflow css3 是否使用一个省略标记(对应值:clip|ellipsis)
text-align css1/css3 文本对齐方式
text-transform
css1/css3 文本大小写(对应值:lowercase|uppercase|capitalize)
text-decoration css1/css3 [复合属性]文本装饰，如下划线、删除线
text-decoration-line css3 文本装饰线条的位置
text-decoration-color css3
文本装饰线条的颜色
text-decoration-style css3 文本装饰线条的形状
text-shadow css3
文本文字阴影及模糊效果(对应值:（left,top[,模糊程度px][,rgba(r,g,b,透明度)|rgb(r,g,b)|#000000]）) -
可以用","逗号来分隔继续写一样的格式来多阴影效果
text-fill-color css3 文字填充颜色
#需要加浏览器私有前缀 如：-webkit-text-fill-color:red;
text-stroke
css3 [复合属性]文本文字的描边 #需要加浏览器私有前缀 如：-webkit-text-stroke:1px red;
text-stroke-width css3 文本文字描边的粗细 #需要加浏览器私有前缀
如：-webkit-text-stroke-1px;
text-stroke-color css3
文本文字描边的颜色 #需要加浏览器私有前缀 如：-webkit-text-stroke-red;
|
1
2
3
4
5
6
|
/* 浏览器私有前缀 * IE:-ms- * 谷歌、苹果、猎豹、360急速(webkit内核)：-webkit- * opera:-o- * firefox:-Gecko- * */ |
tab-size css3 制表符(tab键)的长度 #<pre>标签里面的时候才可以看到效果
(tab-size:30) 谷歌浏览器暂不支持加px像素
word-wrap css3
当前行超过指定容器的边界时是否断开转行(对应值:normal | break-word)
#一般英文单词之类的中间没有空格的字符一长串下来不会自动换行，而会超出限制宽度，所以用word-wrap:break-word;样式来强制换行
3.css3新增颜色表示方式
rgba(r,g,b,alpha<0-1>)
HSL(H,S,L) -
色轮模式
H: Hue(色调)
0(或者360)表示红色,120表示绿色,240表示蓝色。颜色取值范围为:0-360
S: Saturation(饱和度)
取值范围: 0.0%-100.0%
L:Lightness(亮度)
取值范围: 0.0%-100.0%
#如：hsl(360,50%,50%) 为不纯的红色
HSLA(H,S,L,A)
A: ALPHA(透明度)
取值范围:0-1
Opacity
opacity:0.3;#取值为0-1之间
filter:alpha(opacity) 仅限IE#取值为0-100之间 - 为了兼容IE浏览器