CSS常用五类选择器，成功入职阿里

①修改 HTML 代码

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。

请看下面的 HTML 代码：

This heading is very important

This paragraph is very important.

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

②语法

我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

.important {color:red;}

如果只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important {color:red;}

③结合元素选择器

类选择器可以结合元素选择器来使用。

♧例如，只让段落显示为红色文本：

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。

♧例如：为 h1 元素指定不同的样式，可以使用选择器

h1.important：

p.important {color:red;}

h1.important {color:blue;}

⑵多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

This paragraph is very important warning.

注：这两个词的顺序无关紧要，写成 warning important 也可以。

假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。

就可以写作：

.important {font-weight:bold;}

.warning{font-style:italic;}

.important .warning{background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

㈥属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

⑴简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例子 1:把包含标题（title）的所有元素变为红色，可以写作：

[title] {color:red;}

例子 2:只对有 href 属性的锚（a 元素）应用样式：

a[herf] {color:red;}

例子 3:根据多个属性进行选择，只需将属性选择器链接在一起即可。

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[herf] [title] {color:red;}

例子 4:对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border:5px solid red;}

⑵根据具体属性值选择

例子 1:将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a [href="http://www.baidu.com"] {color:red;}

例子 2:把多个属性-值选择器链接在一起来选择一个文档。

a [href="http://www.baidu.com"] [title="baidu"] {color:red;}

这会把第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

注意：这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

⑶根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color:yellow;}

注意：如果忽略了波浪号，则说明需要完成完全值匹配。

⑷特定属性选择类型

举例：[lang |="en"] {color:red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

㈦后代选择器

⑴后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

⑵在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。

⑶每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

举例：只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {colopr:red;}

⑴上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中.

⑵h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用：

可以使 HTML 中不可能实现的任务成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。

编写以下样式：

div.sidebar {background:blue;}

div.maincontent {background:white;]

div.sidebar a:link {color:white;}

div.maincontent a:link {color:blue;}

㈧子元素选择器

⑴子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

⑵不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

⑶子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。

例如：选择只作为 h1 元素子元素的 strong 元素，可以这样编写：

h1 > strong {color:red;}

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

[外链图片转存中…(img-M3b0T2Er-1712091755719)]