日期:2014-01-23  浏览次数:21485 次

网页制造aiyiweb文章简介:css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。

最近在研讨jQuery的选择器,大家知道jQuery的选择器和css的选择器非常类似,所以整理一下css选择器;

css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。

1.基础的选择器

选择器

含义

示例

*

通用元素选择器,婚配任何元素

* { margin:0; padding:0; }

E

标签选择器,婚配所有使用E标签的元素

p { font-size:2em; }

.info和E.info

class选择器,婚配所有class属性中包含info的元素

.info { background:#ff0; }

p.info { background:#ff0; }

#info和E#info

id选择器,婚配所有id属性等于footer的元素

#info { background:#ff0; }

p#info { background:#ff0; }

 

2.组合选择器

选择器

含义

示例

E,F

多元素选择器,同时婚配所有E元素或F元素,E和F之间用逗号分隔

Div,p { color:#f00; }

E F

后代元素选择器,婚配所有属于E元素后代的F元素,E和F之间用空格分隔

#nav li { display:inline; }

li a { font-weight:bold; }

E > F

子元素选择器,婚配所有E元素的子元素F

div > strong { color:#f00; }

E + F