粥粥528 2022-10-29 22:18 采纳率: 84%
浏览 15
已结题

为什么用jQuery选择器样式出不来啊

标题应该为红色
ul前面符号应该是正方形
li前面符号是三角形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                            $(":input").click(function(){
                                $(":header").css("color","red");
                                $(":header+ul").css("list-style-type","upper-roman");
                                $(":header+ul>li>ul").css("list-style-type","lower-alpha");
                            })
                        })
                    </script>
                </head>
                <body>
                    <h2>Web前端技术</h2>
                    <ul>
                        <li>使用DIV+CSS设计前端网页</li>
                        <ul>
                            <li>页面布局</li>
                            <li>美化页面</li>
                            <li>页面特效</li>
                        </ul>
                        <li>使用JavaScript+Jquery制作页面特效</li>
                        <ul>
                            <li>JavaScript基础</li>
                            <li>Jquery选择器</li>
                            <li>Jquery操作DOM</li>
                        </ul>
                    </ul>
                    <input type="button" value="更改样式" />
    </body>
</html>
  • 写回答

2条回答 默认 最新

  • 人间小美味695 2022-10-30 02:37
    关注

    • upper-roman是大写罗马数字

    • lower-alpha是小写英文字母

    • list-style属性值也没有三角形

    • li的层级应该是(":header+ul>ul>li")

    
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
      $(":input").click(function() {
            $(":header").css("color", "red");
            $(":header+ul").css("list-style-type", "square");
            $(":header+ul>ul>li").css("list-style-type", "lower-alpha");
        });
  })
</script>
  </head>
  <body>
    <h2>Web前端技术</h2>
    <ul>
      <li>使用DIV+CSS设计前端网页</li>
      <ul>
        <li>页面布局</li>
        <li>美化页面</li>
        <li>页面特效</li>
      </ul>
      <li>使用JavaScript+Jquery制作页面特效</li>
      <ul>
        <li>JavaScript基础</li>
        <li>Jquery选择器</li>
        <li>Jquery操作DOM</li>
      </ul>
    </ul>
    <input type="button" value="更改样式" />
  </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • jQuery颜色选择器ColorPicker
    2022-04-26 21:27
    **jQuery颜色选择器ColorPicker详解** 在Web开发中，用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中，颜色选择器是一个常见的组件，它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
  • jQuery国籍选择器
    2021-06-01 19:59
    【jQuery国籍选择器】是一个基于JavaScript库jQuery的插件，主要功能是为用户提供一个完整的、已排序的国家选择界面。这个插件适用于那些需要用户输入国籍的网页表单，能够提供方便、友好的用户体验。 首先，jQuery...
  • jQuery基本选择器选择元素使用介绍
    2020-10-27 12:18
    总结来说，jQuery基本选择器的选择元素功能，以及后续介绍的过滤选择器等高级选择器，共同构成了强大且灵活的jQuery选择器体系，为前端开发人员提供了高效开发页面交互功能的能力。在实际开发过程中，理解这些选择器...
  • jQuery选择器及jquery案例详解(必看)
    2020-10-22 07:48
    本文将重点介绍jQuery选择器的种类和使用，以及通过具体的案例来深入理解jQuery选择器的应用。 首先，jQuery选择器是jQuery库的核心部分之一，它允许开发者通过不同的语法来选择页面上的元素。选择器可以分为几大类...
  • 老生常谈jquery id选择器和class选择器的区别
    2020-10-20 10:53
    5. 从功能上来说，虽然CSS选择器的语法和jQuery选择器相似，但CSS选择器是为样式服务，而jQuery选择器是为添加行为（动作）服务。 了解了id选择器和class选择器的区别之后，开发者可以根据实际需要灵活运用这两种...
  • jQuery选择器总结之常用元素查找方法
    2020-11-28 10:19
    选择器并没有一个固定的定义，在某种程度上说，jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点： 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比，这里简单...
  • jQuery层级选择器实例代码
    2020-10-20 12:19
    这对于学习和实践jQuery选择器具有较高的参考价值。 需要注意的是，由于示例代码中存在一些OCR技术造成的文字识别错误，我们在理解时需要将其错误的文字调整为正确的用法。例如，“”应该更正为“”，这样的调整...
  • jQuery时间选择器datepicker年月日时分秒选择
    2022-02-21 16:24
    其中，jQuery UI是jQuery的一个扩展库，提供了一系列可交互的用户界面组件，其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期，甚至可以扩展到选择时间，实现年月日...
  • jquery样式选择器插件源码demo
    2016-01-23 19:46
    通过阅读和理解这段源码，开发者不仅可以学习到jQuery选择器的工作原理，还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说，这个"jquery样式选择器插件"是一个浓缩的精华，它展示了如何用最少...
  • jquery选择器简述
    2020-10-23 16:35
    总的来说，jQuery选择器是前端开发中不可或缺的一部分，它提供了一套高效、易用的方式来获取和操作DOM元素。选择器的种类丰富，每种都有其特定的使用场景和优势。熟练掌握这些选择器，可以帮助开发者更加轻松地进行...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 12月8日
  • 已采纳回答 11月30日
  • 创建了问题 10月29日