* 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. php连接redis服务

    $redis = new Redis(); $redis->connect('127.0.0.1', 6379);//可以执行redis操作了.....  

  2. （28）django的中间件（自定义中间件和防范跨站请求伪造攻击）-重要的概念

    Django中间件和中间件不是同一种东西 什么是中间件:中间件是一个很大的概念,只要程序和程序之间还有一层程序,用来处理两个程序的整个交互过程的请求.数据等等就叫中间件 Django中间件:是介于re ...

  3. hibernate模拟（转载）

    package simulation; /** * * @author Administrator * */ public class User { private int id; private S ...

  4. java中的可释放资源定义，类似c#中的using

    public static class FileDuplicator implements AutoCloseable { Scanner in = null; PrintWriter out = n ...

  5. 用 Excel 画正态分布曲线

    用 Excel 画正态分布曲线 群里有小伙伴询问一道曲线题,有小伙伴看出来是正态分布曲线,刚好之前有大概了解一下正态分布. 可以在 Excel 很容易实现. 使用 NORMDIST 即可. 效果如下:

  6. Docker进入容器后使用ifconfig等命令“command not found”解决办法

      当进入一个容器后,使用ifconfig.ip addr等命令时,出现如下“command not found”:       解决办法:   yum update yum -y install n ...

  7. js 函数问题

    replace() is not a function 1,情景描述:做项目的时候想把内容的某些字符给替换成另外一些字符 2,replace用法:replace() 方法用于在字符串中用一些字符替换另 ...

  8. Linux之ls

    命令功能: ls是list的简写,列出目录下的内容 命令格式: ls [OPTION]... [FILE]... 命令参数: -a,--all    不忽略以“.”开头的隐藏文件 -A, --almo ...

  9. dependency walker检查dll依赖关系目录设置的问题

    废话少说,直接上图 图中来看,似乎IESHIMS.DLL文件不存在报错,实际是因为没有加载IESHIMS.DLL所在的路径. 在我的电脑里面搜索有两个同名的dll,一个是32位的,一个是64位的. C ...

  10. Docker镜像常用命令

    镜像(image)是Docker三大核心概念中最重要的,是运行容器的前提. Docker运行容器前需要本地存在对应的镜像,如果镜像没保存在本地,Docker会尝试先从默认镜像仓库下载(默认使用Dock ...