HTML快速入门--第二节--css选择器-三、选择器

时间:2024-10-14 07:16:36

a.作用:通过选择器作用在标签上
b.分类:
1.基本选择器:

a.标签选择器: div{ }
b.类选择器:   .aaa==作用在拥有class="aaa"的标签上
c.id选择器:#aaa==作用在拥有id="aaa"的标签上,==>标签数量是上1个
d.通配符选择器:*{} 作用在当前页面的所有标签
 
2.复合选择器(2种)

a.交集选择器:div#aaa{} 作用在拥有id值是"aaa"的标签上 div#aaa;div.aaa
b.并集选择器:div,#aaa{} 作用在div标签上,或者作用在id值等于“aaa”的标签上
 
3.关系选择器

1.父亲 > 儿子    :div>#aaa{}作用在div标签里id=“aaa”的子标签
2. 祖先  后代      :  div #aaa{}  作用在div标签里id=“aaa”的后代标签
3.兄+弟              :  div+#aaa{}  作用在div标签同辈的,相邻其后的标签
4.兄~弟              :  div ~ #aaa{}  作用在div标签的同辈标签

4.属性选择器

1、[属性]                      [src]{}:作用在拥有src属性的标签上
2、[属性=属性值]         [src='']{}
3、[属性^=属性值]       [src^=' ']{} 以谁开头  
4、[属性$=属性值]       以谁结尾      
5、[属性*=属性值]        包含 

每个选择器的例子参考下方链接:
css选择器实例