Question

我认为这是一个非常简单的CSS问题。我有以下内容：

<!doctype html>
<html amp lang="en-US">
   <head>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|PT+Serif:400,700">
      <style amp-custom>
         .sd-title {
            font-family: Cambria, Georgia, "Times New Roman", Times, serif;
            font-size: 12px;
         }
         .single-post h3 {
            font-family: 'Roboto Slab', serif; margin: 0px 0px 5px 0px;
            line-height: 1.6;
         }
      </style>
   </head>
   <body class="single-post ">
       <h3 class="sd-title">Share this:</h3>
   </body>
</html>

我想＆＃34;分享这个：＆＃34;使用css规则中为类＆＃34; sd-title＆＃34;指定的字体显示但它始终使用其他css规则。我尝试增加sd-title规则的特殊性，但无论我做什么，它都不会使用该规则。如何修改sd-title规则以便选择它？

Answer 1

您可以使用css [{ "id": 2, "nome": "User 1", "cpf_cnpj": "11111111111", "rg_ie": null, "nascimento": null, "email": null, "status": null, "velocidade_internet": null, "sigla": null, "funcao": null, "setor": null, "group_id": null, "organization_id": 4, "created_at": "2017-06-23T16:45:35.000Z", "updated_at": "2017-06-26T22:34:34.000Z" }, { "id": 3, "nome": "User 2", "cpf_cnpj": "123123123123", "rg_ie": "123123123", "nascimento": "2017-06-23", "email": null, "status": null, "velocidade_internet": null, "sigla": null, "funcao": null, "setor": null, "group_id": null, "organization_id": 4, "created_at": "2017-06-23T16:55:01.000Z", "updated_at": "2017-06-26T22:34:43.000Z" }]规则来确保不会覆盖样式。例如：

!important

Answer 2

使用放大器，您还可以使用更具体的选择器来覆盖.sd-title规则的后续选择，如下所示：

.single-post h3.sd-title 
{
    font-family: Cambria, Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
}

在普通css中，按照操作顺序，将应用最后一条规则。因此，在这种情况下，您可以在.single-post h3声明之后移动.sd-title声明，或者您可以在.sd-title中将！important添加到font-family规则的末尾以强制它覆盖。单后h3规则。

<style amp-custom>
     .sd-title {
        font-family: Cambria, Georgia, "Times New Roman", Times, serif !important;
        font-size: 12px;
     }
     .single-post h3 {
        font-family: 'Roboto Slab', serif; margin: 0px 0px 5px 0px;
        line-height: 1.6;
     }
  </style>

css帮助规则选择

2 个答案: