学习笔记-css选择器

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");