Question

我有以下CSS

.align-headers-desktop-left h1, h2, h3, h4, h5, h6 {
    text-align: left;
    color: red;
}

.align-headers-desktop-right h1, h2, h3, h4, h5, h6 {
    text-align: right;
    color: red;
}

.align-headers-desktop-centre h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: red;
}

.align-headers-desktop-justify h1, h2, h3, h4, h5, h6 {
    text-align: justify;
    color: red;
}

在第一个div中，标题将正确对齐，问题是在下一个div中，标题将与第一个div的对齐方式对齐。

我曾尝试使用!important，但这是行不通的，我曾尝试将div添加到类的开头，但这行不通

文字如下

<div class="align-headers-desktop-right">
    <h1>H1</h1>
</div>

任何帮助将不胜感激

Answer 1

经过漫长的一天，CSS应该如下所示

div.align-headers-desktop-left h1, div.align-headers-desktop-left h2, div.align-headers-desktop-left h3, div.align-headers-desktop-left h4, div.align-headers-desktop-left h5, div.align-headers-desktop-left h6 {
        text-align: left;
        color: red;
    }
    div.align-headers-desktop-right h1, div.align-headers-desktop-right h2, div.align-headers-desktop-right h3, div.align-headers-desktop-right h4, div.align-headers-desktop-right h5, div.align-headers-desktop-right h6 {
        text-align: right;
        color: red;
    }
    div.align-headers-desktop-centre h1, div.align-headers-desktop-centre h2, div.align-headers-desktop-centre h3, div.align-headers-desktop-centre h4, div.align-headers-desktop-centre h5, div.align-headers-desktop-centre h6 {
        text-align: center;
        color: red;
    }
    div.align-headers-desktop-justify h1, div.align-headers-desktop-justify h2, div.align-headers-desktop-justify h3, div.align-headers-desktop-justify h4, div.align-headers-desktop-justify h5, div.align-headers-desktop-justify h6 {
        text-align: justify;
        color: red;
    }

Answer 2

这是一个有效的示例：

.align-headers-desktop-left h1,
.align-headers-desktop-left h2,
.align-headers-desktop-left h3,
.align-headers-desktop-left h4,
.align-headers-desktop-left h5,
.align-headers-desktop-left h6 {
  text-align: left;
  color: red;
}
.align-headers-desktop-right h1,
.align-headers-desktop-right h2,
.align-headers-desktop-right h3,
.align-headers-desktop-right h4,
.align-headers-desktop-right h5,
.align-headers-desktop-right h6 {
  text-align: right;
  color: red;
}
.align-headers-desktop-centre h1,
.align-headers-desktop-centre h2,
.align-headers-desktop-centre h3,
.align-headers-desktop-centre h4,
.align-headers-desktop-centre h5,
.align-headers-desktop-centre h6 {
  text-align: center;
  color: red;
}
.align-headers-desktop-justify h1,
.align-headers-desktop-justify h2,
.align-headers-desktop-justify h3,
.align-headers-desktop-justify h4,
.align-headers-desktop-justify h5,
.align-headers-desktop-justify h6 {
  text-align: justify;
  color: red;
}

<div class="align-headers-desktop-left">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-centre">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-right">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-justify">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>

在div中将h1与h6对齐不同

2 个答案: