css基础（二）：基础选择器和复合选择器

• 语法：类名选择器

.类名 {

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)

长名称或词组可以使用中横线来为选择器命名。

不要纯数字、中文等命名， 尽量使用英文字母来表示。

多类名选择器：各个类名中间用空格隔开。

1.3 ID选择器 :

id选择器使用 # 进行标识，后面紧跟id名

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.4. 通配符选择器:

通配符选择器用*号表示， * 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

• { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

• {

margin: 0; /* 定义外边距*/

padding: 0; /* 定义内边距*/

}

总结：

1. 尽量少用通配符选择器  *

2. 尽量少用 ID选择器

3. 不使用无具体语义定义的标签选择器

2.CSS复合选择器 ：

---

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

2.1后代选择器（包含选择器）：

用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用 空格 分隔，先写父亲爷爷，再写儿子孙子。

子孙后代都可以这么选择。或者说，它能选择任何包含在内 的标签。

父级 子级{属性:属性值;属性:属性值;}

.class h3 {color:red;font-size:16px;}

2.2子元素选择器 ：

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

这里的子,指的是亲儿子。不包含孙子 重孙子之类。

.class>h3 {color:red;font-size:14px;}

2.3交集选择器：

交集选择器是并且的意思,即…又…的意思

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

2.4 并集选择器：

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。

并集选择器通常用于集体声明  ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

比如

.one,

p ,

#test {color: #F00;}

表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

通常用于集体声明。

2.5链接伪类选择器：

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。