基本规则
每个规则有两个基本部分:选择器和声名块(可以由一个或多个声名组成)。
元素选择器
选择器分组
通配选择器
声名分组
h1 {color: gray; font: 18px;}
|
结合选择器和声名分组
h2, p {color: gray; font: 18px;}
|
h2{ } p,h1{ } div h1,div h2{ background-color: #2b542c; } p>h1{ } p+h1{ } html>body table+ul{ } body *{ } p.class1.class2{ } #id1{ }
|
类选择器
多类选择器
<p class="test test1">aaa</p>
|
ID 选择器
属性选择器
根据多个属性选择,下面的例子将同时有 href 和 title 属性的 a 标签的文本设置为粗体
a[herf][title] {font-weight: bold;}
|
根据具体属性值选择
只选 moons 属性值为 1 的那些 planet 元素
planet[moons= "1"] {font-weight: bold;}
|
根据部分属性选择
<p class="test test1">aaa</p>
|
p[class~"test"] {color: gray;}
|
类型 |
描述 |
[p^=”test”] |
选择 p 属性值以 test 开头的所有元素 |
[p$”test”] |
选择 p 属性值以 test 结尾的所有元素 |
[p^=”test”] |
选择 p 属性值中包含字符串 test 的所有元素 |
p[attribute1][attribute2]{ } a[href="http://www.123.com"]{ } div[class~="class1"]{ } input[title^="title1"]{ } input[title$="title1"]{ } input[title*="title1"]{ } input[title|="title1"]{ }
|
后代选择器
只选择 h1 子元素的 p 元素
选择相邻兄弟元素,例如下面的修改紧接着 h1 元素后出现的 p 元素颜色