CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外! 看来这基础的东西,大家都说很重要,可真正能静下心来去看的并不多,更别说在项目中灵活使用了!

元素选择器

通配选择器

* { sRules }

选定文档所有的元素

/** 设置所有元素为红色 **/
* {
  color: red;  
}
<div>我是div</div>
<p>我是p</p>

类型选择器

E { sRules }

选定指定的文档元素 E

/** 设置元素p为红色 **/
p {
  color: red;  
}
<p>我是p</p>

类选择器

E.myclass { sRules }

选定 class 属性包含 myclass 的文档元素 E

/** 设置 calss="myclass" 的元素为红色 **/
.myClass {
  color: red
}
<div class="myclass">我是div</div>

多类选择器

E.myclass.myotherclass { sRules }

选定 class 属性包含 myclass 以及 myotherclass 的文档元素 E

/** 设置 calss="myclass myotherclass" 的元素为红色 **/
.myClass.myotherclass {
  color: red
}
<div class="myclass myotherclass">我是div</div>

ID选择器

E#myid { sRules }

选定 id 属性值为 myid 的文档元素 E

/** 设置 id="myid" 的元素为红色 **/
#myid {
  color: red;
}
<div id="myid">我是div</div>

属性选择器

根据简单属性选择

E[attr] { sRules }

选定具有属性 attr 的文档元素 E

/** 设置有属性 id 的元素为红色 **/
div[id] {
  color: red;
}
<div id="myid">我是div</div>

根据具体属性值选择

E[attr="val"] { sRules }

选定具有属性 attr 且属性值等于 val 的文档元素 E

/** 设置有属性 id 且值等于 "myid" 的元素为红色 **/
div[id="myid"] {
  color: red;
}

/** 多个属性-值 **/
input[type="text"][class="text1"] {
  width: 20px;
}
<div id="myid">我是div</div>
<input type="text" class="text1" />

根据部分属性值选择

E[attr~="val"] { sRules }

选定具有属性 attr 且属性值为用空格分隔的字词列表,其中有一个等于 val (包含只有一个值且该值等于 val 的情况)的文档元素 E

/** 设置 class 属性有一个值为 div1 的元素为红色 **/
div[class~="div1"] {
  color: red;
}
<div calss="div1">我是div</div>
<div class="div1 header">我是div</div>

E[attr^="val"] { sRules }

选定具有属性 attr 且属性值以 val 开头的字符串的文档元素 E

/** 设置 class 属性的值以 head 开头的元素为红色 **/
div[class^="head"] {
  color: red;
}
<div calss="headClass">我是div</div>

E[attr$="val"] { sRules }

选定具有属性 attr 且属性值以 val 结尾的字符串的文档元素 E

/** 设置 class 属性的值以 Class 结尾的元素为红色 **/
div[class$="Class"] {
  color: red;
}
<div calss="headClass">我是div</div>

E[attr*="val"] { sRules }

选定具有属性 attr 且属性值包含 val 的字符串的文档元素 E

/** 设置 class 属性的值包含 Div 的元素为红色 **/
div[class*="Div"] {
  color: red;
}
<div calss="headDivClass">我是div</div>

E[attr|="val"] { sRules }

选定具有属性 attr 且属性值以 val 开头并用连接符 "-" 分隔的字符串(包含属性值只有 val 的情况)的文档元素 E

/** 设置 class 属性的值以 head 开头并用连接符 "-" 分隔的元素为红色 **/
div[class|="head"] {
  color: red;
}
<div calss="head-class">我是div</div>

关系选择器

后代选择器

E F { sRules }

选定文档元素 E 所有的后代元素 F,包含所有子孙

/* 设置 div 后代所有的 p 为红色 */
div p {
  color: red;
}
<div>
  <p>我是段落1</p>
  <div>
    <p>我是段落2</p>
  </div>
</div>

子代选择器

E>F { sRules }

选定文档元素 E 所有的子代元素 F,不包含孙代元素

/* 设置 div 子代的 p 为红色,但孙代的 p 不为红色 */
div>p {
  color: red;
}
<div>
  <p>我是段落1</p>
  <div>
    <p>我是段落2</p>
  </div>
</div>

相邻选择器

E+F { sRules }

选定文档元素 E 之后且同属一个父元素的相邻兄弟元素 F

/* 设置 h1 相邻的 p 为红色,但第二个 p 不为红色 */
h1>p {
  color: red;
}
<div>
  <h1>我是h1</h1>
  <p>我是段落1</p>
  <p>我是段落2</p>
</div>

兄弟选择器

E~F { sRules } CSS3

选定文档元素 E 之后且同属一个父元素的兄弟元素 F

/* 设置 h1 之后所有的 p 为红色 */
h1>p {
  color: red;
}
<div>
  <h1>我是h1</h1>
  <p>我是段落1</p>
  <p>我是段落2</p>
</div>

伪类选择器

:link

a:link { sRules }

设置超链接 a 未被访问前的样式

a:link {
  color: blue;
}
<a href="http://i.cnblogs.com"></a>

:visited

a:visited { sRules }

设置超链接 a 已经被访问后的样式

a:link {
  color: red;
}
<a href="http://i.cnblogs.com"></a>

:focus

E:focus { sRules }

设置元素 E 在成为输入焦点(该元素的 onfocus 事件发生)时的样式

a:focus {
  color: black;
}
<a href="http://i.cnblogs.com"></a>

:hover

E:hover { sRules }

设置元素E在鼠标悬停时的样式

a:hover {
  color: red;
}
<a href="http://i.cnblogs.com"></a>

:active

E:active { sRules }

设置元素E在被用户激活(在鼠标点击与释放之间发生的事件)时的样式

a:active{
  color: green;
}
<a href="http://i.cnblogs.com"></a>

以上五种伪类选择器同时用在a超链接时,各伪类需按特定的顺序书写才能生效,保证各浏览器具有相同的表现。正确的顺序为:link - visited - focus - hover - active

:lang(lang)

E:lang(lang) { sRules }

选定使用特殊语言的元素E

p:lang(zh-cn) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}
<p lang="zh-cn">我是中文</p>
<p lang="en">i am English</p>

:not(s) CSS3

E:not(s) { sRules }

匹配不含有s选择符的元素E

/** 除最后一个li之外,所有li加一条底边线 **/
li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

:root CSS3

:root { sRules }

匹配当前文档的根元素。在HTML中,根元素永远是HTML

/** :root 相当于 html **/
:root {
    color: red;
}

:first-child

E:first-child { sRules }

匹配父元素的第一个子元素 E。要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body,即 E 可以是 body 的子元素

最重要的是: E 必须是它的兄弟元素中的第一个元素,换言之,E 必须是父元素的第一个子元素。与之类似的伪类还有 E:last-child,只不过情况正好相反,需要它是最后一个子元素。

/** 给第一个 li 加一条底边线 **/
li:first-child {
    border-bottom: 1px solid #ddd;
}

/** 本意是想设置第一个 p 元素为红色,但这里无效,因为 p 不是 div 的第一个子元素(第一个子元素是 h2 ) **/
p:first-child {
    color: red;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div>
    <h2>我是一个标题</h2>
    <p>我是一个p</p>
</div>

:last-child CSS3

E:last-child { sRules }

匹配父元素的最后一个子元素E。要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body,即 E 可以是 body 的子元素

最重要的是: E 必须是它的兄弟元素中的最后一个元素,换言之,E 必须是父元素的最后一个子元素。与之类似的伪类还有 E:first-child,只不过情况正好相反,需要它是第一个子元素。

/** 给最后一个 li 加一条底边线 **/
li:last-child {
    border-bottom: 1px solid #ddd;
}

/** 本意是想设置最后一个 h2 元素为红色,但这里无效,因为 h2 不是 div 的最后一个子元素(最后一个子元素是 p ) **/
p:first-child {
    color: red;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div>
    <h2>我是一个标题</h2>
    <p>我是一个p</p>
</div>

:only-child CSS3

E:only-child { sRules }

匹配父元素仅有的一个子元素 E。要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body,即 E 可以是 body 的子元素

/** 该规则当元素中只有一个 li 有效,即可设置 li 为红色,如果有多个 li 则无效。**/
li:only-child {
    color: red;
}
<ul>
    <li>li:only-child对我有效,我会变红色</li>
</ul>
<ul>
    <li>li:only-child对我无效,我不会变红色</li>
    <li>li:only-child对我无效,我不会变红色</li>
    <li>li:only-child对我无效,我不会变红色</li>
</ul>

:nth-child(n) CSS3

E:nth-child(n) { sRules }

要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body,即 E 可以是 body 的子元素

匹配父元素的第 n 个子元素 E,假设该子元素不是 E,则选择符无效,但 n 会累加

<style>
    /* 第二个 p 会被设置成红色,因为它是父元素的第二个元素 */
    p:nth-child(2) {
        color: red;
    }
    /* 第三个 p 不会设置成红色,因为父元素的第三个元素不是 p,而是 span */
    p:nth-child(3) {
        color: red;
    }
    /* 第三个 p 会被设置成红色,因为它是父元素的第四个元素 */
    p:nth-child(4) {
        color: red;
    }
</style>

<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
    <p>第4个p</p>
    <p>第5个p</p>
</div>

该选择符允许使用一个 乘法因子(n) 来作为换算方式,比如我们想选中所有的偶数子元素 E,那么选择符可以写成:E:nth-child(2n),也可以使用一些关键字,比如:odd, even。E:nth-child(even) 选择偶数子元素,E:nth-child(old) 选择奇数子元素

<style>
    /* 偶数 或者 E:nth-child(even) */
    li:nth-child(2n) {
        color: red;
    }
    /* 奇数 或者 ,E:nth-child(old) */
    li:nth-child(2n+1) {
        color: blue;
    }
</style>

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

:nth-last-child(n) CSS3

E:nth-last-child(n) { sRules }

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1)

匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效

<style>
    /* 设置倒数第一个 p 为红色,因为该 p 元素是父元素的倒数第二元素 */
    p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
</div>

:first-of-type CSS3

E:first-of-type { sRules }

匹配同类型中的第一个同级兄弟元素E

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

<style>
    /* 设置第一个元素类型为 p 的元素为红色,尽管该 p 元素不是父元素的第一个元素 */
    p:first-of-type {
        color: red;
    }
</style>

<div>
    <div>我是一个div元素</div>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
</div>

:last-of-type CSS3

E:last-of-type { sRules }

匹配同类型中的最后一个同级兄弟元素E

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的倒数第1个为E的子元素,不论倒是第1个子元素是否为E

<style>
    /* 设置倒数一个元素类型为 p 的元素为红色,尽管该 p 元素不是父元素的倒数第一个元素 */
    p:first-of-type {
        color: red;
    }
</style>

<div>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
    <div>我是一个div元素</div>
</div>

:only-of-type CSS3

E:only-of-type { sRules }

匹配同类型中的唯一的一个同级兄弟元素E

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的唯一同类型子元素E,不论该元素的位置

<style>
    /* 设置父元素中唯一的 p 元素为红色,有多个 p 元素无效 */
    p:only-of-type {
        color: red;
    }
</style>

<div>
    <p>p:only-of-type对我有效,我会变红色</p>
</div>
<div>
    <p>p:only-of-type对我无效,我不会变红色</p>
    <p>p:only-of-type对我无效,我不会变红色</p>
</div>

:nth-of-type(n) CSS3

E:nth-of-type(n) { sRules }

匹配同类型中的第n个同级兄弟元素E

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E

<style>
    /* 设置父元素第二个 p 元素为红色,虽然该 p 元素为父元素的第三个元素 */
    p:nth-of-type(2) {
        color: red;
    }
</style>

<div class="test">
    <p>我是一个p元素</p>
    <div>我是一个div元素</div>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
</div>

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

E:nth-last-of-type(n) { sRules }

匹配同类型中的倒数第n个同级兄弟元素E

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E

<style>
    p:nth-last-of-type(1) {
        color: red;
    }
</style>

<div class="test">
    <p>我是一个p元素</p>
    <div>我是一个div元素</div>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
</div>

:empty CSS3

E:empty { sRules }

匹配没有任何子元素(包括text节点)的元素E

<style>
    p:empty {
        height: 25px;
        border: 1px solid #ddd;
        background: #eee;
    }
</style>

<div>
    <p>结构性伪类选择符 E:empty</p>
    <p><!--我是一个空节点p,请注意我与其它非空节点p的外观有什么不一样--></p>
    <p>结构性伪类选择符 E:empty</p>
</div>

:checked CSS3

E:checked { sRules }

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<style>
    input:checked + span {
        background: red;
    }
</style>

<input type="radio" />
<span>红色</span>

:enabled CSS3

E:enabled { sRules }

匹配用户界面上处于可用状态的元素E

<style>
    input[type="text"]:enabled {
        border: 1px solid #090;
        background: #fff;
        color: #000;
    }
    input[type="text"]:disabled {
        border: 1px solid #ccc;
        background: #eee;
        color: #ccc;
    }
</style>

<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />

:disabled CSS3

E:disabled { sRules }

匹配用户界面上处于禁用状态的元素E

<style>
    input[type="text"]:enabled {
        border: 1px solid #090;
        background: #fff;
        color: #000;
    }
    input[type="text"]:disabled {
        border: 1px solid #ccc;
        background: #eee;
        color: #ccc;
    }
</style>

<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />

:target CSS3

E:target { sRules }

匹配相关URL指向的E元素

解释: URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素

<!-- 假设上述代码在页面 a.html 中,那么当访问 a.html#demo 时,这个div元素将会被:target命中 -->
<style>
    #demo:target {
        color: red;
    }
</style>

<div id="demo">
    <p>E:target伪类使用方法</p>
</div>

@page相关选择器

@page :first { sRules }

设置在打印时页面容器第一页使用的样式。仅用于@page规则

该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性

@page :left { sRules }

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则

该伪类选择符只允许定义margin, padding, border 和 background属性

@page :right { sRules }

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

该伪类选择符只允许定义margin, padding, border 和 background属性

伪对象选择器

::first-letter CSS3

E::first-letter { sRules }

设置对象内的第一个字符的样式

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象

该伪对象常被用来配合font-size属性和float属性制作首字下沉效果

<style>
    p::first-letter {
        float:left;
        font-size:40px;
        font-weight:bold;
        line-height:1;
    }
</style>

<h1>杂志常用的首字下沉效果</h1>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

::first-line CSS3

E::first-line { sRules }

设置对象内的第一行的样式

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象

<style>
    p::first-line {
        color:#090;
    }
</style>

<h1>第一行文字的颜色与其它不同</h1>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

::before CSS3

E::before { sRules }

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

<style>
    p::before {
        position: absolute;
        left: 0;
        background: #fff;
        color: #000;
        content: "在 p 元素中 span 元素之前可看到这段文字";
        font-size:14px;
    }
</style>

<p>
    <span>我是一个span</span>
</p>

::after CSS3

E::after { sRules }

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

<style>
    p::after {
        position: absolute;
        left: 0;
        background: #fff;
        color: #000;
        content: "在 p 元素中 span 元素之后可看到这段文字";
        font-size:14px;
    }
</style>

<p>
    <span>我是一个span</span>
</p>

::placeholder CSS3

E::placeholder { sRules }

设置对象文字占位符的样式。

::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。

当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。

需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder

<style>
    input::-webkit-input-placeholder {
        color: green;
    }
    input:-ms-input-placeholder { // IE10+
        color: green;
    }
    input:-moz-placeholder { // Firefox4-18
        color: green;
    }
    input::-moz-placeholder { // Firefox19+
        color: green;
    }
</style>

<input id="test" placeholder="Placeholder text!">

::selection CSS3

E::selection { sRules }

设置对象被选择时的样式。

需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow

<style>
    p::selection{
        background:#000;
        color:#f00;
    }
</style>

<p>当我被选中是,我会变成黑色背景红色文字</p>

参考资料

http://www.css88.com/book/css/selectors/index.htm

原文发布于微信公众号 - 前端布道(FontendPreach)

原文发表时间:2018-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

3177
来自专栏云端架构

【云端架构】前端必备“层叠样式表”精选

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

43813
来自专栏九彩拼盘的叨叨叨

jQuery 选取元素概要

注意: 对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

792
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

3622
来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

2075
来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

2089
来自专栏前端技术总结

CSS基础:block,inline和inline-block

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

3K105
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

2916
来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

883
来自专栏天天

面向对象编程(随机点名)

1532

扫码关注云+社区

领取腾讯云代金券