基本选择器
子元素选择器
- 概念：只能选择某元素的子元素
- 语法：父元素 > 子元素(Father > Children)
section > div {
color: #f00;
}
相邻兄弟元素选择器
- 概念：可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素
- 语法：元素 + 兄弟相邻元素(Element + Sibling)
section > div + article {
color: #f00;
}
通用兄弟元素选择器
- 概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
- 语法：元素 ~ 后面所有兄弟相邻元素(Element ~ Siblings)
section > div ~ article {
color: #f00;
}
群组选择器
- 概念：将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
- 语法：元素1，元素2，...，元素n（Element1，Element2，...，Elementn）
section > article,
section > aside,
section > div {
color: #f00;
margin-top: 10px;
background: #abcdef;
}
属性选择器
对带有指定属性的HTML元素设置样式。
使用CSS3属性选择器，可以只指定元素的某个属性，也可以同时指定元素的某个属性和其对应的属性值
类型1：Element[attribute]
为带有attribute属性的Element元素设置样式
a[href] {
text-decoration: none;
}
类型2：Element[attribute="value"]
为带有attribute="value"属性的Element元素设置样式
a[href="#"] {
color: #f00;
}
类型3：Element[attribute~="value"]
选择attribute属性包含 单词 "value"的元素，并设置其样式
注意：这里是单词"value"
a[class~="two"] {
color: #ff0;
}
<a class="one two" href="#">attribute</a> // 会选择到
<a class="two three" href="#">attribute</a> // 会选择到
<a class="twothree" href="#">attribute</a> // 不会选择到
类型4：Element[attribute^="value"]
设置attribute属性值以"value"开头的所有Element元素的样式
a[href^="#"] {
color: #0f0;
}
类型5：Element[attribute$="value"]
设置attribute属性值以"value"结尾的所有Element元素的样式
a[href$="#"] {
color: #00f;
}
类型6：Element[attribute*="value"]
设置attribute属性值包含"value"的所有Element元素的样式
注意：看清楚与类型3Element[attribute~="value"]选择器的不同
a[class*="two"] {
color: #0ff;
}
<a class="one two" href="#">attribute</a> // 会选择到
<a class="two three" href="#">attribute</a> // 会选择到
<a class="twothree" href="#">attribute</a> // 会选择到
类型7：Element[attribute|="value"]
选择attribute属性值为"value"或以"value-"开头的元素，并设置其样式
注意：这里的属性值为"value"，是指只有"value"属性
a[href|="#"] {
color: #f0f;
}
伪类选择器
动态伪类
- 概念：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
- 锚点伪类
:link：当链接没有被访问过的时候
:visited：当链接已经被访问过的时候 - 用户行为伪类
:hover：当鼠标在链接上划过的时候
:active：当鼠标在链接上按下但是还没有弹起的时候
:focus：当获取光标的时候
a:visited{
color: #f00;
}
UI元素状态伪类
:enabled：可编辑状态的元素
:disabled：不可编辑状态的元素
:checked：每个已被选中的 input 元素（注意：只用于单选按钮和复选框，只有Opera支持）
input:disabled{
background: #f00;
}
button:disabled{
color: red;
}
CSS结构类(nth选择器)
-
:first-child：选择属于其父元素的首个子元素的Element元素
section > div:first-child {
color: #f00;
}
-
:last-child：选择属于其父元素的最后一个子元素的Element元素
div:last-child {
color: #f00;
}
-
:nth-child(n)：匹配属于其父元素的第n个子元素的Element元素
注意：n是一个简单表达式，取值从 0 开始计算。这里只能是"n"，不能用其他字母代替
总结：这里的第几个子元素，就是我们平常说的第几个，也就是从第1个开始算起。
ul > li:nth-child(2) {
background: #f00;
}
// 匹配属于其父元素的奇数个的Element元素
ul > li:nth-child(odd) {
background: #f00;
}
// 匹配属于其父元素的偶数个的Element元素
ul > li:nth-child(even) {
background: #f00;
}
-
:nth-last-child(n)：匹配属于其父元素的第n个子元素的Element元素，从最后一个子元素开始计数
ul > li:nth-last-child(3) {
background: #f00;
}
-
:nth-of-type(n)：匹配属于其父元素的特定类型的第N个子元素
总结：先筛选出特定类型的元素，然后再数第N个
div:nth-of-type(2) {
color: #f00;
}
-
:nth-last-of-type(n)：匹配属于其父元素的特定类型的第N个子元素，从最后一个子元素开始计数
div:nth-last-of-type(2) {
color: #f00;
}
-
:first-of-type：匹配属于其父元素的特定类型的首个子元素
div:first-of-type {
color: #f00;
}
-
:last-of-type：匹配属于其父元素的特定类型的最后一个子元素
div:last-of-type {
color: #f00;
}
-
:only-child：匹配属于其父元素的唯一子元素的元素
总结：也就是没有其他兄弟元素的情况
article:only-child {
background: #f00;
}
// 这个会选中
<section>
<article>3</article>
</section>
// 这个不会选中
<section>
<article>1</article>
<article>2</article>
</section>
-
:only-of-type：匹配属于其父元素的特定类型的唯一子元素的元素
总结：可以有其他兄弟元素，但是元素本身这种类型只能有一个
article:only-of-type {
background: #f00;
}
// 这个会选中
<section>
<article>3</article>
</section>
// 这个也会选中
<section>
<div>4</div>
<article>5</article>
<div>6</div>
</section>
-
:empty：匹配没有子元素(包括文本节点)的元素
div:empty {
background: #f00;
}
否定选择器:not(element/selector)
- 概念：匹配非指定元素/选择器的元素
- 语法：父元素:not(子元素/子选择器)
- 例子：
nav > a:not(:last-of-type) {
border-right: 1px solid red;
}
// 最后一个a标签不会有右边框
<nav>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</nav>
div:not(p)
{
color:#ff0000;
}
// 选中div标签中的span元素
<div>
<span>这是 div 元素中的文本。</span>
<p>test</p>
</div>
伪元素
概念：用于向某些选择器设置特殊效果
语法：元素::伪元素 (Element::pseudo-element)
-
::first-line：对Element元素的第一行文本进行格式化
此伪元素只能用于块级元素。块元素中文本超过宽度会换行，所以可以对第一行进行格式化。而行级元素内的文本被认为是一行，所以无法适用。
div::first-line {
color: #f00;
font-weight: bold;
}
-
::first-letter：用于向文本的首字母设置特殊样式
此伪元素只能用于块级元素。如果是中文，就给第一个字设置样式。
div::first-letter {
color: #f00;
font-size: 24px;
font-weight: bold;
}
-
::before：在元素的内容前面插入新内容
常用“content”配合使用
// 特点
// 1. 是第一个子元素
// 2. 是行级元素
// 3. 内容通过content写入
// 4. 标签中找不到对应的标签
// 5. 可以用一切CSS控制样式
div::before {
content: "我在内容的前面";
}
<div>伪元素</div>
-
::after：在元素的内容后面插入新内容
常用“content”配合使用，多用于清除浮动
// 特点
// 1. 是最后一个子元素
// 2. 是行级元素
// 3. 内容通过content写入
// 4. 标签中找不到对应的标签
// 5. 可以用一切CSS控制样式
// 6. 可用于清除浮动
div::after{
content: "我在内容的后面";
}
<div>伪元素</div>
// 清除浮动的例子
header::after{
display: block;
content: "";
clear: both;
}
-
::selection：用于设置在浏览器中选中文本后的背景色和前景色
div::selection {
background: red;
color: #ff0;
}
