* 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. 返回指针的函数 ------ 指针函数（pointer function）

    指针函数: 其本质是一个函数, 其函数返回值为某一类型的指针. 定义形式: 类型 *指针变量名(参数列表): 例如: int *p(int i,int j); p是一个函数名,该函数有2个整形参数,返 ...

  2. C# 日志记录分级功能使用 按照日期，大小，或是单文件存储

    本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...

  3. jQuery-1.样式篇---选择器

    jQuery选择器之id选择器 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处 ...

  4. SpringCloud分布式配置中心所遇问题

    1.如果更换了获取配置文件的名称一定要在客户端配置文件的name更改2.不建议服务器设置下拉到git仓库的配置文件地址,可能导致更换地址之后无法获取到新更改的

  5. python: ImportError:DLL load failed 解决方法。

    在学习使用wordcloud 库创建词云过程中,mooc里提到可以使用另一个库函数,来创建不同形状的词云. 就是这句: ... from scipy.misc import imread mk = i ...

  6. QT4.8.6-VS2010开发环境配置

    目录 1.下载软件 2.环境配置 3.VAssistX配置 1.下载软件 VS2010下载地址:链接: https://pan.baidu.com/s/1gvPjZWBtSEwW37H1xf2vbA ...

  7. PythonStudy——Python中的None与 NULL(即空字符)的区别

    None与 NULL(即空字符)的区别  (1)是不同的一种数据类型 >>>type(None) <class 'NoneType'> >>>type( ...

  8. jar包不能乱放【浪费了下午很多时间】

    不能放在类路径下(也即是src文件夹下),然后再buildpath 必须放在web-inf文件夹下 这样才能tomcat找打jar文件

  9. 使用phpAnalysis打造PHP应用非侵入式性能分析器

    使用phpAnalysis打造PHP应用非侵入式性能分析器,查找PHP性能瓶颈. 什么是phpAnalysis phpAnalysis是一款轻量级非侵入式PHP应用性能分析器,适用于开发.测试及生产环 ...

  10. commit lint规范化团队git提交信息

    一.快速提交符号angular编码规范的提交信息 1.命令行中安装commitizen: npm install -g commitizen commitizen init cz-convention ...