目录
🆙【前文回顾】👉 定位—相对定位，绝对定位，固定定位_06
❣️ 复杂选择器
1.兄弟选择器
兄弟元素，具备同一个爹的同级元素。
只能通过哥哥，找弟弟。只能往后找。
① 相邻兄弟选择器，通过哥哥找到紧紧挨在后面的弟弟
选择器1+选择器2{} ——2个关键信息：(1) 紧接在另一元素后；(2) 二者有相同父元素
② 通用兄弟选择器，通过哥哥，找到后面所有符合要求的弟弟
选择器1~选择器2{}
相邻兄弟选择器在项目中的应用场景：
一组相同的元素，除了老大以外，其它兄弟都选中，使用相邻兄弟选择器，选择器1+选择器2{}
例如：li标签实现导航栏时的应用，li+li{margin-left:20px;} ，而不用li~li{ margin-left:20px;}，因为通用兄弟选择器，会重复执行操作（因为每一个li都可以当作哥哥）
2.属性选择器
属性选择器在css中使用较少，在js中使用较多
“属性选择器”根据元素的属性和属性值来匹配元素，“属性”英文单词为：attribute。
(1) 属性选择器的定义方式
[attr]{} 匹配带有attr属性的元素
例如：li[class] { color: red; background: yellow;}
含义：选择有 class 属性(值不限)的所有 li 元素，使其文本为 red，背景色为 yellow。
[attr1][attr2]{} 匹配同时带有两个属性的元素
[attr=value]{} 匹配带有attr属性并且取值为value元素
例如：li[class="second"] { color: red; background: yellow;}
含义：选择有 class 属性值为 second 的所有 li 元素，使其文本为 red，背景色为 yellow。
elem[attr]{} 匹配带有attr属性的elem元素
例如：li[class] { color: red; background: yellow;}
含义：选择有 class 属性(值不限)的所有 li 元素，使其文本为 red，背景色为 yellow。
elem[attr=value]{} 匹配带有attr属性并且取值为value的elem元素
(2) 属性选择器的模糊查询
[attr^=value]{} 匹配带有attr属性并且属性值以value开头的元素
例如：li[class^="se"] { color: red; background: yellow;}
含义：选择 class 整个属性值以 se 开头的所有 li 元素，使其文本为 red，背景色为 yellow。
[attr$=value]{} 匹配带有attr属性并且以value结尾的元素
例如：li[class$="ne"] { color: red; background: yellow;}
含义：选择 class 整个属性值以 ne 结尾的所有 li 元素，使其文本为 red，背景色为 yellow。
[attr*=value]{} 匹配带有attr属性并且含有value的元素
例如：li[class*="ir"] { color: red; background: yellow;}
含义：选择 class 属性值中包含字串 ir 的所有 li 元素，使其文本为 red，背景色为 yellow。
[attr~=value]{} 匹配带有attr属性并且含有value这个独立单词的元素
例如：li[class~="done"] { color: red; background: yellow;}
含义：选择有 class 属性值包含 done 的所有 li 元素，使其文本为 red，背景色为 yellow。
3.复杂的伪类选择器
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
伪类选择器主要可以分为：动态伪类选择器(非css3)、UI元素状态伪类选择器、目标伪类选择器、结构伪类选择器、否定伪类选择器(IE6-8浏览器不支持)、绝对丁克伪类选择器、独生子女伪类选择器、语言伪类选择器((非css3)。
(1) 动态伪类-5个
定义：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。
伪类选择器分为两种。
:link :visited :hover :active :focus
🔽 静态伪类：只能用于超链接的样式。如下：
:link :visited属于锚点伪类 ——静态伪类
:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。
🔽 动态伪类：针对所有标签都适用的样式。如下：
:hover :active :focus属于用户行为伪类 ——动态伪类
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
前两个规则（:link、:visited）使用了静态伪类，后三个利用了动态伪类。动态伪类可以应用到任何元素，这一点很好，因为对非链接的元素应用动态样式通常很有用。例如，使用以下标记：
可以突出显示一个准备接受键盘输入的表单元素。
input:focus {background: silver; font-weight: bold;}向任意元素应用动态伪类还可以做一些有点奇怪的事情。你可能想通过以下规则为用户提供一种“强调”的效果：
body:hover {background: yellow;}根据这个规则，从body元素继承的所有元素（即包含在body下的元素）在鼠标指针停留时（处于悬停状态时）会显示一个黄色背景。标题。段落、列表、表、图像和body中的所有元素都会改为有黄色背景。另外还可以改变字体，在鼠标停留的元素外加一个边框，或者改变浏览器允许的所有其他方面。
(2 )状态伪类-3个
状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，因此吸引了广大用户的关注。UI是User Interface（用户界面）的缩写，UI元素状态伪类选择器主要是针对于HTML中的form元素进行操作。
CSS3新定义了3种常用的UI状态伪类选择器。简单说明如下：
① :enabled
E:enabled 匹配（form表单）中处于可用状态的E元素
:enabled 伪类表示匹配指定范围内所有可用UI元素。在网页中，UI元素一般是指包含在form元素内的表单元素。例如，在下面表单结构中，input:enabled 选择器将匹配文本框，但不匹配该表单中的按钮。
<form>
<input type="text" disabled="disabled">
<input type="button">
</form>② :disabled
E:disabled 匹配（form表单）中处于不可用状态的E元素
:disabled 伪类表示匹配指定范围内的所有不可用UI(也就是html页面、界面)元素。例如，在以下表单结构中，input:disabled 选择器将匹配按钮，但不匹配该表单中的文本框。
<form>
<input type="text">
<input type="button" disabled="disabled">
</form>③ :checked
E:checked 匹配（form表单）中处于选中状态的E元素
菜鸟教程关于:checked的定义和用法：
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。:checked 伪类表示匹配指定范围内所有可用UI元素。例如，在以下表单结构中，input:checked 选择器将匹配片段中单选按钮，但不匹配该表单中的复选框。
<form>
<input type="checkbox">
<input type="=radio" checked="checked">
</form>注意：checked伪类仅仅适用于单选按钮或则复选框(input type="checkbox",input type="radio")，所以如果在其他类型的元素定义checked伪类，checked会失效
在表单中，这些状态伪类是比较常用的，最常用的是 type=“text” 有 enable 和 disable 两种状态，前者为可写状态，后者为不可状态。另外 type=”radio” 和 type=”checkbox” 有 checked 和unchecked 两种状态。
注意：IE6~8不支持:checked、:enabled、:disabled 这3种选择器
(3) 目标伪类选择器-1个
匹配被激活的锚点，所应用的样式
E:target{} 选择当前锚点指向的元素。也就是说用来匹配页面的URI中某个标识符的目标(E)元素。
当我们点击锚点链接时，对应id的元素会显示在视口 如下例子div:target{ }
注意：IE8及其以下版本浏览器不支持 E:target 选择器
目标伪类选择器形式如 E:target，它表示选择匹配 E 的所有元素，且匹配元素被相关 URL 指向。该选择器是动态选择器，只有当存在 URL 指向该匹配元素时，样式效果才能够有效。
示例：针对以下文档，当在浏览器地址栏中输入 URL，并附加“#red”，以锚点方式链接到<div id="red">时，该元素会立即显示为红色背景，如下图所示：
<style>
div:target {
background: red;
}
</style>
<div id="red">盒子1</div>
<div id="blue">盒子2</div>运行结果：
补：目标伪类选择器的应用
一个URI，除了可以直接指向某文档外，还可以通过井号（#）后跟一个锚点或元素 id，来指向页面的某个特定元素。
目标伪类选择器，就是用来匹配页面上被URI的某个标识符指定的目标元素，并为它应用样式。
选择器
功能描述
版本
E:target
选择该文档中特定“id”的元素
3
假如在 index.htm 页面中有 3 个<a>元素，id 为catlog、about、contact，它们分别代表一个书签。HTML代码如下：
<a id="catlog" href="#catlog">商品分类</a> <a id="about" href="#about">联系我们</a> <a id="contact" href="#contact">关于我们</a>假如有一个外部链接，<a href="index.htm#contact ">关于我们</a>，就表示链接的目标为index.htm 文档中 id 为contact 的书签。当用户点击该链接时，跳转到index.htm 文档后，页面会向下滚动到 contact 书签的位置。
如果页面内容非常多，常常很难看出链接跳转到了哪个书签的位置。这种情况下，就可以使用目标伪类选择器 :target，为目标元素设置特殊的样式。这样，用户进入页面后，就会一目了然。CSS代码如下：<style> a:target { color: #fff; background: #fa7a20; } </style>上述代码为目标超链接元素 a 定义了特殊的背景颜色，用户进入页面后，跳转到任何一个书签时，都可以提醒用户当前所处的书签位置。运行结果如下图所示：
(4) 结构性伪类选择器-12个
结构性伪类选择器，也称结构伪类
通过元素的结构关系，来匹配元素
① 选择器:first-child 匹配这个元素父元素的第一个儿子，这个儿子还得符合选择器
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school
也就是说这里面有2个条件：一、该选择器的父元素的首个子元素；二、这个首个子元素正好是该选择器。
比如，E: first-child正确的理解应该是:只要E元素是它的父级的第一个子元素，就选中。它需要同时满足两个条件，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。
② 选择器:last-child 匹配这个元素父元素的最后一个儿子，这个儿子还得符合选择器
③ 选择器:nth-child(n) 匹配这个元素父元素的第n个儿子，这个儿子还得符合选择器
注意： n从1开始
④ 选择器:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。也就是说指定每个 选择器（如P元素）匹配同类型中的倒数第n个同级兄弟
注意： n从1开始
💦 扩展：CSS3__nth-last-child(n)选择器
:nth-last-child(n)等价:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
案例演示⏬
选择列表中倒数第五个列表项，将其背景设置为橙色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 选择列表中倒数第5个元素 */
ol > li:nth-last-child(5) {
background: orange;
}
</style>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
</ol>
</body>
</html>
运行结果：
⑤ 选择器:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n可以是数字、关键词或公式。
注意： n从1开始
扩展：CSS3__nth-of-type(n)选择器
此选择器用于选择属于特定类型的子元素，例如，p:nth-of-type(2)选择p元素，且被选中的p元素是某父元素的第二个p元素。
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
示例演示⏬
通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper > p:nth-of-type(2n) {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>
</body>
</html>
运行结果：
练习：创建4*4的表格，400*400写边框，第一行背景色为#0ff，最后一行背景色为#ff0，第三行第二列背景色为#faf
table{
width: 400px;height: 400px;
border: 2px solid #f00;}
table td{border: 2px solid #f00;}
tr:first-child{background-color: #0ff;}
tr:last-child{background-color: #ff0;}
tr:nth-child(3) td:not(:nth-child(2)){background-color: #faf;}
}扩展：结构性伪类选择器都有哪些？
伪类名称 定义 :root
选择到根元素 :empty 选择到既不能有文本内容也没有后代元素的元素 :first-child 所有兄弟元素中的第一个 :last-child 所有兄弟元素中的最后一个 :nth-child(n) 所有兄弟元素中的第n个，n是个数字 :nth-last-child(n) 所有兄弟元素中的倒数第n个，n是个数字 :only-child 没有兄弟元素的元素 :first-of-type 所有兄弟元素中同类型的第一个 :last-of-type 所有兄弟元素中同类型的最后一个 :nth-of-type(n) 所有兄弟元素中同类型的第n个,n是个数字 :nth-last-of-type(n) 所有兄弟元素中同类型的倒数第n个，n是数字 :only-of-type 没有同类型兄弟元素
注： :empty、:only-child、:only-of-type，这3个伪类选择器，有的资料里归为结构性伪类选择器，有的拎出来归为一类，私以为属于结构性伪类更为合适。这里摘出来，我做了细分，大家可自行归类。
(5) 否定伪类选择器-1个
:not(selector){} 符合selector都不选中
PS：IE6-8浏览器不支持否定伪类选择器
◼️可参考资料：菜鸟教程：https://www.runoob.com/cssref/sel-not.html
/* 除了第一个按钮以外，其它按钮的左上和左下圆角都清除 */
.btn:not(:first-child){
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}示例1：尝试运行⑤上面的表格练习：
tr:not(:nth-child(3)) td:not(:nth-child(2)){background-color: #faf;}
注意：第一二四行除了第二列背景都为#faf，即除了第三行和第二列其他都为#faf
示例2：对form中所有input加边框，但又不想submit也起变化，就可以这样写：
input:not([type=“submit”]) {border: 1px solid red;}
(6) 绝对丁克伪类选择器-1个
:empty{} 匹配内部不能包含任何元素，文本，空格，回车的空元素
:empty是一个比较有趣的css伪类，这个伪类会匹配没有内容的元素，作用于该元素，使用 empty 配合 bofore 或者 after 可以达到空元素占位的效果。
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css-> :empty</title> <style> * { padding: 0; margin: 0; box-sizing: border-box;} .contents { font-size: 15px; } /* 使用伪类 empty */ .contents:empty { padding: 20px; border: 1px dashed; } /* 伪类empty 配合伪元素before使用 */ .contents:empty::before { content: "暂无"; color: gray; } </style> </head> <body> <div class="contents">this is content</div> <div class="contents">this is content</div> <!-- 没有内容的元素，作用于empty --> <div class="contents"></div> <div class="contents">this is content</div> </body> </html>运行结果：
其实很好懂， 节点元素没有内容，则 empty 生效，使用场景可以用于布局占位，以及配合 before 可以给占位默认值，在表格中很实用，某条表格数据值为空时，可以使用该伪类给默认值
(7) 独生子女伪类选择器-1个
:only-child{} 匹配属于其父元素的唯一子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程(runoob.com)</title>
<style>
p:only-child {
background: #ff0000;
}
</style>
</head>
<body>
<div><p>This is a paragraph.</p></div>
<div>
<span>This is a span.</span>
<p>This is a paragraph.</p>
</div>
<p>
<b>注意:</b> Internet Explorer 8以及更早版本的浏览器不支持
:only-child选择器.
</p>
</body>
</html>
运行结果：
(8) 语言伪类选择器-1个
根据语言选择元素（lang 属性的值），该伪类了解即可
:lang(language) {} 用来匹配使用指定语言的元素。
示例：选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素，并设置其样式：
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(en) {
background: yellow;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>
<p><b>注释：</b>对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。</p>
</body>
</html>
运行结果：
4.伪元素选择器—内容生成
(1) 伪元素选择器的定义与作用
CSS 伪元素是用来添加一些选择器的特殊效果。
使用css动态的在页面上生成html伪元素，默认情况下，添加了一个行内元素
::before 或者 :before
::after 或者 :after
添加的伪元素的内容使用content属性
◼️ 伪元素选择器都有哪些？6个
① ::first-letter 选择元素中第一字母
② ::first-line 选择元素中第一行(只能用于块级元素)
③ ::after 给元素动态创建最后一个子元素
④ ::before 给元素动态创建第一个子元素
⑤ ::placeholder 用于设置输入框或文本域中placeholder属性设置的文字的样式
⑥ ::selection 用于设置被鼠标选中的文字的样式
⑦ ::backdorp 改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色
番外：CSS伪元素和伪类详解
扩展：::before与:before的区别？
1、::before是什么？有什么作用？
在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。
利用::before可以把需要插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /* 在链接之前添加一颗心 */ a::before { content: "♥"; } /* a标签水平居中 */ a{ display: block; width: 150px; margin: 0 auto; /* text-decoration: none; */ } </style> </head> <body> <a href="http://www.juqiuos.cn">聚求科技官网</a> </body> </html>运行结果：
我们来看一个简单的示例：
假设你有一个带有一些文本的blockquote。你可以使用::before在实际文本之前插入内容，比如：一些花哨的引号。引号将显示在页面上，但不会添加到DOM中的blockquote中。
<blockquote> 你目前的情况并不能确定你可以去哪里; 他们只是决定你从哪里开始。- Nido Qubein </blockquote>以下代码段将使用块引用添加几个花哨的引号::before。引号将在引用文本之前的blockquote中添加，并与其内联。
blockquote :: before { content：“\ 201C” ; /*样式引用*/ color：deepPink; font-size: 3em; position: relative; top: 20px; }content引用是通过转义其在属性内定义的Unicode值。这就是通常通过CSS表示和添加字形的方式。
我们来看看运行效果：
由于使用伪元素插入的内容未插入到DOM内，因此通常无法使用浏览器的开发者工具查看和检查插入的内容。但是，Chrome 32+和Firebug for Firefox允许你查看伪元素在DOM中的位置，通过选择它，你可以在CSS面板中查看与其相关联的样式。在Chrome的开发工具中检查上述演示会显示以下结果：
可以看出，添加有::before的内容与blockquote内的其他内容内联并位于其之前。
伪元素可用于插入几乎任何类型的内容，包括字符（如上所述），文本字符串和图像。例如，以下是::before具有有效内容的所有有效声明：.element :: before { content：url(path/to/image.png); /*图像，例如，图标*/ } .element :: before { content：“注意：”; /*一个字符串*/ } .element :: before { /*也算作一个字符串。转义Unicode会将其渲染为字符*/ content：“\ 201C”; }注：使用伪元素插入的图像无法调整大小，它们会按原样插入，因此你必须在使用前调整图像大小。
2、::before与:before的异同点
相同点：
① 伪类对象，用来设置对象前的内容
② ::before和:before写法是等效的
不同点：
① :beforo是Css2的写法，::before是Css3的写法
② :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
说明：
① 伪类元素要配合content属性一起使用
② 伪类元素是css渲染层加入的，不能通过js来操作
③ 伪类对象特效通常通过：hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }扩展：伪元素选择器::placeholder{ }
伪元素::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* input::-webkit-input-placeholder{} ————这个伪元素是专有的，并且特定于WebKit和Blink，只被WebKit和Blink支持 */ input::placeholder { color: red; font-size: 1.2em; font-style: italic; } </style> </head> <body> <input type="text" placeholder="我是红色的！" /> </body> </html>运行结果：
注意：在使用了::placeholder伪元素的选择器中，仅有小一部分CSS属性可以使用。
(2) 伪元素内容生成，可以解决的问题
使用伪元素解决外边距溢出、清除浮动解决高度塌陷
① 利用伪元素解决外边距溢出问题
<div id="d2">
<div id="d3"></div>
</div>
方案一：给父元素添加一个大儿子或是一个小儿子，空的<table></table>
/*上外边距溢出：添加大儿子 下外边距溢出：添加小儿子 */
方案二：外边距溢出，使用伪元素，在父元素的内容区之前或之后生成一个空的table ——推荐！
/*上外边距溢出：利用::before 下外边距溢出：利用::after伪元素 */
/* 解决上外边距溢出 */
#d2::before{
display: table;
content: "";
}
/* 解决下外边距溢出 */
#d2::before{
display: table;
content: "";
}② 利用伪元素清除浮动，解决高度坍塌问题
方案一：给父元素添加一个小儿子，这个小儿子是空的div并且设置clear:both样式
方案二：利用::after伪元素 ——推荐！
/*利用::after伪元素，解决高度坍塌问题*/
.clearfix::after {
display: block;
content: "";
clear: both;
}补：添加.clearfix类的原理
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。
3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。.clearfix为父元素类选择器
添加class以clearfix命名的after伪元素：推荐指数：☆☆☆☆☆ 👇
👉 优点：设置公共类，减少css代码，直接套用
👉 缺点：clearfix的class需要添加zoom: 1
clearfix这个class需要添加zoom: 1（触发haslayout），才能支持IE6和IE7浏览器，这是最推荐使用的一种方式。但是在IE6、IE7中不支持 :after伪类。如果想在IE6、IE7中显示开启hasLayout，需要给clearfix这个class添加设置zoom:1。.clearfix:after{ /*转换为一个块元素*/ display: block; content: ""; /*清除两侧的浮动*/ clear: both; } /*在ie6、ie7中不支持after伪类处理*/ .clearfix{ zoom: 1; }
⏬ 伪元素与伪类有何区别？
番外：CSS伪元素和伪类详解
① 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
② CSS3中伪类和伪元素的语法不同；伪类 :link :hover ，伪元素 ::before ::after
注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号“:"，伪元素用双冒号"::"
③ 伪元素本质上是创建了一个有内容的虚拟容器；
④ 可以同时使用多个伪类，而只能同时使用一个伪元素；
⑤ 伪类和伪元素的根本区别在于：它们是否创造了新的元素，这个新创造的元素就叫 "伪无素" 。
伪类的操作对象是文档(DOM)树中已有的元素，而伪元素则创建了一个文档(DOM树树(DOM)外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档(DOM)树之外的元素。
👉 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。 这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
👉 伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
⑥ 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
◼️ 注意：
👉 伪对象要配合content属性一起使用
👉 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
👉 伪对象的特效通常要使用:hover伪类样式来激活
🆕【后文传送门】👉 css弹性布局、CSS hack_08
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
