1.
正确写法:
前面是标签名的通配符,后面是 class的名称。()
*.a_class {color:red;}
下面的简写,尽量少用
.a_class {color:red;}
2.举例
举例:
p.a_class {}
解释为:“其 class 属性值为 a_class 的所有段落”。
举例2:
*.a_class {}
解释为:“其 class 属性值为 a_class 的所有任意标签”。
3.多层类叠加:
同一个 <p>
标签,同时拥有两个 class属性。
<p class="important warning">
This paragraph is a very important warning.
</p>
*.important.warning {background:silver;}
解释为:“其 class 属性值同时为 important 且为 warning 的所有任意标签”。
4.延伸
ID选择器的正确写法
*#intro {font-weight:bold;}
选择器分组
h1, h2, h3, h4, h5, h6 {color:blue;}
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色。
a[href][title] {color:red;}
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:
planet[moons] {color:red;}
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
或者,与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
5.正好写油猴(TamperMonkey)脚本,所需要的后代选择器
h1 em {color:red;}
(注意和 选择器分组 之间的区别,一个没逗号,一个有逗号。)
主区的背景为白色,
主区的链接为蓝色。
div.maincontent {background:white;}
div.maincontent a:link {color:blue;}
6.更远的延伸
子元素选择器
相邻兄弟选择器