Question

我想我遇到了CSS选择器问题。我想将我的文字和＃34;最佳SUV放在2015年和＃34;。

我试图打电话给中心的文字对齐rtecenter，但它被原来的课程复制了＃34;摘要标题＆＃34;左边有一个文本对齐。我想保持文本左对齐，因为如果我将其更改为居中，则会影响其他页面。

什么是中心调整的最佳方式＆＃34; 2015年最佳SUV＆＃34;没有创造另一种风格？

这是我的傻瓜：http://jsfiddle.net/huskydawgs/a9Lmq7pf/6/

这是我的代码：

<div id="wrapper-landing">
    <div class="industry-intro rtecenter">
    <h3 class="summary-headline rtecenter">Best SUV in 2015</h3>
    <p>When it comes to safety the 2015 Subaru Forester simply runs over the competition.

</p>
    </div>
</div>

这是我的CSS：

#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;

}

.industry-intro,.landing-intro {
    margin: 0 30px 0 30px;
}

#wrapper-landing p {
    color: rgb(102, 102, 102);
    font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
}

    h3.summary-headline {
        color: #2251a4;
        font-family: SegoeBold, Helvetica, Arial;
        font-size: 26px;
        line-height: 34px;
        margin: 0 0 10px 0;
        text-align: left;
    }

.rtecenter {
    text-align: center;
}

Answer 1

如果您可以从h3移除h3.summary-headline，则{}允许.rtecenter的文字对齐声明覆盖.summary-headline的值。

即：

.summary-headline {
    color: #2251a4;
    font-family: SegoeBold, Helvetica, Arial;
    font-size: 26px;
    line-height: 34px;
    margin: 0 0 10px 0;
    text-align: left;
}

.rtecenter {
    text-align: center;
}

h3.summary-headline（适用于标记和类组合）的特异性大于仅适用于类的声明，因此text-align: left胜过text-align: center。 1}}。 CSS Tricks有一个非常有用的CSS选择器特异性指南：Specifics of CSS Specificity。

Answer 2

你基本上只需要更高的特异性：

所以你可以添加这个CSS样式：

h3.rtecenter {
    text-align: center;
}

或

.summary-headline.rtecenter {
    text-align: center;
}

更适合您的布局。

http://jsfiddle.net/biz79/a9Lmq7pf/14/

Answer 3

h3.summary-headline比.rtecenter更具体，因为它指定了一个元素和一个类（它比一个类更具体）。您可以通过添加h3.summary-headline选择器将其设置为具体，并通过添加.rtecenter进一步覆盖它：

.rtecenter,
h3.summary-headline.rtecenter {
    text-align: center;
}

Answer 4

特异性决定了浏览器应用的CSS规则：！important＆gt;内联样式＆gt; ID＆gt; <伪类>属性选择器＆gt;课程＆gt;输入＆gt;通用

截至目前，h3.summary-headline具有比.rtecenter更高的特异性，因此它将优先考虑。如果从.summary-headline中删除h3规范，.rtecenter将优先考虑，因为它的位置是你的css文件较低。

如何在不创建其他样式的情况下居中文本

4 个答案: