常用选择器
子元素选择器
E>F: E元素内的每个子元素F(选取父元素是E元素的每个F元素)兄弟选择器
E+F:E元素后面的第一个兄弟元素F
E~F:所有在E元素之后的兄弟元素F属性选择器
E[att]:有属性att的所有E元素
E[att='val']:属性att的值是val的元素
E[att^='val']:属性att的值以val开头的元素
E[att$='val']:属性att的值以val结尾的元素
E[att*='val']:属性att的值包含val字符串的元素UI元素状态伪类选择器
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素伪元素选择器
E::first-line 选择每个块级元素的首行
E::first-letter 选择每个块级元素的首字母
E::selection 用来改变浏览网页选中文本的默认效果基本上只有background、color有效果结构性伪类
E:first-child 选择第一个子元素E(选择所有属于其父元素的首个子元素)
E:last-child 选择最后一个子元素E(选择所有属于其父元素的最后一个子元素)
E:nth-child(n) 选择一个或多个特定的子元素(第一个编号为1)
E:nth-last-child(n) 选择一个或多个特定的子元素,从最后一个子元素开始算
E:nth-of-type(n) 选择指定的元素,仅匹配使用同种标签的元素
E:nth-last-of-type(n) 选择指定的元素,从元素的最后一个开始计算,仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
E:only-child 匹配父元素下仅有的一个子元素
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素
E:empty 匹配一个不包含任何子元素的元素(文本节点也被看作子元素)
E:not(s) 匹配不符合当前选择器的任何元素(反选)-
圆角边框
border-radius:[ length | % ]{1,4} / [ length | % ]{1,4}
border-top-left-radius:5px ;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;
border-radius:5px 15px 20px 25px ;
border-radius:20px / 10px ; -
多彩边框 火狐(FF)2.0以上版本支持
border-colors:<color>
相关属性:
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors -
图像边框
border-image-source : 图片边框的路径
border-image-slice : 图片边框向内偏移
border-image-width:图片边框的宽度
border-image-repeat : 指定边框背景图的填充方式
border-image-repeat : stretch | repeat | round
默认值:stretch
stretch: 指定用拉伸方式来填充边框背景图
repeat: 指定用平铺方式来填充边框背景图,当图片碰到边界时, 如果超过则被截断
round: 指定用平铺方式来填充边框背景图,图片会根据边框的尺寸,动态调整图片的大小直至正好可以铺满整个边框
div{
width:200px;
height:100px;
text-align: center;
font:bold 20px/100px 微软雅黑;
}
div{
border:1em solid #ccc;
border-width: 28px;
border-image-source: url(images/bg.png);
border-image-slice: 33.3%;
border-image-repeat: round;
}