E>F：子选择符，选择所有作为E元素的子元素F。
<style type="text/css">
li>a {color: #ccc;}
</style>
</head>
<body>
<li><a href="">项目列表一</a>
<ul>
<li>列表1</li>
<li>列表2</li>
</li>
</ul>
<li><a href="">项目列表二</a>
<ul>
<li>列表1</li>
<li>列表2</li>
</li>
</ul>
选择li元素下所有a链接。
E+F：相邻选择符，选择选择紧贴在E元素之后F元素。
<style type="text/css">
h1+p {color:red;}
</style>
</head>
<body>
<h1><p>这是一个标签</p></h1>
<p>这是一个标签</p>
<h2><p>这是一个标签</p></h2>
选择h1之后的p元素
E~F：兄弟选择符，选择E元素所有兄弟元素F。
<style type="text/css">
h1~p {color:red;}
</style>
</head>
<body>
<h1>这是一个标签</h1>
<p>样式</p>
<b>这是一个标签</b>
<p>样式</p>
<p>样式</p>
选择h1后所有的p元素
伪类选择符：
E:link 设置超链接a在未被访问前的样式。
E:visited 设置超链接a在其链接地址已被访问过时的样式。
E:hover 设置元素在其鼠标悬停时的样式。
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
<style type="text/css">
a:link { text-decoration: none;color: black;}
a:visited {color: orange;}
a:hover {color: purple;}
a:active {background-color: green;color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">a链接</a>
</body>
E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
<style type="text/css">
input:focus {outline: 1px solid blue;}
</style>
</head>
<body>
<input type="search" autofocus />
</body>
E:lang(fr) 匹配使用特殊语言的E元素。
E:not(s) 匹配不含有s选择符的元素E。
E:root 匹配E元素在文档的根元素。常指html元素
E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:only-child 匹配父元素仅有的一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty 匹配没有任何子元素（包括text节点）的元素E。
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。