* querySelector(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 red=document.querySelector('#color li:first-child');

            red.style.background='red';

            var ul=document.querySelector('.color2');

            ul.style.background='yellow';

        }

    </script>

</head>

<body>

<ul id="color">

    <li>red</li>

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

    <li>blue</li>

    <li>yellow</li>

    <li>pink</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选择器querySelector的更多相关文章

  1. HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  2. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  3. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  4. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

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

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

  7. CSS选择器实现搜索功能 驱动过滤搜索技术

    一.CSS选择器可以用来实现搜索功能 CSS选择器可以用来实现搜索功能. 作者以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素. ...

  8. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

  9. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

随机推荐

  1. Ubuntu 远程使用ssh 开启服务器终端的方法

    首先,加载服务器环境变量$DISPLAY,需要先从服务器获取值 echo $DISPLAY 假如返回值为1001,本地通过sshpass启动终端,假设服务器用户名server,密码passwd, ip ...

  2. 20155208徐子涵 Exp4 恶意代码分析

    20155208徐子涵 Exp4 恶意代码分析 实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使 ...

  3. 查看Linux磁盘空间

    df -hl 查看磁盘剩余空间 df -h 查看每个根路径的分区大小 du -sh [目录名] 返回该目录的大小 du -sm [文件夹] 返回该文件夹总M数 du -h [目录名] 查看指定文件夹下 ...

  4. PHP 打开已有图片进行编辑

    <?php header("content-type:image/jpeg");//表明请求页面的内容是jpeg格式的图像 即当前页面会以图片的新式展示 去掉这行就可以显示正 ...

  5. hdu5007 Post Robot AC自动机

    DT is a big fan of digital products. He writes posts about technological products almost everyday in ...

  6. PythonStudy——字典的定义 Dictionary definition

    # 空字典 d1 = {} d2 = dict() # 用map映射创建字典 d3 = dict({'a': 1, 'b': 1}) print(d3) # 用关键字赋值方式 d4 = dict(na ...

  7. CentOS 7 快速部署 ELK

    先简单说一下部署思路及原理(不一定正确,只是个人理解而已) 1.修改系统参数,以便安装软件 2.安装配置elasticsearch,这个相当于总监测中心,用来收集logstash监测的各种服务应用日志 ...

  8. Python tkinter模块和参数

    转自:https://www.cnblogs.com/aland-1415/p/6849193.html 1.使用tkinter.Tk() 生成主窗口(root=tkinter.Tk()):root. ...

  9. Linux查看和修改文件时间

    参考http://www.361way.com/chang-file-time/1632.html 一:查看时间 1:查看文件的具体时间信息 File: `probn' Size: Blocks: I ...

  10. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...