第二章 CSS 3 选择器

2. 1 选择器的分类2.2 基本选择器语法

选择器	类型	功能描述
*	通配选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择制定ID属性值为“id”的任意类型元素
.class	类选择器	选择制定class属性值为“class”的任意类型的任意多个元素
selector1, selectorN	群组选择器	将每个选择器匹配的元素集合并

兼容性: all

2.3 层次选择器语法

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

兼容性:
E F : all
其他: IE 7 + , firefox, chrome, safari, opera

2.4 动态伪类选择器语法

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接锚点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E：active	用户行为伪类选择器	选择匹配的E元素，且匹配元素已被激活。常用于锚点与按钮上
E：hover	用户行为伪类选择器	选择匹配的E元素，且用户鼠标停留在E元素上。IE6以下只支持a:hover
E：focus	用户行为伪类选择器	选择器匹配的E元素，且匹配元素获得焦点

兼容性:
E:active, E:focus : IE 8 + , firefox, chrome, safari, opera
其他: all

2.5 目标伪类选择器语法

选择器	功能描述
E: target	选择匹配的E的所有的元素，且匹配元素被相关URL指定

兼容性:
IE9 + , firefox, chrome, safari, opera 9.6 +

2.6 语言伪类选择器

选择器	功能描述
E: lange(language)	选择匹配E的所有元素, 且匹配元素指定了lang属性, 且其值为language

兼容性:
IE8 + , firefox, chrome, safari, opera 9.2 +
解决办法:
IE 6 : 给元素设置类名
IE 7 : 可以采用IE6的方法, 若不兼容IE6 可使用属性选择器中的 E [foo|= "en"]


    
    
    Title

    

        :lang(en) {            quotes: '<' '>';
        }        :lang(ch) {            quotes: '"' '"';
        }    

    百度一下

2.7 UI元素状态伪类选择器语法

选择器	类型	功能描述
E : checked	选中状态伪类选择器	匹配选中的复选按钮或单选按钮
E : enabled	启用状态伪类选择器	匹配所有启用的表单元素
E : disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

兼容性:
IE 9 + , firefox, chrome, safari, opera
解决办法:
IE 6~8 考虑使用js库 - Selectivizr

2.8 结构伪类选择器语法

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E, 与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E, 与E:nth-last-child(1)等同
E:root	匹配E所在文档的根元素, 在HTML文档中, 根元素始终是html
E F:nth-child(n)	选择父元素E的第n个子元素F, 其中n可以是整数(1, 2, 3...), 关键字(even, odd), 公式(2n+1, -n + 5), n的起始值是1
E F:nth-last-child(n)	选择元素E的倒数第n个子元素F
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素, 等同于E:nth-of-type(1)
E:last-of-type	选择父元素内具有指定类型的最后一个E元素, 等同于E:nth-last-of-type(1)
E:only-child	选择父元素只包含一个子元素, 且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型的子元素, 且该子元素匹配E元素
E: empty	选择没有子元素的元素, 且该元素也不包含任何文本节点

其中的n的取值
大于等于0的正整数, eg: " : nth-child(2)"
参数n为表达式, n * length
n从0开始计算
n+length : 选择>= length的元素
-n+length : 选择小于等于length的元素
n*length + b : 如: (2n + 1)
odd 选择奇数元素
even 选择偶数元素

浏览器兼容:
IE 9+, safari, chrome, opera,firefox
只有 :first-child 属于CSS2.1, 其他结构伪类选择器都属于CSS3的新特性

.article img :nth-of-type(n + 2):nth-last-of-type(n+2) {  float: left;
}

2.9 否定伪类选择器语法

选择器	功能描述
E: not(F)	匹配所有除元素F外的E元素

兼容性:
IE 9 + , firefox, chrome, safari, opera

:not(footer) {...}input not:([type=submit]) {...}


    
    Title
    
        .box div {            display: inline-block;            width: 50px;            height: 50px;            margin: 10px;            background: yellowgreen;
        }        .box div:not(:hover) {            opacity: 0.4;
        }    
    1
    3
    4
    5

2.10 伪元素

伪元素	描述
::first-letter	匹配文本块的第一个元素
::first-line	匹配元素的第一行文本
::before	给dom元素前面插入内容
::after	给dom元素后面插入内容
:: selection	匹配突出显示的文本, 仅接受两个属性, background, color

兼容性:
::selection
IE 9, opera9.5 +, safari, chrome, firefox
firefox需要添加私有属性 ::-moz-selection

代码:

       p::selection {            background: red;            color: yellow;
        }

效果图.png


      
      a::before {            content: '';            background: url("baidu.png") center no-repeat;            width: 20px;            height: 20px;            background-size: 100% 100%;            display: inline-block;
        }        
        a[href^=http]::after {            content: "(" attr(href) ")";
        }百度一下

效果图.png

2.11 属性选择器

选择器	功能描述
E[attr]	匹配具有属性attr的E元素, E也可省略
E[attr1][attr2]	匹配同时具有属性 attr1 和attr2 多属性选择器
E[attr=val]	匹配 attr 等于 'val'
E[attr\|=val]	匹配 attr 等于 'val' 或者以 'val-'开头
E[attr^=val]	匹配 attr 以 'val' 开头
E[attr~=val]	匹配 attr 包含 'val' 这个单词, val是一个独立的word
E[attr*=val]	匹配 attr 包含 'val' 字符串
E[attr$=val]	匹配 attr 以 val 结尾

通配符	功能描述	示例
^	匹配起始符	span[class^=span] 表示选择类名以"span" 开头的所有span元素
$	匹配终止符	a[href$=pdf] , 表示以"pdf"结尾的href属性的所有元素
*	匹配任意字符	a[title*=site] 匹配a元素, 且a元素的title属性值包含"site"字符串

兼容性:
IE 7 + , firefox, chrome, safari, opera

作者：喵了个咪O_O
链接：https://www.jianshu.com/p/af80ca129196

第二章 CSS 3 选择器

CSS教程相关栏目本月热门文章