示例2 查询多个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <title>访问元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color:#fff;
                
            }
            .steam{
                text-decoration: initial;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="a">油条</li>
            <li id="b" class="steam">包子</li>
            <li id="c" class="steam">米饺</li>
            <li id="d"><a>鱼粉</a></li>
        </ul>
        <script>
            // 返回多个元素节点
            var els = document.querySelectorAll('li.steam');
            els[0].className='mycolor';
        </script>
    </body>
</html>

按css查询多个元素的更多相关文章

  1. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  2. 按CSS查询一个元素

    按CSS查询 示例1 查询一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  3. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  4. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  5. CSS中如何让元素隐藏

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

  6. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  7. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  8. CSS/CSS3 如何实现元素水平居中

    更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...

  9. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

随机推荐

  1. 学到了林海峰,武沛齐讲的Day22-完 os sys json pickle shelve XML re

    __ file__    =====   文件路径 os.path.dirname( 路径 )=======到上一层目录 os sys

  2. Shared Nothing、Shared Everthting、Shared Disk

    数据库构架设计中主要有Shared Everthting.Shared Nothing.和Shared Disk:1.Shared Everything:一般是针对单个主机,完全透明共享CPU/MEM ...

  3. CF369E Valera and Queries kdtree

    给你一堆线段,求:一个区间内包含的本质不同线段种类数(只要线段有一部分在区间中就算是包含) 考虑容斥:总线段数-被那些没有询问的区间完全覆盖的数量. 用离线+树状数组数点或者 KDtree 数点即可. ...

  4. 内存原理与PHP的执行过程

    一.内存结构 栈区:保存的是变量名(术语:引用),对于cpu来说,读写速度很快 堆区:存储“复杂”的数据,数组.对象.字符串(字符串比较特殊)等 数据段:又分为数据段全局区(用于存储简单的数据,如数字 ...

  5. 二分算法题目训练(三)——Anton and Making Potions详解

    codeforces734C——Anton and Making Potions详解 Anton and Making Potions 题目描述(google翻译) 安东正在玩一个非常有趣的电脑游戏, ...

  6. slax自启动程序

    Fluxbox 本身提供了自启动程序的功能.~/.fluxbox/startup 文件是一个像启动 Fluxbox 一样自启动应用程序的脚本.# 标记是注释. 一个简单的例子: #!/bin/sh # ...

  7. php手记（替代语法、COOKIE及时生效）

    为方便区分流程语句的开始和结束位置,可以使用PHP提供的替代语法进行编码. 左花括号({) - 替换成 → 冒号(:) 右花括号(}) - 替换成 → "endif;" " ...

  8. python 可执行

    py2exe使用方法 py2exe作者:zzj 日期:2006-07-05字体大小: 小 中 大 一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.ex ...

  9. 配置 Ubuntu 服务器

    Python: apt install python3-pip sudo add-apt-repository ppa:fkrull/deadsnakes sudo apt-get update ap ...

  10. 转录调控 | Transcriptional Regulation | Regulon

    scRNA-seq做完该做的QC.normalization.imputation.clustering.trajectory和integration,就会开始做转录调控的分析了. 核心就是围绕着TF ...