选择器

一.标签选择器

结构:标签名{ CSS属性名:属性值:}

作用:通过标签名,找到页面中所有这类标签,设置样式

注意点:

1.标签选择器选择的是一类标签,而不是单独某一个

2.标签选择器无论嵌套关系有多深,都能找到对应的标签

二.类选择器

结构:.类名{CSS属性名:属性值;}

作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

注意点:

1.所有标签上都有class属性,class属性的属性值称为类名

2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头

3.一个标签可以同时有多个类名,类名之间以空格隔开

4.类名可以重复,一个类选择器可以同时选中多个标签

三.id选择器

结构:#id属性值 {CSS属性名:属性值;}

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

1.所有标签上都有id属性

2.一个标签上只能有一个id属性值

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

四.通配符选择器

结构:*{CSS属性名:属性值;}

作用:找到页面中所有的标签,设置样式

注意点:

1.开发中使用极少,只会在极特殊情况下才会用到

五.复合选择器

1.后代选择器:空格

作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素

选择器语法:选择器1 选择器2 {CSS}

结果:

在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式

2.子代选择器:>

作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素

选择器语法:选择器1>选择器2{css}

结果:

在选择器1所找到标签的子代中,找到满足选择器2的标签,设置样式

六.并集选择器:

作用:同时选择多组标签,设置相同的样式

选择器语法:选择器1,选择器2{css}

结果:

找到选择器1和选择器2选中的标签,设置样式

注意点:

1.并集选择器中的每组选择器之间通过,分隔

2.并集选择器中的每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个,提高代码的可读性

七.交集选择器

作用:选中页面中 同时满足 多个选择器的标签

选择器语法:选择器1选择器2{CSS}

结果:

找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式

注意点:

1.交集选择器中的选择器之间是紧挨着的,没有东西分隔

2.交集选择器中如果有标签选择器,标签选择器必须写在最前面

8.hover伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式

选择器语法:选择器:hover{CSS}

注意点:伪类选择器选中的元素某种状态

订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
滚动至顶部