css选择器querySelector

最新推荐文章于 2024-04-19 20:18:55 发布
最新推荐文章于 2024-04-19 20:18:55 发布
阅读量585 收藏
点赞数
原文链接：http://www.cnblogs.com/cqq-20151202/p/6638047.html
版权 
* 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.οnlοad=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>

　　

转载于:https://www.cnblogs.com/cqq-20151202/p/6638047.html

weixin_30873847
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 选择器
qq_46291038的博客
08-19 535
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
CSS选择器
m0_62786471的博客
10-24 2396
目录 一、属性选择器 1 .E[att^=value]属性选择器 2 .E[att$ = value]属性选择器 3.E[att*=value] 属性选择器 二、关系选择器 1.子代选择器 2.兄弟选择器 三、结构化伪类选择器 1 :root选择器 2 :not选择器 3:only-child选择器 4 first-child和last-child 5 nth-child和nth-last-child选择器 6 nth-last-of-type...
HTML5实战与剖析之CSS选择器——querySelector()
梦龙小站
01-17 4084
今天为大家介绍一下HTML5的相关知识，今儿主要以新增的选择器为主题，为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery和JavaScript两种写法对比的方式为大家分享。希望能为大家在学习HTML5的道路上有所帮助。
【CSS】querySelector选择器用法
NopDes1re的专栏
04-09 2300
Html：&lt;ul class="ul1"&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;/ul&gt; &lt;ul class=&
选择器函数querySelector和querySelectorAll
weixin_45063953的博客
08-28 1911
querySelector和querySelectorAll
css选择器querySelectorAll
weixin_30823683的博客
03-29 302
* querySelectorAll(css的选择器)* 通过css的选择器获取到的一组元素* 获取的也是类数组** 主语* document 从整个页面去获取一组元素* 父级 从父级下去获取一组元素 <!DOCTYPE html> <html lang="en"> <head> &lt...
querySelector()和querySelectorAll() ,你知道CSS 选择器吗？
05-02 1128
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JAVASCRIPT 基础&lt;/title&gt; &lt;style&gt; input[type="text"] { width:150px; display:b
jQuery选择器querySelector的使用指南
11-26
`document.querySelector`是用于选取DOM树中匹配指定CSS选择器的第一个元素。如果选择器匹配到多个元素，它只会返回第一个。例如，以下代码将选取id为`container`的首个`div`元素： ```javascript element = ...
原生的强大DOM选择器querySelector介绍
08-31
querySelector方法允许开发者使用CSS选择器来选取文档中的单个元素，极大地提高了代码的可读性和效率。 **querySelector的使用** querySelector方法的基本语法是`element.querySelector(selector)`，其中`element`...
原生的强大DOM选择器querySelector.pdf
08-16
`querySelector`方法允许你根据传入的CSS选择器，查找文档或指定元素的子树中匹配的第一个元素。如果找到匹配的元素，它将返回该元素，否则返回`null`。这使得你可以快速定位到页面上的特定元素，无需编写复杂的遍历...
querySelector和css3选择器
vcxiaohan的博客
06-21 2784
querySelector：http://www.nowamagic.net/librarys/veda/detail/388 css3：http://www.w3school.com.cn/cssref/css_selectors.asp test * {margin: 0; padding: 0;} body {
querySelector()与querySelectorAll()用法--bilibili用户评论为例
SakuraZhangrx的博客
10-24 681
querySelector方法是浏览器提供的一个用于选择元素的方法，可以通过CSS选择器指定要选择的元素。该方法接收一个CSS选择器作为参数，返回选择器匹配到的第一个元素。
HTML5实战与剖析之CSS选择器——querySelectorAll()
梦龙小站
01-20 7761
之前，我们介绍了HTML5中的选择器querySelector()。今天，我们继续为大家分享HTML5中新添加的选择器querySelectorAll()。querySelectorAll()方法接收的参数也是CSS选择符，但是返回的是所有匹配元素，而querySelector()方法返回的是第一个匹配的元素。querySelectorAll()方法返回的是一个NodeList的实
querySelector、querySelectorAll和CSS3 Selectors一起来
shyleoking的专栏
03-12 7249
从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口querySelector 得到一个DOMquerySelectorAll 得到一组DOM一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。html的结构部分
重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
PBitW的博客
08-02 4524
概要 第一部分（左侧下拉） 代码解析 vertical-align document.querySelector js改变css样式的5种方式 菜鸟思路 第一次修改 菜鸟思路 第二次修改 第三次修改 总代码
【HTML5与CSS3基础】选择器querySelector和querySelectorAll
zgljl2012的专栏
03-23 1552
HTML5提供了两个类似JQuery的查找元素的选择器函数：querySelector和querySelectorAll，前者查找元素然后返回第一个，而后者查找元素后返回一个NodeList，里面包含了所有符合选择器的元素。 使用方法： var buttons = document.querySelectorAll(“.menu a”); 上述语句查找了类为menu且标签为a的元素，形成了一个
querySelector和querySelectorAll
m0_46401771的博客
01-08 444
定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
querySelector 与 getElementById
doiido的专栏
10-24 3381
因此在浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。NodeList 是一个静态的 NodeList 类型的对象。提示: 可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
querySelector()，querySelectAll()，getElementBy***的区别
最新发布
没啥实力的博客
04-19 470
querySelector方法在document对象上调用，并接受一个参数，表示要选择的元素的CSS选择器。querySelector方法在document对象上调用，并接受一个参数，表示要选择的元素的CSS选择器。如果选择器在文档中匹配到一个元素，则该方法将返回第一个匹配的元素。如果选择器在文档中匹配到一个元素，则该方法将返回第一个匹配的元素。getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。动态就是选出的元素会随文档改变，静态的不会 取出来之后就和文档的改变无关了。
CSS与JavaScript选择器详解及其应用
4. **querySelector()** 和 **querySelectorAll()**：更灵活的选择器，支持CSS选择器语法，可以选取更复杂的元素结构。 5. **:nth-child()**、**:nth-of-type()`等高级选择器，用于根据元素的子元素数量、类型等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值