选择符{
CSS规则;
}
Selectors Level 3标准 - Selectors Level 4工作草案
| 选择符 | 名称 | 描述 |
|---|---|---|
| * | 通配选择符(Universal Selector) | 任意元素 |
| E | 类型选择符(Type Selector) | E类型的元素 |
| E#myid | id选择符(ID Selector) | id值为"myid"的E元素 |
| E.myclass | class选择符(Class Selector) | class值为"myclass"的E元素 |
/*
简单粗暴的选择符
简单CSS重置，书写简单，功能强大，但执行效率太低，建议使用CSS Reset或normalize.css
*/
*{
padding:0;
margin: 0;
}
/*非常流行的用法，改变盒模型组成模式*/
*,
*:before,
*:after {
box-sizing: border-box;
}
/*
以html标签类型作选择符，范围内所有的该类型元素都会被选中
案例中选中所有的h1元素
*/
h1{
font-size: 48px;
}
/*
以元素的id属性作为选择符
一般用在页面布局上
*/
#wrapper{
width:1000px;
margin: auto;
}
p#content{
text-indent: 2em;
}
/*
可以给一个元素设置多个类，以空格分开
<p class="content note">多类选择符的使用</p>
*/
/*选中class的content的元素*/
.content{
text-align: left;
}
/*选中class的content的p类型元素*/
p.note{
font-size: 24px;
}
/*选中同时具有content和note两个类的元素*/
.content.note{
text-decoration: underline;
}
| 选择符 | 名称 | 描述 |
|---|---|---|
| E F | 后代选择符 | E元素的后代F元素 |
| E>F | 子代选择符 | E元素的子代元素F |
| E+F | 相邻选择符 | 跟E后面相邻的F元素 |
| E~F | 兄弟选择符 | E元素的后面兄弟F元素 |
/*
选择所有层次的后代
*/
header nav{
color:rgba(0,100,20,.3);
}
/*
选择儿子层级的后代
*/
header>nav{
color:rgba(0,100,20,.3);
}
/*
跟E后面相邻的F元素
*/
h2+p{
text-indent: 2em;
}
/*
E元素的后面兄弟F元素
*/
h2~p{
text-indent: 2em;
}
| 选择符 | 描述 |
|---|---|
| E[foo] | 具有"foo"属性的E类型元素 |
| E[foo="bar"] | 具有"foo"属性且值为"bar"的E类型元素 |
| E[foo~="bar"] | 具有"foo"属性且值为用空格分隔的列表，其中一个为"bar"的E元素(包含只有一个值且该值等于val的情况) |
| E[foo^="bar"] | 具有"foo"属性且值以"bar"开头的E元素 |
| E[foo$="bar"] | 具有"foo"属性且值以"bar"结尾的E元素 |
| E[foo*="bar"] | 具有"foo"属性且值包含"bar"字符串的E元素 |
| E[foo|="en"] | 具有"foo"属性且值为以"en"开头并用"-"分隔的字符串的E元素，包含值仅为"en"的E元素 |
| 模式 | 意义 | 定义 |
|---|---|---|
| E:root | 作为文档根元素的E元素 | 3 |
| E:nth-child(n) | 作为第n个子元素的E元素 | 3 |
| E:nth-last-child(n) | 作为倒数第n个子元素的E元素 | 3 |
| E:nth-of-type(n) | 第n个同类型的E元素 | 3 |
| E:nth-last-of-type(n) | 倒数第n个同类型的E元素 | 3 |
| E:first-child | 作为第一个子元素的E元素 | 2 |
| E:last-child | 作为第一个子元素的E元素 | 3 |
| E:first-of-type | 作为同类型中一个元素的E元素 | 3 |
| E:last-of-type | 作为同类型中最后一个元素的E元素 | 3 |
| E:only-child | 作为“独生”子元素的E元素 | 3 |
| E:only-of-type | 作为唯一同类型元素的E元素 | 3 |
| E:empty | 没有子元素的E元素 | 3 |
| 模式 | 意义 | 分类 | 定义 |
|---|---|---|---|
| E:link
E:visited |
未访问过和访问过的E元素 | 链接伪类 | 1 |
| E:active
E:hover E:focus |
E元素的指定交互状态 | 用户交互伪类 | 1、2 |
| E:target | 相关URL指向的E元素 | 目标伪类 | 3 |
| E:lang(fr) | 使用特殊语言(fr)的E元素 | 语言伪类 | 2 |
| E:enabled
E:disabled |
处于启用或禁用状态的UI元素 | UI状态伪类 | 3 |
| E:checked | 处于checked状态的UI元素 | UI状态伪类 | 3 |
| E:not(s) | 不匹配"s"选择符的E元素 | 非伪类选择符 | 3 |
| 模式 | 意义 | 分类 | 定义 |
|---|---|---|---|
| E::first-line | E对象的第一行样式 | 伪对象选择符 | 1 |
| E::first-letter | E对象的第一个字符样式 | 伪对象选择符 | 1 |
| E::before | E元素的生成对象before | 伪对象选择符 | 2 |
| E::after | E元素的生成对象after | 伪对象选择符 | 2 |