在 div 中选择特定元素，在 CSS 中确定 class

Question

我很难处理一些 CSS 初学者的东西。我目前正在学习 CodeAcademy CSS 课程，我在这里有疑问：

.review { 
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
}
p.review { 
    font-style: italic;
    color: red;
}

<!DOCTYPE html>
<html>
<head> 
    <title>MyWebPage</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href= "style.css" type= "text/css" rel="stylesheet">
</head>
<body>
    <div class="review">
        <h2>The Godfather</h2>
        <p>The Godfather (1972) is the greatest movie of all time, 
               according to numerous surveys of movie critics and audiences alike.</p>
        <p>The Godfather is... (your review here)</p>
    </div>
    <div class="review">
        <h2>Avatar</h2>
        <p>Avatar (2009) is the highest grossing film of all time, 
               earning approximately .8 billion.</p>
        <p>Avatar is... (your review here)</p>
    </div>
</body>
</html>

根据我的理解，使用 p.review 命令我应该使用 review class 为所有 <p> 元素设置样式，但这似乎不是是这样的。希望有人可以向我解释这一点。

Answer 1

当您使用 p.review 时，它实际上意味着对于每个也有 class 评论的 p 标签，应用这些样式。它不会将 class 评论应用于 p 标签。相反，您可以只使用选择器 p 或将 class review 添加到您想要更改的那些 p 标签中。

Answer 2

p.class 选择器选择具有特定 class 的所有 p 标签元素。

当您在 CSS 中使用 .class 时，它会影响具有该 class 的所有 HTML 元素，但是当您使用 HTMLElemet.class 时（eg.p.large 或 h1.small)，class 仅影响具有指定 class.

的特定 HTML 元素

要为带有 class 评论的 <p> 元素设置样式，您应该使用

<p class="review" >Text</p>

Answer 3

p.review 查找具有 class review 的 p 元素。但是在您的代码中，p 没有任何 class review。只有 div 有 class review。

如果您正在使用

<p class="review">Avatar is... (your review here)</p>

然后p元素将以红色字体显示为斜体。我已经更新了您的代码段。

.review { 
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
 p.review { 
   font-style: italic;
   color: red;
  }

<!DOCTYPE html>
<html>
 <head> 
  <title>MyWebPage</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href= "style.css" type= "text/css" rel="stylesheet">
 </head>
 <body>
    <div class="review">
     <h2>The Godfather</h2>
     <p>The Godfather (1972) is the greatest movie of all time, 
     according to numerous surveys of movie critics and audiences alike.</p>
     <p>The Godfather is... (your review here)</p>
   </div>
   <div class="review">
     <h2>Avatar</h2>
     <p>Avatar (2009) is the highest grossing film of all time, 
     earning approximately .8 billion.</p>
     <p class="review">Avatar is... (your review here)</p>
   </div>
 </body>
</html>

Answer 4

将其视为家谱。您正在做的是在那个家庭中选择 child。你可以 select 一个 parent 的所有 children 或者你可以 select 所有 children 一个特殊的属性.

在你的HTML中，评论class被给予了"p"parent

<div class="review">
  <p>... some text ...</p>
</div>

致selectparent的所有child人class，您需要写：

.review p {
   /*your css goes here*/
}

/* OR */

.review > p {
   /*your css goes here*/
}

（这意味着，找到所有带有 class 评论的元素，然后找到这些元素中的所有 p。）

这将 select 带有 class "review" 的元素内的所有 "p" 标签。

但是如果你想选择所有 "p" 有 class "review" 那么你的代码将是这样的：

<div>
  <p class="review">... some text ...</p>
</div>

和 css 将是

p.review {
   /*your css goes here*/
}

（这意味着，找到所有有 class 评论的 p）

我希望这能说明问题。

在 div 中选择特定元素，在 CSS 中确定 class

choosing specific elements within a div with a determined class in CSS

html

css

tags

class

elements