Question

我有一个页面，我想要为一个类中的所有<p>元素设置样式。问题在于，它仅设置了所选<p>的样式，而是为页面中的所有<p>元素设置样式。我没有找到任何开放的标签，所以我不知道发生了什么。这是评论代码：

＆＃13;

#mainTips {
  float: left;
  width: 60%;
}

.dicas {
  position: relative;
  display: inline-block;
  background-color: #2980b9;
  width: 10em;
  margin-left: 2em;
  margin-top: 1em;
}

/* Here's where i'm styling the elements */

.dicas h3,
p {
  font-family: 'Ubuntu', sans-serif;
  font-weight: lighter;
  text-align: center;
  color: #ecf0f1;

}

.dicas p {
  font-size: 0.8em;
  margin-top: 6.5em;
}

.dicas:nth-of-type(1) {
  background-image: url("../img/tip1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.dicas:nth-of-type(2) {

  background-image: url("../img/tip2.jpg");

  background-size: cover;

  background-repeat: no-repeat;

}

#othTips {

  margin-top: 1em;

  width: 100%;

}

#othTips img {

  float: left;

  margin-left: 2em;

  width: 9.5em;

  height: 10em;

  margin-bottom: 3em;

}

.description {

  position: absolute;

  background-color: #2980b9;

}

＆＃13;

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <title>Rebecca Bueno</title>
  <!-- Chamando o CSS e as fontes do Google -->
  <link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
  <link href="css/main.css" rel="stylesheet" />
  <link href="css/dicas.css" rel="stylesheet" />
  <link href="css/media.css" rel="stylesheet" />
  <link href="css/animations.css" rel="stylesheet" />
</head>

<body>
  <h1>Rebecca Bueno</h1>

  <div id="menu">
    <!-- Início menu -->
    <ul>
      <a href="index.html">
        <li>Home</li>
      </a>
      <a href="tend.html">
        <li>Tendências</li>
      </a>
      <a href="dicas.html">
        <li>Dicas</li>
      </a>
      <a href="contato.html">
        <li>Contato</li>
      </a>
    </ul>
  </div>
  <!-- Fim menu -->

  <!-- I want to style only that p element. -->
  <div id="mainTips">
    <section class="dicas">
      <article>
        <h3> Dicas para... </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        </p>
      </article>
    </section>
  </div>
  <div id="othTips">
    <a href="#">
      <img src="img/bg2.jpg" />
    </a>
    <!-- But it's also styling here -->
    <div class="description">
      <p>Descrição da dica</p>
    </div>
    <a href="#">
      <img src="img/bg2.jpg" />
    </a>
    <a href="#">
      <img src="img/othtm2.jpg" />
    </a>
    <a href="#">
      <img src="img/othtm2.jpg" />
    </a>
    <a href="#">
      <img src="img/tm4.jpg" />
    </a>
    <a href="#">
      <img src="img/tm4.jpg" />
    </a>
  </div>

  <div id="footer">
    <!-- Rodapé -->

  </div>
</body>

<!-- Chamando o JavaScript -->
<script src="js/styles.js"></script>
<script src="js/pgMan.js"></script>
<script>
  window.onload = function() {
    carregaFundo("bg");
    slideImg();
    lgSld(["Teste da legenda da primeira imagem.",
      "Teste da legenda da segunda imagem.",
      "Teste da legenda da terceira imagem.",
      "Teste da legenda da quarta imagem."
    ]);
  }
</script>

</html>

＆＃13;

Answer 1

.dicas h3,p表示.dicas h3 或 p。逗号组以其他方式完成选择器，包括组合器，而不仅仅是不包含组合器的最近部件。

您需要指定.dicas并为每个部分使用后代组合器。

.dicas h3,
.dicas p {

}

Answer 2

我认为您可能不得不使用.dicas h3,p{...}：

.dicas h3, .dicas p {
     ...
}

前者确实选择了所有p，因为逗号有效地＆＃34;重置＆＃34;选择路线。

Answer 3

您应该使用div > p{}从div中选择所有直接子项。所以，所有内部都有<p>的div都会采用某种风格。

CSS选择器正在选择页面

3 个答案: