官方资料
鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/
学习正文
:root 选择器：https://man.ilovefishc.com/pageCSS3/dotroot.html
:empty 选择器：https://man.ilovefishc.com/pageCSS3/dotEmpty.html
:first-chlid 选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-child.html
:last-chlid 选择器：https://man.ilovefishc.com/pageCSS3/dotlast-child.html
:only-of-type 选择器：https://man.ilovefishc.com/pageCSS3/dotonly-of-type.html
:only-chlid 选择器：https://man.ilovefishc.com/pageCSS3/dotonly-child.html
:frist-of-type 选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-of-type.html
:last-of-type 选择器：https://man.ilovefishc.com/pageCSS3/dotlast-of-type.html
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置根元素的样式 */
:root {
background-color: red;
}
</style>
</head>
<body>
<p>I love FishC.</p>
</body>
</html>
:empty 选择器用于匹配没有子元素的元素标签：
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置根元素的样式 */
:empty {
background-color: red;
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<p></p>
<p>I love FishC.</p>
<p></p>
</body>
</html>
:first-chlid 选择器和 :last-chlid 选择器用于修改第一个和最后一个对应元素的样式：
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置第一个p元素和最后一个p元素的样式 */
p:first-child {
border: 2px solid green;
}
p:last-child {
border: 2px solid red;
}
</style>
</head>
<body>
<p>I love FishC.</p>
<p>I love FishC.</p>
<p>I love FishC.</p>
</body>
</html>
:only-chlid 选择器用于选取父元素中唯一的子元素：
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置第一个p元素和最后一个p元素的样式 */
p:first-child {
border: 2px solid green;
}
p:last-child {
border: 2px solid red;
}
span:only-child {
border: 1px solid pink;
};
</style>
</head>
<body>
<p>I <span>love</span> FishC.</p>
<p>I <span>love</span> FishC.</p>
<p>I <span>love</span> FishC.</p>
</body>
</html>
:only-of-type 选择器用于选取父元素中唯一类型的子元素：
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* :only-of-type 选择器匹配父元素下唯一类型的子元素 */
/* :only-child 和 only-of-type 的主要区别：only-of-type的父元素下可以有其他元素，only-child 不行*/
strong:only-child {
border: 2px solid pink;
};
</style>
</head>
<body>
<p>I <span>love</span> <strong>FishC</strong></p>
<p>I <span>love</span> FishC.</p>
<p>I <span>love</span> FishC.</p>
</body>
</html>
:first-of-type 和 last-of-type 用于匹配父元素下相同类型的第一个和最后一个：
<!DOCTYPE html>
<html>
<head>
<title>结构伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* first-of-type 和 last-of-type */
p:first-of-type {
border: 2px solid green;
}
p:last-of-type {
border: 2px solid red;
}
</style>
</head>
<body>
<span>这才是父元素下的第一个元素</span>
<p>I <strong>love</strong> <span>FishC</span></p>
<p>I <span>love</span> FishC.</p>
<p>I <span>love</span> FishC.</p>
</body>
</html>
