粥粥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条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥15 键盘指令混乱情况下的启动盘系统重装