如何在CSS中选择另一个元素?

时间:2021-09-27 07:08:14

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元素。