CSS选择器学习笔记

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.更多

w3官方CSS选择器文档