CSS属性选择器和伪类选择器

属性选择器

div[attr], /* 存在某属性 */
div[attr=value], /* 存在某属性，并且属性值为value */
div[attr^=value], /* 存在某属性，并且属性值以value开头 */
div[attr$=value], /* 存在某属性，并且属性值以value结尾 */
div[attr*=value] /* 存在某属性，并且属性值包含value */
{
    font-size: 18px;
}

结构伪类选择器

常用于选择某个标签下的子标签。

div span:first-child, /* 选择div下第一个子标签，需要是span类型 */
div span:last-child, /* 选择div最后一个子标签，需要是span类型 */
div span:nth-child(n), /* 选择div第n个子标签，需要是span类型 */
{
    font-size: 18px;
}

上面示例中，以第一个为例，将div下所有标签排序，匹配第一个子标签后进行判断，如果是span类型，则匹配，如果不是span类型，则不是则不匹配任何标签。

:nth-child(n) 其中n的取值范围：

① 数字，选择指定序号的标签。

② 直接写“n”，表示匹配所有。

    也支持简单运算比如"2n"匹配偶数，"2n-1"匹配奇数。

    （n+3）从第四个开始匹配。

    （-n+3）匹配前三个

③ 关键字，even偶数，odd奇数。

div span:first-of-type, /* 选择div第一个span子标签 */
div span:last-of-type, /* 选择div最后一个span子标签 */
div span:nth-of-type(n) /* 选择div第n个span子标签 */
{
    font-size: 18px;
}

上面示例中，以第一个为例，只将div下span标签排序，然后匹配第一个span标签。

其中:nth-of-type(n)中n的参数范围和:nth-child(n)相同。

:nth-child(n)和:nth-of-type(n)区别

span:nth-child(n)： 将所有子标签排序，选中第n个，查看是否是span类型，是则匹配，不是则不匹配任何标签。

span:nth-of-type(n)： 将指定类型标签（span）排序，选中第n个。

伪标签选择器

可以通过css创建标签。

::before /* 在标签内部的前端插入内容 */
::after /* 在标签内部的后端插入内容 */

语法：

element::before {
    content: ''; /* 必须设置此属性 */
}

特点：

1. 权重和html选择器相同为1。

2. 创建的伪标签是行内标签。

代码示例

.b::before {
    content: "hello ";
}
.b::after {
    content: "!";
}
<span class="b">tom</span>