示例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. 爬虫（十七）：scrapy分布式原理

    一:scrapy工作流程 scrapy单机架构: 单主机爬虫架构: 分布式爬虫架构: 这里重要的就是我的队列通过什么维护?这里一般我们通过Redis为维护,Redis,非关系型数据库,Key-Valu ...

  2. python获取当前天气情况

    利用 Python 从互联网公开服务中获取天气预报信息.天气信息来源网站:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx实现以下 ...

  3. for循环实战性能优化

    完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...

  4. Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1)

    Virtual participate 的,D题不会做,打了1:30就打不动了,过了ABCE. A - CME 题意:? 题解:? void test_case() { int n; scanf(&q ...

  5. springboot读取外部配置文件

    springboot项目打成jar包后不好进行配置文件修改,可设置为读取外部配置文件,方便进行配置修改. 步骤: 1.将jar包中的application.properties配置文件复制到自定义路径 ...

  6. python3编程基础之一：代码封装

    几乎现代的编程语言都支持函数,函数是代码段的封装,并能实现一特定功能,并能重复使用的代码单位.之前的pow()和sqrt()和print()和input()等类似的内置函数,就是python内部已经实 ...

  7. python3编程基础之一：量的表示

    计算机的操作最终表现是数据的操纵,为了表示和存储数据,都需要对数据进行引用,计算机可以直接从内存地址实现一步访问数据,但是编程的人却没有这种能力.就像人可能够不到在高处的氢气球,但是可以拉动邦在氢气球 ...

  8. Apache Flink - 数据流容错机制

    Apache Flink提供了一种容错机制,可以持续恢复数据流应用程序的状态.该机制确保即使出现故障,程序的状态最终也会反映来自数据流的每条记录(只有一次). 从容错和消息处理的语义上(at leas ...

  9. [RK3399] Type-C改为MicroUSB

    CPU:RK3399 系统:Android 7.1.2 为了降低成本,主板将 Type-C 改为 MicroUSB 接口,节省了 fusb302芯片 参考 Rockchip 的官方文档第4部分:Mic ...

  10. html 获取地址栏信息

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...