CSS选择器总结

1、基本选择器

（1）标签选择器，示例表示选择所有p元素

p {
    font-size:15px;
    color:#00796b;
  }

（2）类选择器，示例表示选择 class="my-font" 的所有元素

.my-font {
    font-size: 18px;
    font-weight: bold;
}

（3）ID选择器，示例表示选择 id="poetry" 的所有元素

#poetry {
   font-size: 16px;
   margin: auto;
   text-align: center;
   color: #00796b;
}

（4）通配选择器（通配符），示例表示选择所有元素

* {
    font-size: 14px;
    margin: auto;
    text-align: center;
    color: #00796b;
}

2、组合选择器

（1）包含选择器

包含选择器通过空格标识符来表示，示例表示选择 <div> 元素内部的所有 <p> 元素

div p{
     color: #00796b;
     font-size: 20px;
     font-weight: bold;
}

（2）子选择器

子选择器以“>”表示，示例表示选择父元素为 <div> 元素的所有 <p> 元素

div > p{
   color: #00796b;
   font-size: 20px;
   font-weight: bold;
}

（3）相邻选择器

相邻选择器通过“+”分隔符进行定义，指定的元素关系是兄弟关系。示例表示选择紧接在 <div> 元素之后的所有 <p> 元素

div+p {
    color: #00796b;
    font-size: 20px;
    font-weight: bold;
}

（4）兄弟选择器

兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。示例表示选择前面有 <h1> 元素的每个 <p> 元素

h1~p{
    color: #00796b;
    font-size: 20px;
    font-weight: bold;
}

（5）分组选择器

分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。

span, h1, h2, p {
   color: #00796b;
   font-size: 20px;
   font-weight: bold;
}

3、属性选择器

CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三个新增的选择器和已定义的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同构成强大的HTML属性过滤器。
 

/* E[attr] 包含属性attr的元素 */ 
/* <span id="demo">啦啦啦</span> */

[id] {
    color: #00796b;
}

[title] {
    font-size: 35px;
    color: #00796b;
}

[title][href] {
    color: darkolivegreen;
    text-decoration: none;
}


/* E[attr="value"] 属性attr的属性值等于value的元素 */
/* <a href="#pick">啦啦啦</a> */

[href="#pick"] {
    font-size: 22px;
    color: green;
    text-decoration: none;
}


/* E[attr~="value"] 属性attr的属性值中有等于value的元素 */
/* <p class="important warning">啦啦啦</p> */

[class~="important"] {
    font-size: 35px;
    color: blue;
}


/* E[attr^=value] 属性值以value开头 */
/* <p class="onesteep">啦啦啦</p> */

[class^="one"] {
    font-size: 12px;
    color: #999999;
}


/* E[attr$=value] 属性值结尾是value */
/* <p class="onesteep">啦啦啦</p> */

[class$="steep"] {
    font-size: 32px;
    color: darkorange;
}


/* E[attr*=value] 属性值里存在有value字符 */
/* <p class="onesteep">啦啦啦</p> */

[class*="te"] {
    font-size: 15px;
    color: darkmagenta;
}


/* E[attr|="value"] 属性值是value或者以value-开头 */
[class|="demo"] {
    font-size: 35px;
    color: #00799b;
}

4、伪类选择器

（1）动态伪类选择器

/*链接没被访问时为黑色*/
a:link{
    color: black;
}
/*链接被访问后为灰色*/
a:visited{
    color: gray;
}
/*鼠标放在连接上时显示为蓝色*/
a:hover{
    color: blue;
}
/*鼠标点击时激活链接那一下显示为绿色*/
a:active{
    color: green;
}

（2）结构伪类选择器

结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义

 1、:first-child：选择一个元素的第一个子元素（不支持ie6）

 2、:last-child：选择一个元素的最后一个子元素

 3、:nth-child()：选择某个元素的一个或多个特定的子元素（不支持ie6~ie8）

/*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
.demo li:nth-child(n) {
    border:1px solid #999999;
}

/*选中0，2，4，6，8...*/
li:nth-child(2n) {
    border:1px solid #999999;
}

/*选中0，1，3，5，7...*/
li:nth-child(2n-1) {
    border:1px solid #999999;
}

/*选中5，6，7，8，9...*/
li:nth-child(n+5) {
    border:1px solid #999999;
}

/*选中5，4，3，2，1*/
li:nth-child(-n+5) {
    border:1px solid #999999;
}

/*选中1，4，7，10...*/
li:nth-child(3n+1) {
    border:1px solid #999999;
}

 4、:nth-last-child()：选中某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算（不支持ie6~ie8）

 5、:nth-of-type()：选择指定的元素（不支持ie6~ie8）

 6、:nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算（不支持ie6~ie8）

 7、:first-of-type：选择一个上级元素下的第一个同类子元素（不支持ie6~ie8）

 8、:last-of-type：选择一个上级元素下的最后一个同类子元素（不支持ie6~ie8）

 9、:only-child：选择的元素是他的父级元素的唯一子元素（不支持ie6~ie8）

 10、:only-of-type：选择一个上级元素的唯一一个同类型的子元素（不支持ie6~ie8）

 11、:empty：选择的元素里面没有任何内容（不支持ie6~ie8）

 

（3）否定伪类选择器（不支持ie6~ie8）

 :not()表示否定伪类选择器，表示排除掉特定元素

 

（4）状态伪类选择器（不支持ie6~ie8）

状态伪类选择器主要是针对表单设计的，状态伪类选择器就是控制UI元素状态的，可不可用，选没选中，获取或失去焦点，锁定、待机等

 1、:enabled：匹配指定范围内所有可用的表单元素

 2、:disabled：匹配指定范围内所有禁用的表单元素

 3、:checked：匹配指定范围内所有被选中的元素

 

（5）目标伪类选择器（不支持ie8及以下）

  :target：选择当前活动的元素，当存在URL指向该匹配元素时，样式效果才被执行

/* 在URL后面附加'#news'，以锚点方式链接到id为news的元素时，该元素的样式就会发生相应的变化 */
#news:target {
    font-size: 32px;
    background-color: #00765b;
    margin: auto;
    text-align: center;
}