赶紧来系统的认识一下CSS选择器吧!
CSS基础选择器(作用:选取元素)
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,CSS基础选择器有四种:
标签选择器
- 标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:
- 标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
- 标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。 (直接复制代码到你的编辑器中查看效果哦)
Document 段落
标题1
标题2
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
- .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3} 类选择器最大的优势是可以为元素对象定义单独或相同的样式。
Document P1
P2
P3
P4
id选择器
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
- #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3} 该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
Document P1
P2
通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
- *{属性1:属性值1;属性2:属性值2;属性3:属性值3}
- 例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
*{ margin:0; /*定义外边距*/ padding:0; /*定义内边距*/}
并集选择器
并集选择器必须同时满足所有的条件,选择器中间使用逗号隔开(英文逗号):
Document 含有类的p标签
只是p标签本身
只是div标签本身含有类的h1标签
含有id名的span标签
交集选择器
“交集选择器”由两个选择器直接链接构成,其结果是选中各自元素范围的交集。
Document 含有类和id的p标签
只是p标签
只是div标签含有类的h1标签
后代选择器
后代选择器使用空格隔开两个选择器,符合条件的是父选择器的所有子代选择器。
Document 这是p
这是div这是h1
这是最里面的p
这是div同级的p
子代选择器
子代选择器使用'>'连接,只选择到直接子代选择器。
Document 这是直接子代p
这是直接子代div这是直接子代h1
这不是直接子代p
这是同级p
注意点
- 选择器的命名规则:命名的取值范围:0~9,a~z,A~Z,_,-;不能以数字开头。
- 如果交集选择器中有标签选择器,则标签选择器必须写在前面。
怎么样,你了解了吗?如果还是懵懂,那就只好多看看再多写几遍就好啦,加油!