改变特异性


<html>
  <head>
    <style type="text/css">
    #sidebar p {
        font-family: Verdana;
        font-size: .9em; }
        #sidebar .intro {
            font-family: Georgia;
            font-size: 1.25em;
            color:red;
            }
    </style>
  </head>
  <body>
    <div id=”sidebar”>
       <p class=”intro”>
           As you can see, the more CSS styles you create, the greater the potential for formatting
          snafus. For example, you may create a class style specifying a particular
         font and font size, but when you apply the style to a paragraph, nothing happens!
          This kind of problem is usually related to the cascade. Even though you may think
         that directly applying a class to a tag should apply the class’s formatting properties,
          it may not if there’s a style with greater specificity.
        You have a couple of options for dealing with this kind of problem. First, you can
        use !important (as described in the box above) to make sure a property always
        applies. The !important approach is a bit heavy handed, though, since it’s hard to
        predict that you’ll never, ever, want to overrule an !important property someday.
        Read on for two other cascade-tweaking solutions.
    </p>    
</div>
  </body>
</html>

#sidebar P 样式的特异性为 101(ID 为 100,标记为 1选择器(,而 .intro 样式的特异性为 10(类选择器为 10 分(。由于 101 大于 10,因此 #sidebar p 优先。将 .intro 更改为 #sidebar .intro 会将其特异性更改为 110。

即使我改变了这个,我的结果也没有到来

谁能解释我。

输出:应为红色,字体大小为 1.25em,字体系列 -格鲁吉亚

ID sidebar 和 classname intro 两边的引号无效。 ”sidebar”应该是"sidebar".

浏览器将ID解释为”sidebar”而不是sidebar,因此,您的任何规则都不匹配。

最新更新