CSS 选择器学习笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HYB2012/article/details/71319926

CSS常用选择器

1 元素选择器 标签选择器 

p {color:gray;}

h2 {color:silver;}

p h2 都是元素标签

2 类选择器  .className

3 ID选择器 #ID

4 通配全选所有元素 *

*{color:red;} 对页面上的所有元素应用此样式

5 元素组选择器 多个元素一起选择

h1, h4 {color:silver; background:white;}

h1 h4 是一组 样式相同

6 属性选择器

[attr] 选择所有具有attr属性的元素

7 后代选择器（包括子子孙孙）

H2 p 空格间隔

8子代选择器 选择直系儿子代

h1 > strong 选择h1 子代中具有strong标签的元素

table.company td > p 类选择器 后代选择器 子代选择器混合

9 兄弟选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素

h1 + p {margin-top:50px;} 选择p p具有一个兄弟元素h1 

html > body table + ul {margin-top:20px;} 子代 后代 兄弟

总结：

类       .

Id       #

组       ，

后代     空格

子代     >

兄弟     +

通配     *

注意各种选择器组合使用

9 DOM选择元素

querySelector和querySelectorAll是W3C提供的 新的查询接口

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 

querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 

var obj = document.querySelector("#id");

var obj = document.querySelector(".classname");
var obj = document.querySelector("div");

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");