美文网首页代码改变世界程序员让前端飞
两天征服CSS3选择器（上）

两天征服CSS3选择器（上）

作者: 樱桃小丸子儿 | 来源:发表于2017-04-11 15:34 被阅读0次
  • 属性选择器

属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
CSS3的属性选择器主要包括以下3种：

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr="value"]*：指定了属性名，并且有属性值，而且属值中包含了value；
举例
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;
}

结果如下

53202e050001c07e03820068.jpg
  • 伪类选择器

1、root伪类选择器
从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>，因此root选择器等同于<html>元素
简单说：

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

得到的效果等同。
示例

<html>
<head>
<style type="text/css">
:root {
  background:pink;
}
</style>
</head>
<body>
<div>背景颜色是粉色</div>
</body>
</html>

结果如下

5217911-669e7e921b60be29.png
2、结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
例如 
<html>
<head>
<style type="text/css">
div:not([id="footer"]){
  background: green;
}
</style>
</head>
<body>
    <div id="header">页头</div>
    <div id="page">页体</div>
    <div id="footer">页脚</div>
</body>
</html>

结果如下

图片.png

3、结构选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
例如

<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—empty</title>
<style type="text/css">
div {
  min-height: 10px;
}

div:empty {
  border: 1px solid green;
}
</style>
</head> 
<body>
    <div>我不是空的呢</div>
    <div> <!-- 我这里有一个空格 --></div>
    <div></div><!-- 我这里任何内容都没有 -->
</body>
</html>

运行结果

图片.png
4、结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
分析：
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，下面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
多个url（多个target）处理：
就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。 
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<style type="text/css">
:target p {
  background: red;
  color: #fff;
}
</style>
</head> 
<body>
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
    </div>
</body>
</html>

运行结果

刚开始的运行效果.png 点击brand之后的效果.png

多个url（多个target）处理：
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对象分别设置不同的样式。请自己试一试
5、结构性伪类选择器—first-child
":first-child"选择器表示的是选择父元素的第一个子元素的元素E。是子元素，而不是后代元素。
例如

<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—first-child</title>
<style type="text/css">
ul > li:first-child {
 color: red;
}
</style>
</head> 
<body>
<ul>
  <li><a href="##">1</a></li>
  <li><a href="##">2</a></li>
  <li><a href="##">3</a></li>
</ul>
</body>
</html>

运行结果如下

图片.png
6、结构性伪类选择器—last-child
:last-child选择器与“:first-child”选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个li的背景色，就可以使用这个选择器 
<html>
<head> 
<meta charset="utf-8">
<title>结构伪类选择器——last-child</title>
<style type="text/css">
ul > li:last-child {
 color: red;
}
</style>
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>
</body>
</html>

运行结果

QQ截图20170410230616.png
7、 结构性伪类选择器—nth-child(n)
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数的起始值始终是1。
例如,将偶数行设置为绿色 
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—nth-child(n)</title>
<style type="text/css">
ol > li:nth-child(2n){
  background: green;
}
</style>
</head> 
<body>
<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>
</ol>
</body>
</html>

运行结果是

Paste_Image.png
8、CSS3 结构性伪类选择器—nth-last-child(n)
:nth-last-child(n)选择器和前面的:nth-child(n)选择器非常的相似，只是这里多了一个“last”，所起的作用和:nth-child(n)选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
例如,将倒数第五项的颜色设置为橙色 
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—nth-last-child(n)</title>
<style type="text/css">
ol > li:nth-last-child(5){
  background: orange;
}
</style>
</head> 
<body>
<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>
</body>
</html>

运行结果

Paste_Image.png
  • CSS3 first-of-type选择器

:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
例如将容器“div.wrapper”中的第一个div元素背景设置为橙色。

<html>
<head> 
<meta charset="utf-8">
<title>:first-of-type</title>
<style type="text/css">
.wrapper > div:first-of-type {
  background: orange;
}
</style>
</head> 
<body>
<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <p>我是第三个段落</p>
</div>
</body>
</html>

运行结果

