Maison > interface Web > tutoriel HTML > CSS3后代选择器和同级选择器简介和实例_html/css_WEB-ITnose

CSS3后代选择器和同级选择器简介和实例_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:30:07
original
1517 Les gens l'ont consulté

CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器(或称组合选择器),

分为后代选择器(Descendant combinator/Child combinators)同级选择器(Sibling combinators)


其中后代选择器分以下3个:

1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。

2. 箭头(>)。表示直系关系。div > p 表示div的儿子辈的元素。

3. 星号(*)。表示隔代关系。div * p表示div的孙子辈及之后的元素。

在线实例:http://wow.techbrood.com/fiddle/15759


同级选择器分为以下2个:

1. 加号(+)。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。
2. 波浪号(~)。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素(中间可以隔着其他元素)。

在线实例:http://wow.techbrood.com/fiddle/15761


关于CSS3选择器参考阅读:

http://techbrood.com/Guide/h5b2a?p=css-selectors

http://techbrood.com/Guide/h5b2a?p=css-pseudo-classes


by iefreer

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal