【转载】前端布局CSS选择器分类先看看伪类添加之后，会产生什么样的效果。比如下述nth伪类：原理（上例）：nth-ch

[转载]：https://juejin.cn/post/6844904147414712334

仅供转载学习，以便使用时快速查找！

伪类元素

:first-child	选择某个元素的第一个子元素（IE6不支持）
:last-child	选择某个元素的最后一个子元素
:first-of-type	[CSS3]选择一个上级元素下的第一个同类子元素
:last-of-type	[CSS3]选择一个上级元素的最后一个同类子元素
:only-child	[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type	[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-child()	[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child()	[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:nth-of-type()	[CSS3]选择指定的元素（IE6-8不支持）
:nth-last-of-type()	[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

1.2 nth伪类选择器

<!DOCTYPE html>
<html><head>
<style>
p { width:50px;float:left;text-align:center;border:1px solid gray; }
</style>
</head>
<body>
<h1>nDos的个人博客</h1>
<p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p>
<p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p>
</body></html>

上述例子在页面中显示的效果如下图：

先看看伪类添加之后，会产生什么样的效果。比如下述nth伪类：

p:nth-child(odd) { background:red; } 加入之后效果如下图所示（odd是奇数的意思）：

有意思的事情发生了，为什么不是奇数的段落背景色为红色呢？先放下这个问题，再来看看下面这个伪类：p:nth-of-type(odd) { background:red; }，显示效果如下图所示：

原理（上例）：nth-child是计算body中所有的子元素（包括h1），然后按照奇偶进行排列，那么“第一个”p标签的顺序标号成为了“2”。而nth-of-type则不同，它是计算body中所有的标签为p的子元素，其他的子元素它不管，然后按照奇偶进行排列。

至于:nth-last-child()和:nth-last-of-type()原理也是一样的，不过它计算的方式，是倒序的。关于这两个伪类就不多展开了。

虽然不展开:nth-last-child()和:nth-last-of-type()，但是nth-child还有东西需要展示一下，比如这个伪类p:nth-child(2n+1) { background:red; }，显示效果与p:nth-child(odd) { background:red; }是一模一样的，这里就不贴图了。

其中需要说的是这个n，写成2i+1，行不行？不行！浏览器认不出来，浏览器只认识n。当然这是规则，就不深究了，下面要继续讨论的是，它只能进行奇偶选择吗？再来看看这个伪类：

p:nth-child(3n+1) { background:red; } 渲染的结果如下图所示：

因为有h1这个标签在，所以这里计算起来有点不太好理解，下面去掉h1那个标签。看看下图：

原理：n是从0开始取值，逐个代入。3n+1的结果就是 1、4、7、10、13……当然例子这里没有那么多元素。当然也可以试试：p:nth-child(5n+1) { background:red; } 等等。

甚至可以试试下面这些伪类：

p:nth-child(-n+5) { background:red; }

p:nth-child(n+5) { background:red; }

p:nth-child(n) { background:red; }

对于nth-of-type、nth-last-child和nth-last-of-type的玩法也脱离不了上面的这些东西，只不过是计算的元素标签的集合不同，计算的开始位置不同。写再多也是重复，就不展开了。

属性选择器

示例html

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

html

[attribute]

[foo]{
    background-color:red;
}

选择所有带 foo 属性的元素

view

[attribute=value]

选择 attribute=value 的所有元素。

[foo=abc]{
    background-color:red;
}

view

[attribute~=value]

选择 attribute 属性包含单词 value 的所有元素。

[foo~=abc]{
    background-color:red;
}

view

[attribute^=value]

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始

[foo^=abc]{
    background-color:red;
}

view

[attribute$=value]

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 $,以什么结束

[foo$=abc]{
    background-color:red;
}

view

[attribute*=value]

选择其 attribute 属性中包含 value 子串的每个元素。

[foo*=abc]{
    background-color:red;
}

view

[attribute|=value]

选择 attribute 属性值以 value 开头的所有元素。

[foo|=abc]{
    background-color:red;
}

view

文档结构选择器

示例html

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>

html

后代选择器 element element

选择 element 元素内部的所有 element 元素。

ul li{
    border: 1px solid red;
}

html

子选择器 element>element

选择父元素为 element 元素的所有 element 元素。

 ul>li>p{
   border: 1px solid red;
}

html

相邻兄弟选择器 element+element

选择紧接在 element元素之后的 element 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

html

h1+p{
    color:red;
}

html

一般兄弟选择器 element1~element2

选择前面有 element1 元素的每个 element2 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

html

 h1~p{
   border: 1px solid red;
}

html

a:link

没有访问过的状态

a:active

链接正在被点击

a:hover

选择鼠标指针位于其上的链接。

a:visited

选择所有已被访问的链接。

:focus

:focus 选择器用于选取获得焦点的元素。

提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

:enabled / :disabled

选择每个启用的 input 元素 / 选择每个禁用的 input 元素

:checked

选择每个被选中的 input 元素。自定义开关可以用这个实现

:not(selector)

选择非 selector 元素的每个元素。（反向选择）

伪元素选择器

element::first-line

<!DOCTYPE html>
<html>
<head>
<style>

p:first-line{
 background-color:yellow;
}

</style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

p 元素的第一行发生改变

element::first-letter

<!DOCTYPE html>
<html>
<head>
<style>
h1:first-letter{
 color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
</body>
</html>

直接第一个字符变黄，如果JavaScript做的话，需要获取字符串，再获取第一个字符，再改变其颜色

element::before

在每个 element 元素的内容之前插入内容。我们更多的可能是当初一个div来用

element::before

在每个element元素的内容之后插入内容。我们可能更多的是用来清楚浮动或验证表单提示等其它

::selection

选择被用户选取的元素部分。

Content属性

div::after{
    content: "普通字符串";
    content: attr(父元素的html属性名称);
    content: url(图片、音频、视频等资源的url);
    /* 使用unicode字符集，采用4位16进制编码
     * 但不同的浏览器显示存在差异，而且移动端识别度更差
     */
    content: "\21e0";
    /* content的多个值可以任意组合，各部分通过空格分隔 */
    content: "'" attr(title) "'";
     
    /* 自增计数器，用于插入数字/字母/罗马数字编号
     * counter-reset: [<identifier> <integer>?]+，必选，用于标识自增计数器的作用范围，<identifier>为自定义名称，<integer>为起始编号默认为0。
     * counter-increment: [<identifier> <integer>?]+，用于标识计数器与实际关联的范围，<identifier>为counter-reset中的自定义名称，<integer>为步长默认为1。
     * <list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
     */
    content: counter(<identifier>, <list-style-type>);
     
    /* 以父附属元素的qutoes值作为content的值
     */
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}