css3选择器全集(上)

目录
文章目录隐藏
  1. CSS3 选择器
  2. CSS3 结构性伪类选择器 root
  3. CSS3 结构性伪类选择器 not
  4. CSS3 结构性伪类选择器 empty
  5. CSS3 结构性伪类选择器 target
  6. CSS3 结构性伪类选择器 first-child
  7. CSS3 结构性伪类选择器 last-child
  8. CSS3 结构性伪类选择器 nth-child(n)
  9. CSS3 结构性伪类选择器 nth-last-child(n)
  10. first-of-type 选择器
  11. nth-of-type(n)选择器
  12. last-of-type 选择器
  13. nth-last-of-type(n)选择器
  14. only-child 选择器
  15. only-of-type 选择器

CSS3 选择器

在 HTML 中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过 id 属性可以将不同 div 元素进行区分。

在 CSS2 中引入了一些属性选择器,而 CSS3 在 CSS2 的基础上对属性选择器进行了扩展,新增了 3 个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与 CSS2 的属性选择器共同构成了 CSS 功能强大的属性选择器。如下表所示:

CSS3 选择器 属性选择器

举个例子:

html 代码:

<a href="xxx.pdf">我链接的是 PDF 文件</a>
<a href="#" class="icon">我类名是 icon</a>
<a href="#" title="我的 title 是 more">我的 title 是 more</a>

css 代码:

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

效果展示:

CSS3 选择器例子

CSS3 结构性伪类选择器 root

:root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素 E 所在文档的根元素。在 HTML 文档中,根元素始终是<html>

我们通过“:root”选择器设置背景颜色

HTML 代码:

<div>:root 选择器的演示</div>

CSS 代码:

:root {
  background:orange;
}

效果展示:

Root 选择器

“:root”选择器等同于<html>元素,简单点说:

:root{background:orange}

html {background:orange;}

这两种方式书写都对,得到的效果等同。

但是这里建议使用:root 方法。

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

CSS3 结构性伪类选择器 not

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

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

相关 HTML 代码:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

效果展示:

CSS3 结构性伪类选择器 not

CSS3 结构性伪类选择器 empty

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

比如说,你的文档中有三个段落 p 元素,你想把没有任何内容的 P 元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML 代码:

<p>我是一个段落</p>
<p> </p>
<p></p>​

CSS 代码:

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

效果如图:

CSS3 结构性伪类选择器 empty

CSS3 结构性伪类选择器 target

:target 选择器称为目标选择器,用来匹配文档(页面)的 url 的某个标志符的目标元素。我们先来上个例子,然后再做分析。

我们以例子来演示,点击链接显示隐藏的段落。

HTML 代码:

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS 代码:

.menuSection{
  display: none;
}
:target{/*这里的:target 就是指 id="brand"的 div 对象*/
  display:block;
}

效果:

CSS3 结构性伪类选择器 target

分析:

1、具体来说,触发元素的 URL 中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

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

多个 url(多个 target)处理:

就像上面的例子,#brand 与后面的 id=”brand”是对应的,当同一个页面上有很多的 url 的时候你可以取不同的名字,只要#号后对的名称与 id=””中的名称对应就可以了。

如下面例子:

html 代码:

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css 代码:

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

上面的代码可以对不同的 target 对象分别设置不的样式。

CSS3 结构性伪类选择器 first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素 E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

通过示例演示

通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色。

HTML 代码:

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS 代码:

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

演示结果:

CSS3 结构性伪类选择器 first-child

CSS3 结构性伪类选择器 last-child

“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,

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

示例演示

在博客的排版中,每个段落都有 15px 的 margin-bottom,假设不想让博客“post”中最后一个段落不需要底部的 margin 值,可以使用“:last-child”选择器。

HTML 代码:

<div class="post">
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
  <p>第四段落</p>
  <p>第五段落</p>
</div>​

CSS 代码:

.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}

结果:

CSS3 结构性伪类选择器 last-child

CSS3 结构性伪类选择器 nth-child(n)

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

经验与技巧:当“:nth-child(n)”选择器中的 n 为一个表达式时,其中 n 是从 0 开始计算,当表达式的值为 0 或小于 0 的时候,不选择任何匹配的元素。如下表所示:

CSS3 结构性伪类选择器 nth-child(n)

案例演示:

通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

HTML 代码:

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>

CSS 代码:

ol > li:nth-child(2n){
  background: orange;
}

演示结果:

CSS3 结构性伪类选择器 nth-child(n)

CSS3 结构性伪类选择器 nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。

选择列表中倒数第五个列表项,将其背景设置为橙色。

HTML 代码:

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
  <li>item13</li>
  <li>item14</li>
  <li>item15</li>
</ol>​

CSS 代码:

ol > li:nth-last-child(5){
  background: orange;
}

结果:

CSS3 结构性伪类选择器 nth-last-child(n)

first-of-type 选择器

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

示例演示:

通过“:first-of-type”选择器,定位 div 容器中的第一个 p 元素(p 不一定是容器中的第一个子元素),并设置其背景色为橙色。

HTML 代码:

<div class="wrapper">
  <div>我是一个块元素,我是.wrapper 的第一个子元素</div>
  <p>我是一个段落元素,我是不是.wrapper 的第一个子元素,但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

css 代码:

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

演示结果:

first-of-type 选择器

nth-of-type(n)选择器

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

示例演示

通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

HTML 代码:

<div class="wrapper">
  <div>我是一个 Div 元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
</div>

CSS 代码:

.wrapper > p:nth-of-type(2n){
  background: orange;
}

效果:

nth-of-type(n)选择器

last-of-type 选择器

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

示例演示

通过“:last-of-type”选择器,将容器“div.wrapper”中最后一个段落元素背景设置为橙色

(提示:这个段落不是“div.wrapper”容器的最后一个子元素)。

HTML 代码:

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <div>我是第一个 Div 元素</div>
  <div>我是第二个 Div 元素</div>
  <div>我是第三个 Div 元素</div>
</div>

CSS 代码:

.wrapper > p:last-of-type{
  background: orange;
}

效果展示:

last-of-type 选择器

nth-last-of-type(n)选择器

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

示例演示

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

HTML 代码:

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <p>我是第五个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是第六个段落</p>
  <p>我是第七个段落</p>
</div>

CSS 代码:

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

效果:

nth-last-of-type(n)选择器

only-child 选择器

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

示例演示

通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。

HTML 代码:

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>
.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

结果:

CSS3 only-child 选择器

only-of-type 选择器

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

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个 div 元素的背景色为橙色。

HTML 代码:

<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
</div>
<div class="wrapper">
  <div>我是一个 Div</div>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p>
</div>

css 代码:

.wrapper > div:only-of-type {
  background: orange;
}

结果显示:

CSS3 only-of-type 选择器

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css3选择器全集(上)

发表回复