正文
day66-CSS伪类选择器和伪元素选择器
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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}
