css - 如何定位特定的 h1 header

Question

我有一个特定的 h1 标题，我想用 css 作为目标，但不确定如何。

HTML

</div>
</header><!-- #masthead -->
<div id="content" class="main-container">
<div class="header-callout"></div>
<section class="content-area  pt0 ">
<div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar. 
right">
<article id="post-9949" class="post-9949 page type-page 
status-publish hentry"><header class="entry-header">
<h1 class="entry-title">Showcase of the Month</h1>   
</header><!-- .entry-header -->

查看here

基本上我想把它居中。但是 margin: auto 从来没有用过。

Answer 1

您可以使用:

.entry-title {
    /* Your CSS */
} 

或

h1.entry-title {
    /* Your CSS */
} 

如果这不起作用，是否有其他 CSS 规则可能适用于此(例如单独的 h1 标记样式？)您可以像这样使其更具体:

header > h1.entry-title {
    /* Your CSS */
} 

这里，> 表示 h1 标签，它们是 header 标签的直接子标签并具有类 entry-title。

---

如果您只想定位这个特定的 h1 标签，请为其指定一个 ID:

<h1 class="entry-title" id="my-title">Text</h1>

可以使用 # 定位 ID:

#my-title {
    /* Your CSS */
} 

或

h1#my-title {
    /* Your CSS */
} 

您甚至可以确保只选择那些具有特定类别和特定 ID 的对象:

h1#my-title.entry-title {
    /* Your CSS */
}