CSS选择器学习笔记
2020-04-03 07:32
1086 查看
CSS选择器学习笔记
1.利用,来分组
h1,h2,h3,h4,h5,h6 { color: green; }
2. 子元素会从父元素继承属性
3. 后代选择器
h1 em {color:red;}
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”
4. 子元素选择器>
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
5.相邻兄弟选择器+
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
6.结合元素选择器
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素
7.多类选择器
.important.urgent {background:silver;}
不出所料,这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 important 和 warning,将不能匹配。
8.属性选择器
[attribute~=value],[attribute|=value]更像是一种属性单词的匹配。
[attribute^=value],[attribute$=value],[attribute*=value]更像是属性值字符串的匹配。
9.伪类
:first-child指向元素的第一个子元素添加样式。
:lang 伪类允许您为不同的语言定义特殊的规则
10.更多
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 学习笔记(04):初级学HTML 5实战开发(第一季)-CSS选择器[上]
- 【HTML5学习笔记】16:CSS选择器 上
- [置顶] CSS选择器Selector或选择符学习笔记
- css选择器 学习笔记
- 前端学习笔记3:CSS简介及CSS选择器
- JavaScript学习笔记8-jQuery入门介绍、css选择器复习
- css学习笔记——css选择器
- jQuery之CSS选择器学习笔记
- 疫情停课不停学,HTML第四天学习笔记(CSS选择器和网页划分)
- jQuery学习笔记——JQuery所支持的基本CSS选择器
- CSS学习笔记02 CSS选择器
- CSS学习笔记_CSS选择器
- 【HTML5学习笔记】17:CSS选择器 下
- javascript学习笔记20160121-css选择器
- CSS学习笔记----CSS选择器
- CSS学习笔记——CSS选择器样式总结
- CSS选择器学习笔记
- JSP标签、正则、CSS选择器 学习笔记
- css选择器学习笔记
- CSS学习笔记-CSS选择器(二)