I have this HTML code as an example:
我有这个HTML代码作为示例:
<body>
<div class="jumbotron">
<h1>Bootstrap Example</h1>
<p>Just another crazy blog</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
I am trying to style the jumbotron using this code:
我正在尝试使用以下代码设置jumbotron的样式:
.jumbotron h1, p{
color: #FAE3F2;
font-family: 'Orbitron', sans-serif;
}
The problem is that when I apply these changes, they also affect the paragraph inside the container and I can't understand why. What am I doing wrong?
问题是,当我应用这些更改时,它们也会影响容器内的段落,我无法理解为什么。我究竟做错了什么?
2 个解决方案
#1
1
Try this
尝试这个
.jumbotron h1, .jumbotron p{
color: #FAE3F2;
font-family: 'Orbitron', sans-serif;
}
The ,
separates whole expressions, so .jumbotron
doesn't carry over to the second one.
分隔整个表达式,所以.jumbotron不会延续到第二个表达式。
#2
0
Replace the selectors with this one:
用这一个替换选择器:
.jumbotron h1, .jumbotron p {...}
Having your selector without .jumbotron p {..}
means that all the p
elements will be selected.
没有.jumbotron p {..}的选择器意味着将选择所有p元素。
#1
1
Try this
尝试这个
.jumbotron h1, .jumbotron p{
color: #FAE3F2;
font-family: 'Orbitron', sans-serif;
}
The ,
separates whole expressions, so .jumbotron
doesn't carry over to the second one.
分隔整个表达式,所以.jumbotron不会延续到第二个表达式。
#2
0
Replace the selectors with this one:
用这一个替换选择器:
.jumbotron h1, .jumbotron p {...}
Having your selector without .jumbotron p {..}
means that all the p
elements will be selected.
没有.jumbotron p {..}的选择器意味着将选择所有p元素。