目录
这几天一直在学习CSS基础,学习和接触了很多的东西,首先对于CSS中的选择器进行一个小小的总结。选择器分为基础选择器和复合选择器两个大类。首先是基础选择器:
基础选择器
具有两个特征:
- 由单个选择器组成的
- 包括标签选择器、类选择器、id选择器和通配符选择器
------》标签选择器
是指用HTML标签名称作为选择器,按标签名称分类,为页面中的某类标签指定统一的CSS样式。例如:对所有的<div>和所有的<span>标签进行设置
优点:快速为页面中同类型的标签统一设置样式
------》类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器,类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点"."号显示
注意
①类选择器使用““(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的).
②可以理解为给这个标签起了一个名字,来表示
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的。
⑥命名规范:见附件(Web前端开发规范手册doc
记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用
如果一个标签具有两个及以上类名的样式,那么就可以使用多类名选择器。
注意:
- 各个类名中间用空格隔开
- 简单理解:就是给某个标签添加了多个类,或者这个标签有多个名字
- 这个标签就可以分别具有这些类名的样式
- 从而节省CSS代码统修改也非常方便
- 多类名选择器在后期布局比较复杂的忾况下,还是较多使用的
{例如:以下具有类选择器和标签选择器的使用}
注意:
类选择器的命名是有一些规定的,命名上都有一定的规则,参考链接附上:
https://blog.csdn.net/xiongdaandxiaomi/article/details/96115538
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:200px;
height:200px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
-----》id选择器
id选择器和类选择器差不多,id选择器在HTML中以id属性表示,在CSS中,类选择器以一个点"#"号显示。应用上也是差不多,但是id选择器和类选择器有一些区别。
- 类选择器( class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
- id选择器好比人的身份证号码全中国是唯的,不得重复
- id选择器和类选择器最大的不同在于使用次数上【前者一次,后者可多次】
- 类选择器在修改样式中用的最多,id选择器般用于页面唯一性的元素上,经常和 JavaScript配使用
-----》通配符选择器
*代表了一切。对所有的标签进行设置,用的比较少
复合选择器
复合选择器建立在基础选择器之上,是基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素
- 复合选择器由两个或多个基础选择器,通过不同的方式组合而成。
- 常用复合选择器:后代选择器、子选择器、并集选择器和伪类选择器
-----》后代选择器
又称为包含选择器,可以选择父类元素里面的子元素,写法如下:
注意:
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
-----》子选择器
只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素。语法:元素1>元素2{样式声明}.【只能是直接后代】
-----》并集选择器
并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明井集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的部分。
元素1,元素2{样式声明}
-----》伪类选择器
----》链接伪类选择器
-----》focus伪类选择器
用于选取获得焦点的表单元素