Paste_Image.png
  • CSS3 nth-of-type(n)选择器

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在:nth-of-type(n)选择器中的“n”和:nth-child(n)选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
例如将容器“div.wrapper”中的偶数段落和奇数Div背景设置为橙色。

<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
  background: orange;
}
</style>
</head> 
<body>
<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>
</body>
</html>

运行结果

Paste_Image.png
  • last-of-type选择器

:last-of-type选择器和:first-of-type选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
例如将容器div.wrapper中最后一个Div元素背景设置为橙色。

<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.wrapper > div:last-of-type{
  background: orange;
}
</style>
</head> 
<body>
<div class="wrapper">
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <div>我是第三个Div元素</div>
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
</div>
</body>
</html>

运行结果

Paste_Image.png
  • nth-last-of-type(n)选择器

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

例如将容器“div.wrapper”中倒数第五个Div元素背景设置为橙色。

<html>
<head> 
<meta charset="utf-8">
<title>nth-last-of-type(n)</title>
<style type="text/css" >
.wrapper > div:nth-last-of-type(5){
  background: orange;
}
</style>
</head> 
<body>
<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <div>我是第三个Div元素</div>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <p>我是第五个段落</p>
  <div>我是第四个Div元素</div>
  <div>我是第五个Div元素</div>
  <p>我是第六个段落</p>
</div>
</body>
</html>

运行结果

Paste_Image.png
  • only-child选择器

:only-child选择器选择的是只有一个子元素的父元素。
例如

<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
li {
  background: green;
  padding: 10px;
  margin-bottom: 5px;
}
li:only-child {
  background: orange;
}
</style>
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>
<ul>
  <li>Item1</li>
</ul>
<ol>
  <li>Item1</li>
</ol>
</body>
</html>

运行结果

Paste_Image.png
  • only-of-type选择器

:only-of-type是表示一个元素他有很多个子元素，而其中有一种类型的子元素是唯一的，这时候就可以使用:only-of-type选择器就可以选中这个唯一类型的子元素。
例如将仅有一个P元素的背景修改为橙色。


<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>

<style type="text/css">
.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
  width: 500px;
  margin: 10px auto;
}

.wrapper p:only-of-type{
  background: orange;
}
</style>

</head> 
<body>
<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>

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

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

运行结果

Paste_Image.png

想一想

序号 CSS选择器 作用
1 属性选择器
2 结构性伪类选择器root
3 结构性伪类选择器not
4 结构性伪类选择器empty
5 结构性伪类选择器target
6 结构性伪类选择器first-child
7 结构性伪类选择器last-child
8 结构性伪类选择器nth-child
9 结构性伪类选择器nth-last-child
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选择器

自己试一试
1、通过写程序将列表的奇数项背景色变为红色
2、通过写程序将列表的倒数第一项背景色变为红色
3、通过写程序当你点击链接后，段落p将添加橙色背景。
参考：慕课网

相关文章

  • 两天征服CSS3选择器（上）

    属性选择器 属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式，而CSS3在...

  • CSS3简明教程之征服CSS3选择器

    第6章 征服CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过i...

  • 两天征服CSS3选择器（下）

    :enabled与 :disabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用...

  • CSS3知识概要总结之选择器篇(二)

    是的，从这里开始我们就开始学习CSS3的选择器了，学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 颜色：新增RGBA，HSL...

  • 第2章 CSS3选择器-1

    第2章 CSS3选择器 W3C在CSS3的工作草案中把选择器独立出来成为一个模块。实际上，选择器是CSS只是中的重...

  • 初级了解css3伪类选择器

    在 CSS3 中，选择器是一种模式，用于选择需要添加样式的元素。 先来了解一下css3选择器的分类 css3选择器...

  • CSS3笔记（一）选择器

    回顾css3之前的选择器 css3选择器 1、属性选择器 2、结构 伪类选择器 注意点 ： 选择是分类型，排序是不...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些？ 答：属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • css选择器

    css1，2选择器 css3选择器

网友评论

    本文标题：两天征服CSS3选择器（上）

    本文链接：https://www.haomeiwen.com/subject/ztbsattx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    代码改变世界

    程序员

    让前端飞

    关于我们|服务条款|联系我们|两天征服CSS3选择器（上）|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！