html - 更改特定页面内元素的 css

Question

我正在尝试更改页面内特定元素的 CSS(因为我需要它们在特定页面上有所不同)尝试这样做无济于事。

<script>
 $(document).find('#nav-icon span').css({
    'background-color': '#333'
 });

 $(document).find('.screen-nav li a').css({
    'color': '#fff'
 });

 $(document).find('.screen-nav li a:after').css({
    'background-color': '#fff'
 });
</script>

Answer 1

但是，您正试图从 document 中查找在 DOM 准备就绪之前运行的 html 元素。因此，您需要在 DOM 准备就绪后绑定(bind) find 函数，并且 jquery 脚本应该与 document.ready 函数一起使用，并尝试像这样从 jQuery 更改 css 属性:

HTML

<nav class="screen-nav">
 <ul>
   <li><a href="#">AA</a></li>
   <li><a href="#">BB</a></li>
   <li><a href="#">CC</a></li>
   <li><a href="#">DD</a></li>
 </ul>
</nav>

JQUERY

 $(document).ready(function(){
   $('.screen-nav li a').css({
     "background-color": "yellow",
     "font-size": "200%",
     "color":"#000"
   });
 });

工作演示 here