1. 伪类选择器：hover 和 focus 比较常用。 1.1 hover：把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候，字体变成了红色。 html: <body> <p>迈腾2020款TSI DSG舒适型</p> </body> css: p:hover{color:red} 注意p和hover中间用冒号：分开。p代表所有p标签。 1.2 focus：点击文本输入框，背景颜色变成黄色。 html: <body> <input type="text"> </body> css: input:focus{outline=0;background-color: yellow} outline指外框， 注意p和hover中间用冒号：分开。 1.3 active: 点击文本输入框，背景闪现黄色。如果鼠标左键按住输入框内部不放，背景一直都是黄色，放开之后黄色消失。 html: <body> <input type="text"> </body> css: input:active{background-color: yellow} 同样适合用于文字：点击文字，闪现黄色，按住不放是黄色，放开之后黄色消失。 html: <body> <p>迈腾2020款TSI DSG舒适型</p> </body> css: p:active{color:yellow} 1.4 link：浏览器刚打开的时候，没访问过的链接，把baidu的字体颜色设置为绿色，接下来如果访问这个链接之后，baidu的字体颜色会恢复到原来的紫色。注意id不能是纯数字。 html: <body> <a id="d1" href="http://www.baidu.com">baidu</a> </body> css: #d1:link{color:green} 1.5 visited: 浏览器刚打开的时候，没访问过的链接，baidu的字体颜色默认是蓝色，接下来如果访问这个链接之后，baidu的字体颜色会变成红色。 html: <body> <a id="d1" href="http://www.baidu.com">baidu</a> </body> css: #d1:visited{color:red} 2. 伪元素选择器 2.1 first-letter ：常用的给首字母设置特殊样式 html: <body> <p>迈腾2020款TSI DSG舒适型</p> </body> css: p:first-letter{font-size:38px;color:red} 首字母38像素，红色。 2.2 before ：在每个<p>标签的内容之前插入* html: <body> <p>迈腾2020款TSI DSG舒适型</p> <p>迈腾2020款TSI DSG舒适型</p> </body> css: p:before{content:'*';color:red} 2.3 after ：在每个<p>标签的内容后面插入[?] html: <body> <p>迈腾2020款TSI DSG舒适型</p> <p>迈腾2020款TSI DSG舒适型</p> </body> css: p:after{content:"[?]";color:red}