1、什么是伪类？
首先伪类是选择器的一种，它用于选择处于特定状态的元素。
2、伪类的表现状态时什么样子的？
伪类就是开头为冒号的关键字。
例如：:last-child
3、常见的伪类有哪些？
:last-child——它用于选择一组兄弟元素中的最后一个元素。
:first-child——它用于选择在一个页面中的第一个子元素，然后在这个子元素上面进行装饰，这使得我们将不再需要编辑 HTML
:only-child——它用于匹配没有任何兄弟元素的元素。
:invalid——表示任意内容未通过验证的<input>或其他<form> 元素
然后也有一些别的伪类，这些伪类只有当用户以某种方式和文档交互的时候应用。它被称为用户行为伪类或者动态伪类。
这些伪类包括：
:hover——只会在用户将鼠标挪到上面的时候激活。
:focus——在会在用户使用键盘控制，选定元素的时候激活。
4、能给出上面说到的元素的案例方便理解吗？
——：last-child 如下：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<style type="text/css">
.uu{
font-size: large;
font-style: italic;
color: greenyellow;
}
.mm:last-child{
color: blue;
font-size: larger;
}
.kk{
color: greenyellow;
}
</style>
</head>
<body>
<p class="uu">curriculum</p>
<ul>
<li class="mm">math</li>
<li class="uu">chinese</li>
<li class="mm">english</li>
</ul>
</body>
</html>
输出
这个案例比较典型，就是我们的last-child他会自动寻找到相同类选择器名（其他id或元素选择器一样参考），然后找到最后面的那个选择器，然后在上面应用样式。当然，如果我们将上面第一个<li>标签的class值赋为kk，结果还是最后一个元素会应用mm样式，（排行第一个实际上也是最后一个）
——:first-child 案例如下：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<style type="text/css">
article p:first-child{
font-size: large;
color: aqua;
}
p{
color: red;
}
article p:last-child{
color: blueviolet;
}
</style>
</head>
<body>
<article>
<p>the day is sunny</p>
<p>tom and henry run to school because they were sleep late last night.although the weather is so
great.they did not have time to enjoying.
</p>
</article>
<p>
although they try themselve to run faster.they still late,and penalty station for it.
</p>
</body>
</html>
输出样式：
上面的例子中，使用了first-chid和last-child。
从案例输出的结果，我们会发现一个有意思的现象，就是我们那个first-child,last-child样式全写在article的<p>元素内，然后样式也就只用在这里面。
这可以用于我们每次将文章第一段加粗或其他样式情况下。
——:only-child 案例如下：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<style type="text/css">
.hh :only-child {
color: red;
}
</style>
</head>
<body>
<main>
<div class="hh">
<i>I am a lonely only child.</i>
</div>
<div class="hh">
<i>I have siblings.</i></br>
<b>So do I!</b></br>
<span>I also have siblings, <span>but this is an only child.</span></span>
</div>
</main>
</html>
显示样式：
上面的例子中，就把无兄弟的样式表示出来了。
——:invalid 案例如下
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<style type="text/css">
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
</style>
</head>
<body>
<form>
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required/>
</form>
</body>
</html>
——:focus的案例：
<!DOCTYPE html> <html> <head> <title>test1</title> <style type="text/css"> .red-input:focus { background-color: yellowgreen; color: red; }.blue-input:focus{ background-color: pink; color: blue; } </style> </head> <body> <form> <input class="red-input" value="I'll be red when focused."><br> <input class="blue-input" value="I'll be blue when focused" </form> </body> </html>
——：hover案例：
为了确保生效，:hover 规则需要放在 :link 和 :visited 规则之后，但是在:active 规则之前，按照 LVHA 的顺序声明 :link－:visited－:hover－:active。
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<style type="text/css">
div.menu-bar ul ul {
display:none;
}
div.menu-bar li:hover>ul{
display: block;
}
</style>
</head>
<body>
<div class="menu-bar">
<ul>
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="#">Link</a>
</li>
<li>
<a class="menu-nav" href="#">Submenu</a>
<ul>
<li>
<a class="menu-nav" href="#">Submenu</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
输出样式：
标签：last,伪类,color,元素,样式,child,CSS From： https://www.cnblogs.com/TomHard/p/16952725.html