在 CSS 中选择具有确定类的 div 中的特定元素答案

【问题标题】：choosing specific elements within a div with a determined class in CSS在 CSS 中选择具有确定类的 div 中的特定元素
【发布时间】：2017-05-19 05:55:01
【问题描述】：

我在一些 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 $2.8 billion.</p>
        <p>Avatar is... (your review here)</p>
    </div>
</body>
</html>

据我了解，使用p.review 命令我应该使用review 类设置所有<p> 元素的样式，但似乎并非如此。希望有人可以向我解释这一点。

【问题讨论】：

发生了什么？你期待什么输出，你得到什么？

标签： html css class tags elements

【解决方案1】：

把它想象成一棵家谱。你正在做的是在那个家庭中选择一个孩子。您可以选择父项的所有子项，也可以选择具有特殊属性的所有子项。

在你的 HTML 中，review class 是给 "p" 的父级的

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

要选择具有复习班的父母的所有孩子，您需要编写：

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

/* OR */

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

（这意味着，找到所有具有类审查的元素，然后在这些元素中找到所有 p。）

这将选择“review”类元素内的所有“p”标签。

但是，如果您想选择所有具有“review”类的“p”，那么您的代码将是这样的：

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

和 css 将是

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

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

我希望这能说明问题。

【讨论】：

谢谢！！但是鉴于 p 标签是具有“review”类的 div 的子标签，这是否会使所有 p 标签都成为“review”类的一部分？
并非如此。类特定于您赋予它的元素。您可以通过类评论找到父级内的所有 p

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

如果你正在使用

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

然后p元素将以红色字体显示为斜体。我已经更新了你的 sn-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 $2.8 billion.</p>
					<p class="review">Avatar is... (your review here)</p>
			</div>
	</body>
</html>

【讨论】：

【解决方案4】：

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

当您在 CSS 中使用 .class 时，它会影响具有该类的所有 HTML 元素，但是当您使用 HTMLElemet.class（例如.p.large 或 h1.small）时，该类只会影响具有指定的特定 HTML 元素类。

要使用类审查设置<p> 元素的样式，您应该使用类似

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

【讨论】：