CSS选择器(CSS2)_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS选择器(CSS2)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:33:17

Original

1556 people have browsed it

规则结构

　　每个规则都有两个基本部分：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性—值对。每个样式表由一系列规则组成。

h1{color: red;background: yellow;}

Copy after login

选择器分类

【0】通配选择器
　　星号*代表通配选择器，可以与任何元素匹配

*{color: red;}

Copy after login

【1】元素选择器

　　文档的元素是最基本的选择器

html{color: black;}p{color: gray;}h2{color: silver;}

Copy after login

【2】类选择器(一组元素)

.div{color: red;}

Copy after login

　　【2.1】多类选择器

.div1.div2{color: red;}

Copy after login

　　【2.2】结合元素的类选择器

p.div{color: red;}

Copy after login

【3】ID选择器(一个元素)

#test{color: red;}

Copy after login

　　[注意]在实际中，浏览器并不会检查ID的唯一性，设置多个ID，可以为这些具有相同ID的元素应用相同样式，但在编写DOM脚本时只能识别该id的第一个元素。

【4】属性选择器(IE6-不支持)
　　根据元素的属性及属性值来选择元素

　　【4.1】简单属性选择器

h1[class]{color: red;}img[alt]{color: red;}a[href][title]{color: red;}#div[class]{color: red;}.box[id]{color: red;}[class]{color: red;}

Copy after login

　　【4.2】具体属性选择器

[class="test box"]{color: red;}

Copy after login

　　[注意]class里面的值以及顺序必须完全相同，并且不可多空格或者少空格

[id="tox"]{color: red;}

Copy after login

　　[注意]ID选择器和指定id属性的属性选择器并不是一回事，主要在于优先级不同。

a[href="http://www.baidu.com"][title="baidu"] {color: red;}

Copy after login

　　【4.3】部分属性选择器

[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素    [class ^="b"] 选择class属性值以"b"开头的所有元素[class $="b"] 选择class属性值以"b"结尾的所有元素[class *="b"] 选择class属性值包含"b"的所有元素    [class |="b"] 选择class属性值等于b或以b-开头的所有元素

Copy after login

【5】分组选择器

　　将要分组的选择器放在规则左边，并用逗号隔开

h1,p{color: red;}

Copy after login

【6】后代选择器

ul li{color: red;}div p, ul li{color: red;}

Copy after login

　　【6.1】子元素选择器(IE6-不支持)

ul > li{color: red;}

Copy after login

【7】相邻兄弟元素选择器(IE6-不支持)

div + p{color: red;}

Copy after login

　　[注意]两个元素之间的文本内容不会影响相邻兄弟结合符起作用

【8】伪类选择器
　　伪类顺序：link-visited-focus-hover-active
　　【8.1】静态伪类(只应用于超链接)

:link    未访问:visited    已访问a:link{color: red;}a:visited{color: green;}

Copy after login

　　【8.2】动态伪类(可应用于任何元素)

:focus    拥有焦点(IE7-不支持):hover    鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类):active    正被点击(IE7-不支持给<a>以外的其他元素设置伪类)

Copy after login

　　【8.3】:first-child(属于静态伪类)(IE6-不支持)

p:first-child    代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素p > i:first-child    匹配所有<p>元素中的第一个<i>元素p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素

Copy after login

　　【8.4】:lang 相当于|=属性选择器(IE7-不支持)

p:lang(en) 匹配语言为"en"的<p>

Copy after login

　　【8.5】伪类的结合

a:visited:hover:first-child{color: black;}

Copy after login

　　[注意]顺序无关

【9】伪元素选择器
　　【9.1】:first-letter 设置首字母样式(只能用于块级元素)(IE6-不支持)

p:first-letter{color: red;}

Copy after login

　　【9.2】:first-line 设置首行样式(只能用于块级元素)(IE6-不支持)

p:first-line{color: red;}

Copy after login

　　【9.3】:before 在元素内容前面插入内容(IE7-不支持)

p:before{content:"text"}

Copy after login

　　【9.4】:after 在元素内容后面插入内容(IE7-不支持)

p:after{content:"text"}

Copy after login

　　[注意]所有伪元素都必须放在出现该伪元素的选择器的最后面。因此，如果写成 p:before em 就是不合法的