Question

我正在使用this教程学习jQuery，但其中一个示例不起作用。

<html>
  <head>
    <style type="text/css">
      a.test { font-weight: bold; background: #fc0 }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#ol > li").addClass("test");
        $("#some").addClass("test");
      });
    </script>
    </head>
   <body>
     <a href="http://jquery.com/" id="some">Some</a>
     <ul id="ol">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </body>
</html>

此示例将“test”样式应用于超链接（#some），但不将此样式应用于有序列表（#ol）。为什么呢？

Answer 1

从

中删除a

a.test { font-weight: bold; background: #fc0 }

a将其限制为链接（锚标记）。

Answer 2

JavaScript没问题，CSS没有。 CSS规则仅适用于链接。

要查看效果，请将CSS更改为：

.test { font-weight: bold; background: #fc0 }

“#orderedlist＆gt; li”选择器

2 个答案: