gpt4 book ai didi

html - CSS 选择器正在选择页面中的所有 p 元素

转载 作者:行者123 更新时间:2023-11-28 06:35:40 24 4
gpt4 key购买 nike

我有一个页面,我想为所有 <p> 设置样式类中的元素。问题是,而不是只对选定的 <p> 设置样式。 , 它是所有 <p> 的样式页面中的元素。我没有找到任何打开的标签,所以我不知道发生了什么。这是注释代码:

#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;

}
<!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>

最佳答案

我认为您可能打算使用以下而不是 .dicas h3,p{...}:

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

前者确实选择了所有 p,因为逗号有效地“重置”了选择路径。

关于html - CSS 选择器正在选择页面中的所有 p 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34700733/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com