Question

声明之间有什么区别：

p.myClass { color: red; }

和

.myClass p { color: red; }

Answer 1

第一个是all p elements with class myClass：

<p class="myClass"></p>

，第二个是all p elements inside element has class myClass：

<div class="myClass">
  <p></p>
  <p></p>
</div>

Answer 2

第一种方式p有一个类.myClass，第二种意味着所有p .myClass是父/祖先将具有您应用的规则

p.myClass {
  color: red
}

.myClass p {
  background: red;
  margin: 10px 0
}

<div class="myClass">
  <p class="someClass">this will be red</p>
  <p>this will be red</p>
  <p>this will be red</p>
  <p>this will be red</p>
  <p>this will be red</p>
  <p>this will be red</p>
  <p>this will be red</p>
</div>
<hr />
<p class="myClass">this will be red</p>
<hr />
<section class="myClass">
  <div class="someClass">
    <p>this will be red</p>
    <p>this will be red</p>
    <p>this will be red</p>
    <p>this will be red</p>
    <p>this will be red</p>
    <p>this will be red</p>
    <p>this will be red</p>
  </div>
</section>

Answer 3

p.myClass指的是带有.myClass

的p标签的元素

p .myClass指的是元素在元素内部带有p标记

的元素

.myClass p指的是元素内部带有p标签的元素，其类为'myClass'

Answer 4

p.myClass指的是一个带有“myClass”类的段落元素：

<p class="myClass">

.myClass p指的是一个段落元素，它是具有“myClass”类的任何元素的后代（子）。例如：

<div class="myClass">
  <p></p>
</div>

这里使用的空间称为CSS“组合器”，它是多个选择器之间的关系运算符。您可以在此处阅读有关组合器的信息：https://www.w3schools.com/css/css_combinators.asp

此外，您可以在此处详细了解CSS选择器：https://www.w3schools.com/cssref/css_selectors.asp

Answer 5

p.className将CSS规则仅分配给

指定的元素。

.testClass
{
	color:red;
}

p.testClass
{
	color:blue;
}

<!DOCTYPE html>
<html>
<head>
	<title>Template</title>
	<link rel="stylesheet" type="text/css" href="Template.css">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="Template.js"></script>
</head>
<body>
	<main>
		<div class=testClass>
			This text should be red.
		</div>
		
		<p class=testClass>
			This text should be blue. 
		</p>
		
		
	</main>
	
	<footer>
	Copyright &copy; 2017~M.A.F.
	</footer>

</body>
</html>

CSS：<elementtype> .className之前或之后？

5 个答案: