CSS选择器汇总

前言

工作中部分选择器总是忘记其具体的含义，这在开发项目时很影响效率，我始终相信每个选择器无论简单复杂，既然诞生了就必定有他的使命，虽然常用的选择器就那么几个就够用了，但系统的掌握所有的选择器还是很有必要的，特别是如果你想开发一个属于的UI框架时，会发现合理的使用选择器，可以大量减少类名的使用。以下产考W3C总结，如有错误还请批评指正。

*

* {
  color: red;
}


<p>一段文字</p> <!-- 红色 -->
<span>一段文字</span> <!-- 红色 -->

说明：通配符选择器。选择所有的元素

.class

.intro {
  color: red;
}


<p class="intro">一段文字</p> <!-- 红色 -->

说明：类选择器，选者拥有指定类名的元素。选择类名为intro的所有元素

#id

#intro {
  color: red;
}

<p id="intro">一段文字</p> <!-- 红色 -->

说明：id选择器，选择拥有id的元素。选择id为intro的元素

p

p {
  color: red;
}

<p>一段文字</p>  <!-- 红色 -->

说明：标签选择器，选择指定标签的元素。选择所有的p元素

div,p

p,
div{
 color: red;
}

<p>hello</p> <!-- 红色 -->
<div>world</div> <!-- 红色 -->

说明：并列选择器，用于同时选择多个指定元素。选择所有的p元素和div元素。

div p

div p{
 color: red;
}


<div>
 <p>hello</p> <!-- 红色 -->
 <p>world</p> <!-- 红色 -->
</div>

说明：子代选择器，选择指定元素内部的元素。选择div元素内部的所有p元素。

div > span

div > span{
 color: red;
}

<div>
 <p><span>world</span></p>
 <span>hello</span> <!-- 红色 -->
</div>

说明：子元素选择器，选择拥有特定父元素的元素。选择父元素为div的span元素。

div + p

div + p{
 color: red;
}

<div>
  <p>hello</p>
  <p>hello</p>
  <div><p>world</p></div>
  <p>hello</p> <!-- 红色-->
</div>

说明：紧邻选择器，选择指定元素后紧跟的元素（同级）。选择div元素后面紧邻的p元素，他们必须是同一级

[target]

a[target] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang">VueBlog</a>

说明：属性选择器，选择拥有指定属性的元素。选中拥有target属性的a元素。

[target="_blank"]

a[target="_blank"] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_self">VueBlog</a>

说明：属性选择器，选者拥有指定属性和值的元素。选择target属性为"_blank"的元素

[title~=VueBlog]

a[title~=VueBlog] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank" title="vueblog">VueBlog</a>
<a href="https://www.86886.wang" target="_self"  title="Vue VueBlog">VueBlog</a> <!-- 红色 -->

说明：属性选择器，选择属性值包含特定词汇的元素。选择title包含VueBlog的元素，属性值区分大小写，并且是单独的单词。

[title|=Vue]

a[title~=Vue] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a>

说明：属性选择器，选取属性值以指定词汇开头的元素。选择title以Vue开头的元素，可以拥有连字符。

[title^=Vue]

a[title^=Vue] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->

说明：属性选择器，选取属性值以指定字母开头的元素。选择属性值以Vue开头的元素，这个选择器拥有[attrbute|=value]选择器的所有功能且更强大。

[title$="Blog"]

a[title$=Blog] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a>
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->

说明：属性选择器，选择属性值以指定字母结尾的元素。选择title属性以Blog结尾的元素。

[title*=Blog]

a[title*=Vue] {
  color: red;
}

<a href="https://www.86886.wang" target="_blank" title="Blog system">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->

说明：属性选择器，选择属性值包含指定字母的元素。选择title属性包含Blog的元素。

p ~ ul

p ~ ul {
  color: red;
}
<div>一个 div 元素。</div>
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>


<p>第一段。</p>
<h2>一个列表</h2>
<!-- 红色 -->
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>

<h2>另一个列表</h2>
<!-- 红色 -->
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>

说明：选择指定元素后的所有元素。选择p元素后的ul元素，他们必须拥有相同的父元素，即在同一级。

a:link

a:link {
  color: red;
}

<!-- 红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>

说明：选择未访问的a元素。

a:visited

a:visited {
  color: red;
}

<!-- 访问过后文字为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>

说明：选择已访问的a元素

a:hover

a:hover {
  color: red;
}

<!-- 鼠标悬浮在链接上时为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>

说明：选择鼠标悬浮到的元素。适用于所有元素

a:active

a:active {
  color: red;
}

<!-- 鼠标点击时为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>

说明：选择活动链接，即正在点击的链接。

a:focus

a:focus {
  color: red;
}

<!-- 获得焦点是为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>

说明：选择获得焦点的元素。对于a元素来说，通过tab键和点击该元素都可以获得焦点，而:active选择的是活动链接，即点击那一瞬间。:focus适用于可获得焦点的元素，如input，a元素

p:first-letter

p:first-letter {
  color:red;
}
<!-- H红色-->
<p>Hello World<p>
<!--世字红色-->
<p>世界你好</p>

说明：选择首字母。汉字也能被选中。

p:first-line

p:first-line{
  color:red;
}
<!-- 红色-->
<p>Hello World<p>
<!--红色-->
<p>世界你好</p>

说明：选择首行。汉字也能被选中。

p:first-child

p:first-child{
  color:red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>
  <div>
    <p>Hello World<p> <!-- 红色-->
    <p>世界你好3</p>
  </div>
</body>

说明：选择其父元素的第一个子元素。上面的例子中只有Hello World是红色，虽然"世界你好2"也拥有body这个父元素，但他不是body的第一个子元素

p:last-child

p:last-child{
  color:red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>
  <div>
    <p>Hello World<p> 
    <p>世界你好3</p> <!-- 红色-->
  </div>
</body>

说明：选择其父元素的最后一个子元素。例子中“世界你好2”不是body元素的最后一个子元素。

p:only-child

p:only-child{
  color:red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>
  <div>
    <p>世界你好3</p> <!-- 红色-->
  </div>
</body>

说明：选择其父元素仅有一个子元素的元素。

p:nth-child(n)

p:nth-child(2){
  color:red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>  <!-- 红色-->
  <div>
    <p>Hello World</p>
    <p>世界你好3</p> <!-- 红色-->
  </div>
</body>

说明：选择其父元素的第n个子元素为指定元素的元素。上面例子中，“世界你好2”是父元素body的第二个子元素，“世界你好3”是div元素的第二个子元素，所以他们均被选中。

p:nth-last-child(n)

p:nth-last-child(2){
  color:red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>  <!-- 红色-->
  <div>
    <p>Hello World</p>  <!-- 红色-->
    <p>世界你好3</p>
  </div>
</body>

说明：选择其父元素的倒数第n个子元素为指定元素的元素。

p::before

p::before {
  content: "前面：";
  color: red;
}

<p>世界你好</p>

说明：伪元素，在指定元素前面插入一个元素。

p::after

p::after {
  content: "后面";
  color: red;
}

<p>世界你好</p>

说明：伪元素，在指定元素后面插入一个元素。

p:lang(zh)

p:lang(zh) {
  color: red;
}

<p lang="zh-CN">汉字</p> <!-- 红色-->
<p lang="zh-Hans">汉字</p>  <!-- 红色-->
<p lang="en">English</p>

说明：选择lang属性以指定词汇开头的元素。这里可以拥有连字符。

p:first-of-type

p:first-of-type {
  color: red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>  <!-- 红色-->
  <div>
    <p>Hello World</p>  <!-- 红色-->
    <p>世界你好3</p>
  </div>
</body>

说明：选择父元素下第一个子元素为指定类型的元素。上面的例子中世界你好2是body元素的一个子元素，并且是第一个类型为p的元素；"Hello World"是div元素的第一个类型为p的元素。

p:last-of-type

p:last-of-type {
  color: red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>  <!-- 红色-->
  <div>
    <p>Hello World</p>  
    <p>世界你好3</p> <!-- 红色-->
  </div>
</body>

说明：选择父元素下最后一个子元素为指定类型的元素。

p:only-of-type

p:only-of-type {
  color: red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p>  <!-- 红色-->
  <div>
    <p>Hello World</p>  
    <p>世界你好3</p>
  </div>
</body>

说明：选择父元素下仅有一个子元素为指定类型的元素。上面的例子中，body元素的子元素中，“世界你好2”是仅有的一个p元素

p:nth-of-type(n)

p:nth-of-type(2) {
  color: red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p> 
  <div>
    <p>Hello World</p>  
    <p>世界你好3</p><!-- 红色-->
  </div>
</body>

说明：选择父元素下第n个子元素类型为指定元素的元素。上面的例子中“世界你好3”是div元素的第二个类型为p的子元素

p:nth-last-of-type(n)

p:nth-last-of-type(2) {
  color: red;
}
<body>
  <span>世界你好1</span>
  <p>世界你好2</p> 
  <div>
    <p>Hello World</p>  <!-- 红色-->
    <p>世界你好3</p>
  </div>
</body>

说明：选择父元素下倒数第n个子元素类型为指定元素的元素。上面的例子中“Hello World”是div元素的倒数第二个类型为p的子元素

:root

:root {
  background-color: #f3f3f3;
}

说明：:root选择文档的根元素，在HTML中根元素就是html元素。

p:empty

p:empty {
  background-color: red;
}
<p></p> <!-- 红色背景 -->
<p> </p>
<p>世界你好</p> 

说明：选择子元素为空的元素。空格属于文本节点，所以上面例子中第二个p元素没有被选中。

:target

:target {
  color: red;
}

<a href="#test1"> test1 </a>
<a href="#test2"> test2 </a>
<p id="test1">世界你好1</p>
<p id="test2">世界你好2</p>

说明：选择当前活动的目标元素。上面的例子中，点击test1时，“世界你好1”变成红色，点击test2时，“世界你好2”变成红色。

input:enabled

input:enabled {
  background-color: red;
}

<input type="text">  <!-- 红色背景 -->

说明：选择已启用的元素，大多数为表单上的元素。

input:disabled

input:disabled {
  background-color: red;
}

<input type="text" disabled>  <!-- 红色背景 -->

说明：选择已禁用的元素，大多数为表单上的元素。

input[type="checkbox"]:checked

input[type="checkbox"]:checked + span{
  color: red;
}

<label>
  <input type="checkbox" value="音乐" checked>
  <span>音乐</span>
</label>
<label>
  <input type="checkbox" value="足球">
  <span>足球</span>
</label>

说明：选择选中状态的单选框或复选框。可以根据这个选择器做美化版的单选框和复选框。

div:not(p)

div:not(p) {
  color: red;
}
<div>
  <span>Hello World</span> <!-- 红色 -->
  <p>世界你好</p>
</div>

说明：选择非指定元素的元素。选择div元素中非p元素的元素

::selection

::selection {
  color: red;
}
<p>世界你好</p>

说明：修饰被选中部分的文本。选中的文本会呈现红色，只能使用color、background、cursor 以及 outline这些css属性。