CSS选择器，层叠

最新推荐文章于 2024-02-28 21:36:57 发布

awaec408480

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/JhonFlame/p/7995224.html

版权

CSS选择器

.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。：后代选择器	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。(子选择器，只选子代)	2
element+element	div+p	选择所有{紧接在 <div> 元素之后}的 <p> 元素。相邻同胞选择器	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2

相邻同胞选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head><!--相邻同胞选择器-->
 4 <style>
 5 div+p
 6 {
 7 background-color:yellow;　　
 8 }
 9 </style>
10 </head>
11 
12 <body>
13 
14 <div></div>
15 <p>我是唐老鸭。</p><!--紧接在div之后-->
16 
17 <p>我住在 Duckburg。</p><!--未紧接在div之后-->
18 
19 
20 </body>
21 </html>