* 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. 内存泄露java.lang.OutOfMemoryError: PermGen space解决方法

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被 ...

  2. Windows 局域网ping获取设备IP

    /********************************************************************** * Windows 局域网ping获取设备IP * 说明 ...

  3. 文笔很差系列1 - 也谈谈AlphaGo

    距离AlphaGo击败李世石已经过去数月了,心中的震撼至今犹在,全刊报道此项比赛的<围棋天地>杂志我已经看了不下十遍.总也想说点自己的意见,却也不知道从哪里说起,更不知道想表达些什么. 作 ...

  4. windows下使用kafka的常用命令

    参考文档: https://blog.csdn.net/evankaka/article/details/52421314 http://orchome.com/6 1 启动zookeeper cmd ...

  5. LiquiBase 学习

    preconditions mysql database is installed maven has been setted up properly add depedenceies apply p ...

  6. day11 大纲

    01 昨日内容回顾 函数名的运用: 1,特殊的变量. 2,函数名可以当做变量赋值. 3,函数名可以当做容器类类型的元素. 4,函数名可以当做函数的参数. 5,函数名可以当做函数的返回值. 函数的运用: ...

  7. Linux（Centos7）下搭建SVN服务器

    操作系统: CentOS 7.6 64位 第一步:通过yum命令安装svnserve,命令如下: 检测svn是否安装: rpm -qa subversion #检查现有版本,如果输入命令后没有提示的话 ...

  8. py-day2-4 python 集合

    # 集合是由 { ,} 组成 test = {1,2,8,9,7,5} print(test) {1, 2, 5, 7, 8, 9} # 集合的结果是 去重的,且排序是 无序的 test = {1,2 ...

  9. 记录一个Q版openstack搭建教程地址

    https://blog.csdn.net/networken/article/details/80682437 感谢这篇文章的作者,文档很详细,记录一下,希望对大家有帮助.

  10. Spring Cloud(Dalston.SR5)--Zuul 网关-Hystrix 回退

    当我们对网关进行配置让其调用集群的服务时,将会执行 Ribbon 路由过滤器,该过滤器在进行转发时会封装为一个 Hystrix 命令予以执行,Hystrix 命令具有容错的功能,如果"源服务 ...