大家好，欢迎来到IT知识分享网。
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的案例：
——：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>
输出样式：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30865.html
