选择器（尚硅谷前端网课学习笔记）

关系选择器

1 子元素选择器
作用：选中指定父元素的指定子元素
语法： 父元素 ＞ 子元素
2 后代元素选择器
作用：选中指定元素内的指定后代元素
语法： 祖先 后代
3 兄弟选择器
（1）作用：选择下一个兄弟
语法： 前一个 + 后一个
（2）作用：选择下边所有的兄弟
语法： 前一个 ～ 后一个

**

属性选择器

**
［属性名］ 选择含有指定属性的元素
［属性名=属性值］ 选择含有指定属性和属性值的元素
［属性名^=属性值］ 选择属性值以指定值为开头的元素
［属性名$=属性值］ 选择属性值以指定值为结尾的元素
［属性名*=属性值］ 选择属性值中含有某值的元素

**

伪类选择器

**

伪类用来描述一个元素的特殊状态
-比如，第一个子元素、被点击的元素、鼠标移入的元素…
伪类一般情况喜爱都是使用 ： 开头
:first-child （第一个子元素）
:last-child （最后一个子元素）
:nth-child() （选中第n个子元素）
-特殊值：
n 第n个 n的范围0到正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上伪类都是根据所有的子元素进行排序

:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能与上述的类似，不同点是它们是在同类型元素中进行排序

:not() 否定伪类
-将符合条件的元素从选择器中去除

a链接的伪类

a:link{} 用来表示没访问过的链接（正常的链接）
a:visited{} 用来表示访问过的链接
-由于隐私问题，所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态

伪元素

-表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用 :: 开头

::first-letter 表示第一个字母
—— p::first-letter{}

::first-line 表示第一行
——p::first-line{}

::selection 表示选中的内容
——p::selection{}

::before 元素的开始
::after 元素的最后
-before和after必须结合content属性来使用
——p::before{
content: ‘abc’；
color：red;
}
（在p标签所写内容前+一个abc，并将abc颜色设置为红色）
（用before/after所加内容无法被选中）