css - 如何推翻先前的CSS

Question

为什么我不能用div类“title left”控制下面的<p>标签

<td align="left" >
                    <div class="pop-posts-image-left">
                            <a href="http://www.livecrafteat.com/live/meal-planning-template/"> 
                                <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" alt="" />  
                            </a>
                           <div class="title left">
                                <p text-align="center">  
                                     This Is An Example Post Title 
                                </p> 
                           </div>  
                     </div>
</td>

相反，它受到以下控制：

body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, select, textarea {
color: #70635A;
font-family: "Century Gothic",AppleGothic,Arial,sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
}

Answer 1

title left不是一个类。这是两个类：title和left

您可以使用其中之一将样式应用于 P 标签：

.title p {your styles}

或两者，如果你愿意

.title.left p {your styles}

Answer 2

它现在不应用它的原因是因为标签名称的 CSS 样式优先于使用类定义的样式。

使用您定义的样式，您可以指定要将其应用于<p>：

.title-left, .title-left p {
    color: #000;    
    font-size: 20px;
}

在 HTML 中：

<div class="title-left"> 
  <p> This Is An Example Post Title </p>
</div>

或者，如果您只想将样式应用于<p>而不是<div>：

.title-left {
    color: #000;    
    font-size: 20px;
}

在 HTML 中：

<div> 
  <p class="title-left"> This Is An Example Post Title </p>
</div>

您可以在此处测试修改。