p.first{}和p>first{}的区别？请举个简单点的例子 谢谢
vcxiaohan
2015-06-16 09:18
p.first{color:green;}为什么在这里p>first不会生效？
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span >胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着：<span class="first">我来，我来。"</span>我环顾了四周，就我没有举手。</p>
7回答
-
- 程序爱好者11
- 2015-06-16 09:35:46
p.frist{}意思是选择class为frist的p标签 p>.first 是选择p的第一代子元素 不是p>first 要加.
-
- puffbaby
- 2015-06-17 16:42:12
lZ 问的是 p>.first 为什么没生效吧
-
- 奔跑的Q丶
- 2015-06-16 10:14:14
例子把class名称过滤掉了。。。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> strong{background-color: red;} p>.first{display: inline-block; background-color: pink;} /*p .first{display: inline-block; background-color: pink;}*/ </style> </head> <body> <p> <span class="first">p标签</span>的子元素。 <em class="first"> 我也可以是类名为<strong class="first">first</strong>的标签。 </em> </p> </body> </html> -
- 奔跑的Q丶
- 2015-06-16 10:10:59
p.first表示选择的是类名为first的p标签。这种情况其实也可以写成.first，但是为了语义化，并且防止与其他类名为first的标签冲突，因此这样写更加清晰。例：
<p class="first">类名为first的p标签</p> ?*在这里，p.first 和 p 或者 .first 都是代表此标签。*/
p>first这种写法是错误的。首先“>”表示子元素选择器，如果此处改为p>.first则表示“选择作为 p 元素子元素的所有类名为first的元素”。例：
<p> <span class="first">p标签</span>的子元素。 <em class="first">我也可以是类名为<strong class="first">first</strong>的标签。</em> </p>
此时如果设置p>.first{}样式表，则此例中span元素、em元素均受影响。但是em元素的子元素strong元素不受影响。此时要注意对比p .frist{}样式表，如果使用该方式样式表，则strong元素同样受影响。
说的可能有点绕。你自己在编辑器中打开以下代码。分别注释掉p>.first和p .first查看效果。另外你需要重新回头好好理解CSS的选择器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> strong{background-color: red;} p>.first{display: inline-block; background-color: pink;} /*p .first{display: inline-block; background-color: pink;}*/ </style> </head> <body> <p> <span>p标签</span>的子元素。 <em> 我也可以是类名为<strong>first</strong>的标签。 </em> </p> </body> </html> -
- 程序爱好者11
- 2015-06-16 09:47:49
p .stress 和p>.stress 都可以
-
- 程序爱好者11
- 2015-06-16 09:46:36
因为 这个class 不是在p标签内
-
- vcxiaohan
- 2015-06-16 09:42:01
.stress{font-weight:bold;}为什么在.stress前面加个p就失效了？
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<a href="http://www.imooc.com">批评</a>我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，<span class="stress">我们班上了一节公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
初识HTML(5)+CSS(3)-升级版
1225297 学习 · 18230 问题
相似问题