CSS3选择器-CSDN博客

一：属性选择器

CSS3新增了3个属性选择器，使得属性选择器有了通配符的概念。

二：结构性伪类选择器

:root

:root选择器，可理解为根选择器，匹配元素所在文档的根元素。在HTML文档中，根元素始终是<html>。

:root选择器等同于<html>元素：

:root{background:orange} html {background:orange;}

另外在IE９以下还可以借助“:root”实现hack功能。

:not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。比如说你想给表单中除submit按钮之外的input元素添加红色边框，可以写成：

input:not([type="submit"]){ border:1px solid red;}

:empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，包括空格。

:target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

1.点击链接显示隐藏的段落。

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>
.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

分析:(1)、触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码是：#brand

(2)、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

2.多个url（多个target）处理：

当同一个页面上有很多的url的时候，你可以取不同的名字，只需#号后的名称与id=""中的名称对应。

:first-child

:first-child选择器表示的是选择父元素的第一个子元素的元素E。

ul>li:first-child{background:blue;}

:last-child

与:first-child选择器作用类似，但:last-child选择器选择的是元素的最后一个子元素。

ul>li:last-child{background:blue;}

:nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

:nth-last-child(n)

:nth-last-child(n)从某父元素的最后一个子元素开始计算，来选择特定的元素。

:first-of-type

:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

:nth-of-type(n)

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在:nth-of-type(n)选择器中的n和:nth-child(n)选择器中的n参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

:last-of-type选择器

:last-of-type选择器和:first-of-type选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素

:nth-last-of-type(n)

:nth-last-of-type(n)选择器和:nth-of-type(n)选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的:nth-last-child(n)选择器一样。

:only-child

:only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

:only-of-type

:only-of-type选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。:only-of-type是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用:only-of-type选择器就可以选中这个元素中的唯一一个类型子元素

三：在表单中使用的选择器：

:enabled

对表单元素可用（:enabled）和不可用（:disabled）状态设置样式，:enabled用来选择可用表单元素。

:disabled

用来选择不可用表单元素。只需在表单元素的HTML中设置“disabled”属性。

:checked

表单元素中，单选按钮和复选按钮都具有选中和未选中状态。CSS中:checked表示的是选中状态。

::selection

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，有的时候设计要求,不使用浏览器默认的突出文本效果，需要一个与众不同的效果，此时::selection伪元素就非常的实用。不过在Firefox浏览器需要添加前缀-moz

:read-only

:read-only伪类选择器用来指定处于只读状态元素的样式。

:read-write

:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。

::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

转载于:https://my.oschina.net/u/2460402/blog/750967