* 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. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

  2. 新建一个self hosted Owin+ SignalR Project(2)

    ASPNET SignalR是为ASP.NET开发人员提供的一个库,可以简化开发人员将实时Web功能添加到应用程序的过程.实时Web功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向 ...

  3. Linux下，用命令进行 日志分割、日志合并

    指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file

  4. day05 字典

    今日内容(dict) 1.基本格式 2.独有方法 3.公共 4.强制转换 1.基本格式 字典(可变类型,3.6之后是有序) 帮助用户去表示一个事物的信息(事物是有多个属性) 键值不能为集合,列表,字典 ...

  5. ionic使用的一些技巧

    使用ionic总结: 1.全局禁用缓存的方法是:  $ionicConfigProvider.views.maxCache(0); 2. 在不同的用户输入场景下,需要显示不同的键盘模式以方便用户输入, ...

  6. day50 django第一天 自定义框架

    主要内容: 1.http协议 2.web框架 3.Django 1.http协议 1.1 http协议的简介 超文本传输协议(英文:Hyper Text Transfer Protocol,HTTP) ...

  7. 我发起了一个 网格计算 协议 开源项目 GridP

    GridP  是   Grid Protocol   的 全称  . 我在 <关于软件产业的两个契机>  https://www.cnblogs.com/KSongKing/p/95319 ...

  8. CenterOS7.5中搭建wordpress

    centeros7.5中搭建wordpress 1.环境 云平台:华为云 服务器操作系统:CentOS7.: 博客部署的服务器:Apache HTTP: 数据库:mysql: 框架:wordpress ...

  9. Python变量以及类型

    变量的定义 在程序中,有时我们需要对2个数据进行求和,那么该怎样做呢? 大家类比一下现实生活中,比如去超市买东西,往往咱们需要一个菜篮子,用来进行存储物品,等到所有的物品都购买完成后,在收银台进行结账 ...

  10. 使用nrm工具高效地管理npm源

    在使用npm时,官方的源下载npm包会比较慢,国内我们基本使用淘宝的源,如果公司内部搭建了一套npm私有仓库,公司内部的源不可能把npm官方的npm包都同步,所以需要切换npm源.如果使用npm/cn ...