CSS3选择器

属性选择器

在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了三个属性选择器，使得属性选择器有了通配符的概念。

新增的如下图所示

1550816925984.jpg

代码示例如下：

HTML代码
我链接的是PDF文件
我类名是icon
我的title是more

CSS代码
/* 以icon开头的 */
a[class^=icon]{
  background: green;
  color:#fff;
}
/* 以pdf结尾的 */
a[href$=pdf]{
  background: orange;
  color: #fff;
}
/* 以包含more的 */
a[title*=more]{
  background: blue;
  color: #fff;
}

结构性伪类选择器

• root
  ：root选择器，即根选择器，匹配到的始终是

• not
  即否定选择器，选择除某个元素之外的所有元素

/* 比如给表单中除submit按钮之外的input元素添加红色边框 */
input:not([type="submit"]){
  border:1px solid red;
}

• empty
  用来选择没有一点内容的元素。

/* 比如将没有任何内容的段落隐藏掉 */
p:empty {
  display: none;
}​

• target
  用来匹配页面的URL的某个标识符的目标元素。
  示例代码如下:点击Brand，将p标签背景色置为橙色，且字体颜色为白色

    

        
Brand
        
content for Brand
    


#brand:target p {
  background: orange;
  color: #fff;
}

• first-child
  选择父元素的第一个子元素，子元素！！！

/* 选择ol下的第一个子li元素 置为红色 */
ol > li:first-child{
  color: red;
}

• last-child
  与 first-child正好相反
• nth-child(n)
  定位父元素的一个或者多个特定子元素，n可以是整数，也可以是表达式，但是n的起始值始终是1，如果传0，则选择不到任何元素。
• nth-last-child(n)
  与 nth-child(n)正好相反

CSS3选择器（想不到具体的名字！！）

• first-of-type
  用来定位一个父元素下的某个类型的第一个子元素

/* 选择wrapper下的第一个子p元素 */
.wrapper > p:first-of-type {
  background: orange;
}

• nth-of-type(n)
  用来定位一个父元素下的某个类型的n个子元素
• last-of-type
  选择父元素下的某个类型的最后一个子元素。
• nth-last-of-type(n)
  选择父元素下的某个类型的最后几个子元素。
• only-child
  选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

/* p元素的父元素只有一个子元素，且这个子元素是p */
.post p:only-child {
  background: orange;
}

• only-of-type
  表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

/* p元素的父元素只有一个子元素，且这个子元素是p */
.post p:only-child {
  background: orange;
}