CSS 结构化伪类

最新推荐文章于 2023-01-04 10:45:00 发布

ClementQL

最新推荐文章于 2023-01-04 10:45:00 发布

阅读量384

点赞数

分类专栏： CSS 前端文章标签： CSS

本文链接：https://blog.csdn.net/CQL_K21/article/details/87917277

版权

前端同时被 2 个专栏收录

129 篇文章 1 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类--结构化伪类</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--结构化伪类-->
<!--结构化伪类选择器如下：
	Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是<html>元素
	Selector:first-child : 表示一组同胞元素中的第一个元素。
    Selector:last-child  : 表示一组同胞元素中的最后一个元素。
    Selector:nth-child(n)  : 表示一组同胞元素中的第n个元素。(顺数第n个)
    Selector:nth-last-child(n)  : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)
    
    Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。 
    还有其他的几个结构化选择器：和上面的类似
    Selector:first-of-type 
    Selector:last-of-type 
    Selector:nth-of-type(n)
    Selector:nth-last-of-type(n)
 	Selector:empty
-->
</head>

<body>
    <ul>
    	<li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Csharp</li>
        <li>Java</li>
        <li>Andriod</li>
    </ul>
   <ul>
    	<li>MATH</li>
    </ul>
    
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*:root{
	color:#900;
}
*/
li:first-child{
	color:yellow;
}
li:last-child{
	color:#60C;
}
li:nth-child(2){
	color:#2326C4;
}
li:nth-last-child(3){
	color:#2326C4;
}
li:first-of-type{
	color:yellow;
}
li:last-of-type{
	color:#60C;
}
li:nth-of-type(3){
	color:#2326C4;
}
li:nth-last-of-type(3){
	color:#2326C4;
}
li:only-child{
	color:#900;
}