英文:
how to chain CSS class selectors , which having multiple parent class?
问题
如果HTML结构如下：
-section1
--h1
--h2
--h3
--section2
--h1
--h2
--h3
-section3
--h1
--h2
--h3
--section4
--h1
--h2
--h3
如果我们想要让section1, section2, section3具有相同的样式，而section4具有不同的样式，可以使用以下简短的代码：
.section1 .h1,
.section2 .h1,
.section3 .h1 {
color: blue;
}
.section1 .h2,
.section2 .h2,
.section3 .h2 {
color: blue;
}
.section1 .h3,
.section2 .h3,
.section3 .h3 {
color: blue;
}
.section4 .h1,
.section4 .h2,
.section4 .h3 {
/* 不同的样式 */
}
这种方式可以更简洁地为不同的部分定义样式。
英文:
if HTML is like:
-section1
--h1
--h2
--h3
--section2
--h1
--h2
--h3
-section3
--h1
--h2
--h3
--section4
--h1
--h2
--h3
what should we do if we want to give section1, section2, section3 same style and section4 different style ? in short code.
I wrote the code like
.section1 .h1,
.section1 .h2,
.section1 .h3,
.section2 .h1,
.section2 .h2,
.section2 .h3,
.section3 .h1,
.section3 .h2,
.section3 .h3,{
color: blue;
}
but its too long and looking bad, is there any short way to write this.
答案1
得分: 1
你也可以像下面这样做：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
[class^="section"]:not(.section4) :is(h1,h2,h3) {
color: blue;
}
<!-- language: lang-html -->
<section class="section1">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section2">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section3">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section4">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<!-- end snippet -->
英文:
You can do like below as well:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
[class^="section"]:not(.section4) :is(h1,h2,h3) {
color: blue;
}
<!-- language: lang-html -->
<section class="section1">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section2">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section3">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section4">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<!-- end snippet -->
答案2
得分: 0
最短的纯CSS代码是通过使用[class^="..."]属性选择器选择以section开头的所有元素，然后专门覆盖第4个部分的样式：
[class^="section"] h1,
[class^="section"] h2,
[class^="section"] h3 {
color: blue;
}
.section4 h1,
.section4 h2,
.section4 h3 {
color: red;
}
或者，你也可以使用预处理器如SASS：
[class^="section"] {
h1, h2, h3 {
color: blue;
}
}
.section4 {
h1, h2, h3 {
color: red;
}
}
英文:
The shortest vanilla CSS code is by selecting all elements that start with section by using the [class^="..."] attribute selector. Then overwrite the styles for section 4 specifically:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
[class^="section"] h1,
[class^="section"] h2,
[class^="section"] h3 {
color: blue;
}
.section4 h1,
.section4 h2,
.section4 h3 {
color: red;
}
<!-- language: lang-html -->
<section class="section1">
This is Section 1
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section2">
This is Section 2
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section3">
This is Section 3
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<section class="section4">
This is Section 4
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
</section>
<!-- end snippet -->
Alternatively, you can also use a Preprocessor like SASS:
[class^="section"] {
h1, h2, h3 {
color: blue;
}
}
.section4 {
h1, h2, h3 {
color: red;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论