Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

CSS系列之多类选择器和结合元素选择器 #12

Open
yuanyuanbyte opened this issue Nov 12, 2021 · 0 comments
Open

CSS系列之多类选择器和结合元素选择器 #12

yuanyuanbyte opened this issue Nov 12, 2021 · 0 comments
Assignees
@yuanyuanbyte

Comments

@yuanyuanbyte
Copy link
Owner

日常开发中我们会碰到css中两个类选择器之间有的有空格，有的没空格。有空格的是后代选择器，那没有空格的是什么呢？

没有空格的选择器有两种：多类选择器和结合元素选择器。

结合元素选择器

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

p.important {color:red;}

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。我更想把其解释为：“段落中类名（class属性）为important的元素”，或者“是段落，同时类名也是important的”。

多类选择器

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:red;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

<p>This is a paragraph.</p>

<p>...</p>
</body>
</html>

在这里插入图片描述
在 HTML 中，一个标签可能有多个类名（class），每个类名之间用空格分隔。

通过把两个类选择器链接在一起，中间不加空格，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
@yuanyuanbyte yuanyuanbyte self-assigned this Nov 12, 2021
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@yuanyuanbyte yuanyuanbyte

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yuanyuanbyte