高级css样式选择器

一.基本选择器

• 通用元素选择器，匹配任何元素，在页面上的每一个元素上起作用
  h4 标签选择器，匹配所有使用h4标签的元素，其优先级仅仅只比 * 高
  .test (class)类选择器，匹配所有class属性中包含textbox的元素，class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素
  #mainWrapper id 选择器 匹配所有id属性等于mainWrapper的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差.

*{margin:0;padding:0;} /*web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用*/a{text-decoration:none;}ul{color:red;}#mainWrapper *{border-bottom:1px solid #ccc;}/*上面的代码中会应用于id为container元素的所有子元素中。 除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源*/层次选择器：#content img {max-width: 600px;} /* 表示id为content时，下面的img元素最大宽度属性为600px（父选择器可以为类、Id选择器，子选择器也可以）*/.line_tabel  tr{height:30px;} /* 表示table的class为line_tabel时，下面的tr元素height属性为30px  */div input{background-color:red} /* 表示div下的input子元素（父选择器为元素） */

二 多元素的组合选择器/扩展选择器()

E,F 多元素选择器/群组选择器,同时匹配 所有E元素或者F元素,E和F之间用逗号分隔,如 div,span,img{}(兼容IE6+)
E F后代元素选择器– 这也是我们最常用的一种选择器。这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的。匹配所有属于E元素后代的F元素，E 和 F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F,与后带选择器E F不同的是，子选择器只对E下的直接子级F起作用

E＋Ｆ　毗邻元素选择器，匹配所有紧随Ｅ元素之后的同级元素Ｆ（只匹配第一个元素）

li a{　　text-decoration:none;　}#去掉li下的所有a的下划线ul + p{　　color:red;　}#相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色(只匹配第一个元素)。div#container > ul {     border: 1px solid black;　}<div id=container>      <ul>         <li> List Item           <ul>              <li> Child </li>           </ul>         </li>         <li> List Item </li>         <li> List Item </li>         <li> List Item </li>      </ul> </div>#子选择器。与后代选择器E F不同的是，子选择器只对E下的直接子级F起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲E > F是值得提倡选择器。

三 属性选择器

属性选择器让你可以基于属性来定位一个元素，你可以指定钙元素的某个属性，这样所有使用该属性–而不管它的值—的这个元素都将被定位，也可以明确并定位在这些属性上使用特定值的元素—这就是属相选择器的作用

css2,1 属性选择器

E[att] 匹配所有具有att属性的E元素,不考虑它的值（注意：E元素在此处可以省略，比如[cheacked]）；
E[att=value] 匹配所有att值等于value的元素，即该属性具有具体的值；
E[att~=value] 匹配所有att属性具有多个空格分隔的值,其中一个值等于value的E元素，即该属性的值必须是一系列用空格隔开的多个值，(比如，class=title featured home),而且这些值中必须有一个值是指定的值value;
E[att|=value] 匹配所有att属相具有多个连字号分隔的值，属性的值就是value或者以value开始并立即跟上一个 -字符，也就是value-。(比如lang=zh-en);

css3 属相选择器

E[att^=value] 属性att的值以value开头的元素，即：该属相的值以指定的值结束;
E[att$=value] 属相att的值以value结尾的元素，即：该属性的值包含指定的值;
E[att*=value] 属性att的值包含value字符串，

例1、匹配带有title属性的链接元素a[title] {      color: green;　}例2、匹配所有拥有href属性，且href为http://fity.cn的所有链接a[href=http://fity.cn] {     color: #1f6053; 　}例3、匹配data-info属性中包含“textimg”链接的字体颜色为红色。匹配data-info属性中包含“img”的链接设置黑色边框<a href=path/to/image.jpg data-info=textimg img> Welcome to http://fity.cn </a> a[data-info~=textimg] {      color: red;　}a[data-info~=img] {      border: 1px solid black;　}例4、匹配href中包含 fity.cn 的所有链接a[href*=fity.cn] {     color: #1f6053;　}例5、匹配href中所有以http开头的链接 a[href^=http] {      background: url(path/to/external/icon.png) no-repeat;      padding-left: 10px;　}例6、设定所有class属性值包含 article 并带 - 字符的div元素的背景色为#333div[class|=article] {  background-color: #333;　}

四 伪类选择器

E:first-child 匹配父元素的第一个子元素。
E:link 匹配所有未被点击的连接标签
E:visited 匹配所有已被点击过的标签
E:active 匹配鼠标已经其上按下，还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:foucs 匹配获得当前焦点的E元素
E:lang(c)匹配lang属相等于c的E的元素

五 css2.1中的为元素/伪对象

E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
E::before 在E元素之前插入生的内容
E::after 在E元素之后插入生成的内容

h1:after {　　content:url(/i/logo.gif);　}#上面的代码实现了在h1标题的后面显示一张图片。

六 css3 同级元素通用选择器

##
E ~ F 相邻选择器，与前面提到的E + F 不同的是，E~ F 匹配与E 相同级别的所有F元素，E+F 只匹配第一个

.article p ~ ul {  color:red;　}#上面的代码设定所有的特定div属性为article

七 css3中与用户界面有关的伪类

E:enabled 匹配表单中激活的元素（比如，文本输入框）和 checked或unchecked状态（radio单选按钮和checkbox复选框）
E:disabled 匹配表单中禁用的元素
E:checked 匹配处于选定状态的界面元素
E::section 定义用户鼠标选择内容的样式

css3中结构性伪类

E:root 匹配文档的根元素，对于html文档来说就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，不同的是它匹配的不是某个序列元素，而是元素类型E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)，这个伪类用的比较少
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

css3的反选伪类/否定伪类选择器

E:not(value) 否定伪类选择器用来在匹配元素时排除某些元素，匹配不符合当前选择器的任何元素

例1、设定除了id为container的div元素字体颜色为bluediv:not(#container) {      color: blue;　}例2、设定你的article的div中的所有段落(p)有比较大的字体，除了表示时间和日期的段落.article p:not(.date) {  font-size: 13px;　}

十css中的:target伪类

E:target 匹配当文档中特定id点击后的效果

h4:target {  background: #F2EBD6;　}#上面代码设定单击h4文本链接时相应的文本以#F2EBD6高亮显示详细可以阅读：http