子元素伪类选择器
vue项目中在helloworld.vue中写上：
<style type="text/css">
*{
padding:0;margin:0;}
ul{
list-style-type:none;}
ul li
{
height:20px;
}
ul li:first-child{
background-color:red;}
ul li:nth-child(2){
background-color:orange;}
ul li:nth-child(3){
background-color:yellow;}
ul li:nth-child(4){
background-color:green;}
ul li:last-child{
background-color:blue;}
</style>
<template>
<div>
<ul>
<li>98</li>
<li>99</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
（在notepad中保存然后刷新浏览器）：
设置奇数列和偶数列：
<style type="text/css">
*{
padding:0;margin:0;}
ul{
list-style-type:none;}
ul li{
height:20px;}
/*设置奇数列的背景颜色*/
ul li:nth-child(odd)
{
background-color:red;
}
/*设置偶数列的背景颜色*/
ul li:nth-child(even)
{
background-color:green;
}
</style>
<template>
<div>
<ul>
<li>98</li>
<li>99</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
ui元素选择器
UI伪类选择器，指的是针对“元素的状态”来选择元素的一种伪类选择器。UI，全称“User Interface”，也就是用户界面。
元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。UI伪类选择器共同特点就是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。此外，记住一点，大多数UI伪类选择器都是针对表单元素的。
在CSS3中，UI伪类选择器主要包括以下5类。
（1）:focus
（2）::selection
（3）:checked
（4）:enabled和:disabled
（5）:read-write和:read-only
:focus
在CSS3中，我们可以使用:focus选择器来定义元素获取焦点时使用的样式。不过并不是所有的HTML元素都有焦点样式，具有“获取焦点”和“失去焦点”特点的元素只有两种。
（1）表单元素（按钮、单选框、复选框、文本框、下拉列表）
（2）超链接
HelloWorld.Vue:
<style type="text/css">
input:focus
{
outline:1px solid red;
}
</style>
<template>
<div>
<p><label for="user">账号：</label><input id="user" type="text"/></p>
<p><label for="pwd">密码：</label><input id="pwd" type="password"/></p>
</div>
</template>
在CSS3中，我们可以使用::selection选择器来定义页面中被选中文本的样式。注意，::selection选择器使用的是双冒号，而不是单冒号。实际上，单冒号往往都是伪类，而双冒号往往都是伪元素。
<style type="text/css">
div::selection
{
color:white;
background-color:red;
}
p::selection
{
color:white;
background-color:orange;
}
/*兼容Firefox浏览器*/
div::-moz-selection
{
color:white;
background-color:red;
}
p::-moz-selection
{
color:white;
background-color:orange;
}
</style>
如果要定义整个页面，则前面不加div p等:
<style type="text/css">
::selection
{
color:white;
background-color:red;
}
</style>
:enabled和:disabled
我们都知道，某些表单元素如文本框、单选框、复选框等，都有“可用”和“不可用”这两种状态。
在CSS3中，我们可以使用:enabled选择器来定义表单元素“可用”时的样式，也可以使用:disabled选择器来定义表单元素“不可用”时的样式。
:empty
在CSS3中，我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color: #FFA722;
}
td:empty
{
background-color:red;
}
</style>
<template>
<div>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</div>
</template>
—【部分节选自绿叶学习网】