* 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. mysql数据库的基本操作命令整理

    快捷键 ctrl+l 清屏 ctrl +a 回到行首 ctrl + e 回到行末   数据库操作 进入数据库 方式1 mysql -u用户名 -p 密码 --------直接输入密码,缺点,会暴露自己 ...

  2. apache kylin总结

    去年12月挖的坑,今天找时间填上.update:20190119 一.kylin架构 核心是预计算,在此架构上做了一些优化.计算结果存储在Hbase,对Hive等查询转换为Hbase的Scan,提高速 ...

  3. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  4. es6学习日记5-对象的扩展

    属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {foo: &q ...

  5. idea快捷键的设置

    因为开始学java被培训机构里的无良老师给带偏,"染上了"MyEclipse的快捷键"恶习",于是很难改了. 所以,在使用idea时,要设置快捷键了,快点适应之 ...

  6. docker删除镜像文件时，出现image is referenced in multiple repositories如何解决

    1.输入查看镜像文件的命令: $ docker image ls 得到如下结果: 2.删除名为lihui/demo的镜像,输入如下命令: $ docker rmi 9fa504a6066a 报错,报错 ...

  7. vi常用命令及快捷键

    vi常用快捷键 1)移动光标 h :光标左移一个字符j :光标上移一个字符k :光标下移一个字符l :光标右移一个字符 0 :光标移至行首$ :光标移至行尾 H :光标移至屏幕首行M :光标移至屏幕中 ...

  8. PHP发送POST请求

    方式一:cURL $url = "localhost/test/post/service.php"; $data = array("a"=>"网 ...

  9. win7共享打印机如何设置，xp系统如何连接共享打印机。

    一.xp如何连接win7共享打印机——连接win7共享打印机出现“禁用当前的账户”怎么办   保证xp和win7在同一局域网内.然后在xp电脑中打开[运行],输入win7电脑的ip地址.比如,我的办公 ...

  10. 第三节《Git重置》

    先来看看.git/refs/heads/master文件的内容 [root@git demo]# cat .git/refs/heads/master e97f443b2d1cee7eeca7dc2e ...