CSS的六大选择器

来源:互联网 发布:叉车考试什么软件 编辑:程序博客网 时间:2024/06/09 15:34

1、标签选择器 (标签名)


标签选择器,此种选择器影响范围大,会修改全部的该标签

作用: 

1. 做一些通用设置;

2. 用在层级选择器中

举例:


2、id选择器 (#)


通过id名来选择元素,元素的id名称不能重复,且一旦被元素使就不能复用

作用:  id名一般给程序使用,所以不推荐使用id作为选择器。

举例:


3、类选择器 (.)


通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类

作用: 应用灵活,可复用,是css中应用最多的一种选择器。

举例:



4、层级选择器 (.xxx .yyy或者.xxx 标签名)


主要应用在标签嵌套的结构中,层级选择器,是结合类选择器和标签选择器来写的选择器

作用: 它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围

举例:


5、组选择器 (.xxx,.yyy,.zzz)


多个选择器,如果有同样的样式设置,可以使用组选择器。

作用: 简洁代码, 一次性实现共有的属性

举例:


6、伪类及伪元素选择器(:hover /:before /:after)


1. 常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态

作用: 常用来做鼠标移动后酷炫效果


2. 常用的伪元素选择器有before和after,它们可以通过样式在元素中插入内容

注意=_=

1. 插入的元素在网页中不能被鼠标选中
2. 使用标签名也可以调出

举例:






原创粉丝点击