文章目录

1.基本选择器
- 1.1 子元素选择器
- 1.2 相邻兄弟元素选择器
- 1.3 通用兄弟选择器
- 1.4 群组选择器
2.属性选择器
2.1 选择带有某种属性的元素
- 2.2 选择属性等于某个特定值的元素
- 2.3 选择属性中包含特定单词的元素
- 2.4 选择属性以特定字符串开头的所有元素
- 2.5 选择属性以特定字符串结尾的所有元素
- 2.6 选择属性包含特定字符串的所有元素
- 2.7 选择属性为特定值或以该特定值开头的所有元素
3.伪类选择器
- 3.1 动态伪类
- 3.2 UI元素状态伪类
- 3.3 CSS3结构类
- - first-child
  - last-child
  - nth-child(n)
  - nth-last-child(n)
  - nth-of-type(n)
  - nth-last-of-type(n)
  - first-of-type
  - last-of-type
  - only-child
  - only-of-type
  - empty
- 3.4 否定选择器
4.伪元素
- 4.1 first-line
- 4.2 first-letter
- 4.3 before
- 4.4 after
- 4.5 selection

1.基本选择器

1.1 子元素选择器

只能选择某元素的子元素

父元素>子元素

1.2 相邻兄弟元素选择器

选择紧接在另一元素后的元素，而且他们具有相同的父元素

元素+兄弟相邻元素

<!DOCTYPE html>
<html>
<head><title>练习网页</title><style type="text/css">.main > div{background-color: red;}.main > .one + div{background-color: blue;}</style>
</head>
<body><div class='main'><div class='one'>1</div><div class='two'>2</div><div class='three'>3</div></div>
</body>
</html>

1.3 通用兄弟选择器

选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

元素~后面所有兄弟相邻元素

<style type="text/css">.main > div{background-color: red;}.main > .one ~ div{background-color: blue;}</style>

1.4 群组选择器

将具有相同样式的元素分组在一起，每个选择器之间使用逗号隔开

<!DOCTYPE html>
<html>
<head><title>练习网页</title><style type="text/css">h1,div{background-color: blue;}</style>
</head>
<body><div class='one'>1</div><div class='two'>2</div><div class='three'>3</div><span>4</span><h1>5</h1>
</body>
</html>

2.属性选择器

2.1 选择带有某种属性的元素

div[class]{background-color: lightblue;
}

2.2 选择属性等于某个特定值的元素

div[class='one']{background-color: lightblue;
}

2.3 选择属性中包含特定单词的元素

注意：是包含某个单词，而不是字符串中包含某个子字符串
例如 div[class~='t'] 选择的是class属性中含有t这个单词的，例如class='t',class='t three'，匹配不到类似于class='three' ,class='two'这类在字符串中包含的。

<!DOCTYPE html>
<html>
<head><title>练习网页</title><style type="text/css">div[class~='t']{background-color: lightblue;}</style>
</head>
<body><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div><span>4</span><h1>5</h1><div>6</div>
</body>
</html>

2.4 选择属性以特定字符串开头的所有元素

div[class^='t']{background-color: lightblue;
}

2.5 选择属性以特定字符串结尾的所有元素

div[class$='t']{background-color: lightblue;
}

2.6 选择属性包含特定字符串的所有元素

div[class*='t']{background-color: lightblue;}

2.7 选择属性为特定值或以该特定值开头的所有元素

div[class|='t']{background-color: lightblue;
}

3.伪类选择器

3.1 动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。
锚点伪类：:link :visited
用户行为伪类: :hover :active :focus

<!DOCTYPE html>
<html>
<head><title>练习网页</title><style type="text/css">div[class*='t']{background-color: lightblue;}.main :hover {background-color: pink;};</style>
</head>
<body><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div><span>4</span><h1>5</h1><div>6</div></div>
</body>
</html>

红色箭头代表鼠标停留位置

3.2 UI元素状态伪类

:enabled :disabled :checked

3.3 CSS3结构类

first-child

element:first-child

选择其父元素的首个子元素的每个element元素

<body><div>0</div><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div></div>
</body>

div:first-child{background-color: pink;}

只要是属于父元素的第一个div，都会匹配

last-child

div:last-child{background-color: pink;}

<body><div>0</div><div class='main'><div class='one t'>1</div><div class='two'>2</div><div class='three t'>3</div></div><div>4</div>
</body>

nth-child(n)

匹配属于其父元素的第n个子元素，不论元素类型

nth-child(odd) 匹配奇数
nth-child(even)匹配偶数

nth-last-child(n)

与4.3类似

nth-of-type(n)

匹配属于父元素的特定类型的第n个子元素的每个元素

nth-last-of-type(n)

与4.5类似

first-of-type

last-of-type

only-child

匹配属于其父元素的唯一子元素的每个元素
意思就是：仅匹配独生子，不能有兄弟元素

only-of-type

匹配属于其父元素的特定类型的唯一子元素的每个元素
意思就是：仅匹配独生子，但可以有兄弟元素，只要兄弟元素不与他是同一类型即可匹配

empty

匹配没有子元素（包括文本节点）的每个元素

3.4 否定选择器

:not(element/selector)选择器匹配非指定元素/选择器的每个元素

父元素:not(子元素/子选择器）

例如：a:not(:last-of-type){...}

4.伪元素

伪元素用于向某些选择器设置特殊效果

4.1 first-line

element::first-line 对element元素中的第一行文本进行格式化

4.2 first-letter

element::first-letter 对element元素中的第一个字符进行格式化

4.3 before

element::before 对element元素前面插入新内容，常与content配合使用

4.4 after