* querySelectorAll(css的选择器)
*   通过css的选择器获取到的一组元素
*   获取的也是类数组
*
*   主语
*       document    从整个页面去获取一组元素
*       父级        从父级下去获取一组元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

{#        #color>li:first-child{#}

{#            background: #ff0000;#}

{#        }#}

{#        #}

{#        #color>li:nth-child(4){#}

{#            background: yellow;#}

{#        }#}

    </style>

    <script>

        window.onload=function(){

            var lis=document.querySelectorAll('li');

            console.dir(lis);

            var color=document.getElementById('color');

            var lis1=color.querySelectorAll('li');

            var lis2=document.querySelectorAll('#color li');

            console.dir(lis1);

            console.dir(lis2);

            var lis3=document.querySelectorAll('#color ul li');

            console.dir(lis3);

            lis3[lis3.length-1].style.background='gold';

            var greens=document.querySelectorAll('.green');

            console.dir(greens);

            greens[0].style.background='green';

            var uls=document.querySelectorAll('ul');

            console.dir(uls);

            uls[2].style.background='blue';

        }

    </script>

</head>

<body>

<ul id="color">

    <li>red</li>

    <li class="green">green</li>

    <li>blue</li>

    <li>yellow</li>

    <li>

        <ul>

            <li>pink</li>

            <li>white</li>

            <li>black</li>

            <li>gold</li>

        </ul>

    </li>

</ul>

<ul class="color2">

    <li>red</li>

    <li class="green">green</li>

    <li>blue</li>

    <li>yellow</li>

    <li>pink</li>

</ul>

</body>

</html>

　　

css选择器querySelectorAll的更多相关文章

  1. FizzlerEx —— 另一个HtmlAgilityPack的CSS选择器扩展，

    之前我介绍过HtmlAgilityPack的CSS选择器扩展——ScrapySharp,它可以非常方便的实现通过CSS选择器表达式来查询HtmlNode.今天在使用的过程中,发现它不支持nth-chi ...

  2. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...

  3. 怎样通过CSS选择器获取元素节点或元素节点集合

    使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可. // 标签选择器 document.quer ...

  4. 前端面试题-CSS选择器

    一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...

  5. jQuery原理系列-css选择器实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  8. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  9. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

随机推荐

  1. python 实现快速排序和插入排序

    def quick_sort(data): if len(data)<2 or (len(data)==2 and data[0]<=data[1]): #[2,3]此情况会死循环 所以加 ...

  2. Nmap版本检测

    -sV (版本检测) 打开版本检测.同时可以使用-A打开系统探测和版本探测. --allports(不为版本探测排除任何端口) 默认情况下,Nmap版本探测会跳过9100 TCP端口,也可以不理会任何 ...

  3. 在linux中编译grpc

    环境: centos_7_x86_x64 一.下载 1)下载grpc源代码:grpc-1.2.0.zip 2)下载grpc依赖库: 1)benchmark-master.zip 2)boringssl ...

  4. 运行gunicorn失败：[ERROR] Connection in use: ('0.0.0.0', 8000)

    参考:https://pdf-lib.org/Home/Details/5262 执行命令:gunicorn -w 4 -b 0.0.0.0:8000 wsgi:app,遇到如下错误: [2019-0 ...

  5. python制作模块

    自己写的函数,为了下一次方便用,做成模块 主要有这几个步骤: 1:准备发布 2:构建发布 3:导入模块并使用 1:准备发布 首先,我自己写的一个打印出列表(含嵌套列表),打印出列表中的每个数据项,文件 ...

  6. java中的成员变量、静态变量与局部变量

    java中的变量分为成员变量(又叫实例变量).静态变量和局部变量. 1.成员变量 1.1 成员变量(实例变量)是在类中定义的非static修饰的变量,可以不用赋初始值,不同的数据类型有默认的初始值. ...

  7. python unittest setUp 和 setUpClass 区别

    import unittest class Test(unittest.TestCase): def setUp(self): print("start!=======") def ...

  8. mysql 启动失败，数据恢复

    mysql 启动失败,数据恢复 2017年02月13日 16:46:36 阅读数:621 Forcing InnoDB Recovery提供了6个等级的修复模式,需要注意的是值大于3的时候,会对数据文 ...

  9. sql job定时备份数据库

    ---------------------------------------- 对TestDB1进行备份 ---------------------------------------- decla ...

  10. SpringSecurity-FilterSecurityInterceptor的作用

    FilterSecurityInterceptor也是很重要的一个interceptor,它的作用是对request进行权限判断,允许访问或者抛出accessDenied异常. 这个类继承Abstra ...