问答详情
源自：9-4 为所欲为 - 选择器最高层级!important

p.first{}和p>first{}的区别？请举个简单点的例子 谢谢

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>


提问者：vcxiaohan 2015-06-16 09:18

个回答

  • 程序爱好者11
    2015-06-16 09:35:46
    已采纳

    p.frist{}意思是选择class为frist的p标签      p>.first  是选择p的第一代子元素          不是p>first   要加.


    0
  • puffbaby
    2015-06-17 16:42:12

    lZ 问的是  p>.first   为什么没生效吧

    0
  • 奔跑的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>


    0
  • 奔跑的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>


    2
  • 程序爱好者11
    2015-06-16 09:47:49

    p .stress  和p>.stress  都可以

    0
  • 程序爱好者11
    2015-06-16 09:46:36

    因为 这个class 不是在p标签内

    0
  • 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>


    0