CSS 选择器学习笔记
2017-05-07 12:56
204 查看
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");
相关文章推荐
- css学习笔记20160115css语法格式选择器
- html css学习笔记-派生选择器 id选择器 类选择
- HTML&CSS基础学习笔记1.34-通用选择器
- css学习笔记(一)选择器hack的使用
- CSS学习笔记----选择器与字体(字系)
- CSS学习笔记:用法和选择器
- CSS学习笔记2:CSS基础选择器
- CSS学习笔记----选择器
- CSS学习笔记3:CSS高级选择器
- CSS学习笔记 -- day01 CSS简介、常见属性、基础选择器
- html及css学习笔记_13_css三种选择器(selector)
- CSS学习笔记(二)选择器
- [学习笔记][css]选择器
- css学习笔记20160125分组嵌套选择器尺寸显示
- HTML&CSS基础学习笔记1.30-选择器是什么
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- css学习笔记20160130导航栏下拉菜单图像拼合媒体类型属性和值选择器
- # html+css基础学习笔记-选择器介绍
- CSS学习笔记之class选择器
- CSS学习笔记(4)--选择器(w3school)