Question

我正在尝试减小h4标头的字体大小并更改其他一些内容，但是h4类.awpcp-listing-title似乎不能用作选择器。

尝试了多个选项，包括important，例如我在这里的代码：

.awpcp-listing-title {
    font-size: 10px; 
    margin-right: 50px; 
    padding: 15px;
 }

    <div class="awpcp-listing-excerpt-inner" style="w">
        <h4 class="awpcp-listing-title"><a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/28/scarf/london/uk/barnet/clothes/">Scarf</a></h4>
        <div class="awpcp-listing-excerpt-content">Grey scarf</div>
    </div>
    <div class="awpcp-listing-excerpt-extra">
        05/10/2019<br/>

Answer 1

代码不起作用的原因是您使用的是定位标记，而CSS没有代码可以更改该字体大小。

.awpcp-listing-title a{ 
   font-size: 10px; 
   margin-right: 50px; 
   padding :  15px;
}

    <div class="awpcp-listing-excerpt-inner" style="w">
        <h4 class="awpcp-listing-title"><a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/28/scarf/london/uk/barnet/clothes/">Scarf</a></h4>
        <div class="awpcp-listing-excerpt-content">Grey scarf</div>
    </div>
    <div class="awpcp-listing-excerpt-extra">
        05/10/2019<br/>

Answer 2

.awpcp-listing-title {font-size: 10px !important;}

！important非常“重要”，以确保将应用CSS。

Answer 3

尝试此代码。

h4.awpcp-listing-title a {
    font-size: 10px!important;
    margin-right: 50px;
    padding: 15px;
}

Answer 4

.awpcp-listing-title a 
{
  font-size: 10px!important;
  margin-right: 50px; 
  padding:15px;
}

<div class="awpcp-listing-excerpt-inner" style="w">
        <h4 class="awpcp-listing-title"><a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/28/scarf/london/uk/barnet/clothes/">Scarf</a></h4>
        <div class="awpcp-listing-excerpt-content">Grey scarf</div>
    </div>
    <div class="awpcp-listing-excerpt-extra">
        05/10/2019<br/>

检查并尝试此代码

Answer 5

h4.awpcp-listing-title{
font-size:20px !important;
}

<div class="awpcp-listing-excerpt-inner">
        <h4 class="awpcp-listing-title"><a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/28/scarf/london/uk/barnet/clothes/">Scarf</a></h4>
        <div class="awpcp-listing-excerpt-content">Grey scarf</div>
    </div>
    <div class="awpcp-listing-excerpt-extra">
        05/10/2019<br/>
</div>

删除样式=“ w”的固定代码不正确

Answer 6

您真的不应该使用！important ，因为所有其他答案都表明-您只需要找到合适的选择器即可，它不是h4，而是{{1} }。

简单地说-浏览器使用默认样式渲染h4，因此首先-清除使用h4元素作为选择器，然后定位其子元素a。

我将其设置为红色以表明它已被定位。

h4 {
  margin: 0;
  padding: 0;
 }

.awpcp-listing-title a {
  font-size: 10px;
  margin-right: 50px; 
  padding 15px;
  color: red;
 }

如何选择h4标题

6 个答案: