CSS3选择器

2017-10-12 本文已影响0人闫子扬

常用选择器

子元素选择器
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;
    }

CSS3选择器

常用选择器

猜你喜欢

热点阅读