CSS3选择器详解一

HTML5中的全局属性
accesskey // 规定访问元素的键盘快捷键
class // 规定元素的类名（用于规定样式表中的类）
contenteditable // 规定是否允许用户编辑内容
contextmenu // 规定元素的上下文菜单
dir // 规定元素中内容的文本方向
draggable // 规定是否允许用户拖动元素
dropzone // 规定当被拖动的项目/数据被拖放到元素中时会发生什么
hidden // 规定该元素是无关的,被隐藏的元素不会显示
id // 规定元素的唯一ID
lang // 规定元素中内容的语言代码
spellcheck // 规定是否必须对元素进行拼写或语法检查
style // 规定元素的行内样式
tabindex // 规定元素的 tab 键控制次序
title // 规定有关元素的额外信息

* // 通用选择器,选择所有标签
<type> // 使用类型选择器(标签选择器),根据标签名选择标签
.class // 类选择器,根据全局属性class的值选择标签
#id // id选择器,根据全局属性id值选择标签
attr // 属性选择器,基于属性选择元素
.....

所谓选择器无非都是有效的过滤器,缩小前面选择器的范围,匹配更少元素.这些选择器相互组合能够产生具体程度更高的匹配。

基本选择器具体使用
1.通用选择器 *
<style type="text/css">
   * {
border: thin black solid;
padding: 4px;
   }
</style>
2.标签选择器 a
<style type="text/css">
   a, span {
border: thin black solid;
padding: 4px;
   }
</style>
3.类选择器
方式一:
<style type="text/css">
   .markUpClass {
border: thin black solid;
padding: 4px;
   }
</style>
方式二:
<style type="text/css">
   span.class2 {
border: thin black solid;
padding: 4px;
   }
</style>
方式三:
<style type="text/css">
   a.class2.class1 {
border: thin black solid;
padding: 4px;
   }
</style>
4.ID选择器
<style type="text/css">
   #ahref {
border: thin black solid;
padding: 4px;
   }
</style>
5.属性选择器
方式一:
<style type="text/css">
   [href] {
border: thin black solid;
padding: 4px;
   }
</style>
方式二:
<style type="text/css">
   [class~="class1"] {
border: thin black solid;
padding: 4px;
   }
</style>
方式三:
<style type="text/css">
   [lang|="en"] {
border: thin black solid;
padding: 4px;
   }
</style>

复合选择器
1.并集选择器(所有选择器并集)
<style type="text/css">
            a, [lang|="en"] {
                border: thin black solid;
                padding: 4px;
            }
        </style>
2.后代选择器(后面选择器选择选择器是基于前面的选择器)
方式一:
<style type="text/css">
   strong span {
border: thin black solid;
padding: 4px;
   }
</style>
方式二:
<style type="text/css">
   #mytable th {
border: thin black solid;
padding: 4px;
   }
</style>
3.子代选择器
<style type="text/css">
   body > * >span, tr>th {
border: thin black solid;
padding: 4px;
   }
</style>
4.兄弟选择器
方式一:相邻兄弟选择器
<style type="text/css">
   p + a {
border: thin black solid;
padding: 4px;
   }
</style>
方式二:普通兄弟选择器
<style type="text/css">
   p ~ a {
        border: thin black solid;
       padding: 4px;
   }
</style>
5.伪元素选择器
::选择器匹配文本块首行
<style type="text/css">
   p::first-line {
background-color: gray;
color: white;
   }
</style>
::选择文本块的首字母
<style type="text/css">
   p::first-letter {
       background-color: gray;
       color: white;
       border: thin black;
       padding: 4px;
   }
</style>
:before
:after  // 会生成内容,并将其插入文档
<style type="text/css">
   a:before {
       content: "Click here";
   }
   a:after {
       content: "!";
   }
</style>
案例：
<style type="text/css">
   body {
counter-reset: paramCounter;
   }
   p:before {
content: counter(paramCounter) ". ";
counter-increment: paramCounter;
   }
</style>