选用器汇总,伪类选用器
分类:前端技术

CSS 参考文档

2015/08/03 · CSS · CSS

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:tympanus.net。欢迎加入翻译组。

我们已经在 Codrops 上发布了新章节:CSS 参考文档。我们现在就来谈谈它,看看究竟加了什么新特征让学习 CSS 变得更简单实际。

图片 1

Codrops 是最励志的网站之一。是的,我是有些偏袒的,但我肯定你也同意这一事实。

如果你正在寻求灵感,那你在这里就可以找到许多创意资源,它们能让你的脑袋里也会浮现一两个想法。我喜欢这个网站的理由之一是:Manoela 和 Pedro 提供的资源一定会给我们留下深刻印象。

如果你在寻找如何学习使用 CSS 属性的方法,你可以在这里找到很多源代码来学习。但如果你想学习更多关于属性的基础知识:属性定义,不同的取值,以及每个值的意义和作用,或是其它。而你能在这里找到一切你正在寻找的资源,这岂不是十分完美?

一年前,我们认为,如果 Codrops 有一些章节供读者来学习 CSS 属性,这会是一件激动人心的事。因此,将 Codrops 打造成为一个为用户提供灵感源泉和学习CSS 的优秀平台。这是 Manoela 向我提出的想法,而就在几天后,我开始着手实施了。

所以,在过去的一年里(不到一年),我们给 Codrops 新增了一个板块:CSS 参考文档。我们非常激动能够在最后与大家分享这一成果。

万事开头难,这篇参考文档仍在不断发展,我们都很努力地改进它,使其更加完善。倘若你有任何改善的建议,或发现错误,都可提交到这里 GitHub repo。

摘要: 推荐书小编编辑推荐:《图解CSS3》:核心技术与案例实战 资深Web前端专家历时两载的经验与心血之作,旨在根据最新CSS3规范撰写最权威的CSS3学习资料和备查手册理论知识系统且全面,以图解的方式讲解CSS3的各项功能 ...

一、基本选择器

CSS 选择器

  • CSS 元素选择器
  • CSS 选择器分组
  • CSS 类选择器详解
  • CSS ID 选择器详解
  • CSS 属性选择器详解
  • CSS 后代选择器
  • CSS 子元素选择器
  • CSS 相邻兄弟选择器
  • CSS 伪类
  • CSS 伪元素

一,CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

参考文档

Codrops 的 CSS 参考文档包含了一个条目列表入口:CSS 属性CSS 功能CSS 数据类型CSS @规则CSS 伪类/伪选择器/伪元素。每个条目都定义和描述了CSS 的属性、功能、数据类型、@规则或伪类/伪选择器/伪元素。

图片 2

除了以上 5 类条目,还有一类就是 CSS 概念。CSS 概念中的每个条目都包含具体 CSS 概念或完整的特性指导

CSS 概念条目充当了一组相关属性的全局条目。比如,Flexbox 和 Counters 是两个概念,所以它们都有自己的条目。每个条目都解释其概念含义和用途,还包含了其属性的定义与范例。

那么,一个 CSS 条目到底是怎样的呢?

图片 3

推荐书小编编辑推荐:《图解CSS3》:核心技术与案例实战

资深Web前端专家历时两载的经验与心血之作,旨在根据最新CSS3规范撰写最权威的CSS3学习资料和备查手册理论知识系统且全面,以图解的方式讲解CSS3的各项功能和特性,包含大量实战案例,直观易懂,实战性强

回顾选择器

通配符选择器、元素选择器、类选择器、ID选择器、后代选择器

二,CSS 选择器分组

CSS 条目结构

图片 4

每个条目拥有一个头部和智能搜索模块,而头部描述了该条目所属类别。下面某章节就介绍这个智能搜索特性。

每个 CSS 条目主要由这个几部分组成:描述官方语法属性值范例线上演示浏览器支持深入理解相关条目。每部分可能由多个小部分组成。

描述章节你可以学到 CSS 属性、功能、选择器等用法。该部分基本上是概念的定义和进一步说明。

在定义部分后就是一些综述,包括官方语法、初始值、该 CSS 特性能应用到哪些元素上以及属性值是否支持过渡(备注:CSS 3 的 transition-property)。有些类目不需要本节,所以,它是否存在取决于你正在阅读哪个类目。

属性值章节里会定义与描述每个取值。此外,如果一个 CSS 特性没有一组值(如:@ 规则),那么该章节就会被省略掉。

你会在范例章节里看到使用 CSS 特性的案例 – 包含主要的代码片段和运行结果的截图(如果有截图)。

线上演示章节里包含一个或多个线上演示的案例,这些案例中,有部分是来自范例章节的,有时会使用额外的案例。由于运行结果依赖于浏览器的支持,所以线上演示的案例可能会有用来展示运行结果的截图(如果浏览器不支持该 CSS 特性)。

需要注意的是,很多条目都包含一些线上演示,其中一些是嵌入在描述章节内。

请务必检查浏览器的支持程度,以确定您所使用的浏览器是否支持你正在阅读的特性。

由于有很多关于 CSS 特性和专题的优秀阅读资源,深入理解章节就包含了值得一读的优秀资源链接,其中有个规范文档链接,它包括了 CSS 将要引入的特性。

内容简介

《图解css3:核心技术与案例实战》是国内著名的web前端专家历时两载的心血之作,根据最新的css3撰写,融入了作者在css领域近10年的使用经验,旨在将本书打造成为css3领域最权威和实用的专业著作,供没有经验的读者系统学习,供有经验的读者参考备查。 《图解css3:核心技术与案例实战》理论知识系统全面,详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应web设计、web字体等主题下涵盖的所有css3新特性,所有这些都巧妙地融入到案例中,而不是纯粹枯燥的理论讲解;讲解方式直观易懂,以图解的方式巧妙地展示了这些新特性;实战性强,既为每个知识点精心设计了小案例,也有综合性的大案例,所有案例都非常详尽,有功能需求分析、设计思路和完整代码,还有最终的效果展示。

新增基本选择器

子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器

结合选择器和声明的分组

我们可以在一个规则中结合选择器分组和声明分组,就可以使用很少的语句定义相对复杂的样式。

下面的规则为所有标题指定了一种复杂的样式:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Codrops Playground

在我写条目期间,Manoela 和 Pedro 制作了 CSS 参考文档里最好的功能之一:playground

在该条目里看到的所有案例,都能被你编辑和体验,并且我们强烈建议你这样做,这样能让你更好地理解某个特性的运作和它不同取值的结果。需要注意的是,playground 仍处于Alpha 阶段,有很多特性还没有实现。尽管发送任何 BUG 报告、建议和评论到 playground ‘at’ codrops.com。

图片 5

作译者

廖伟华,资深Web前端工程师,W3cplus创始人,目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap:前端框架利器”。

1.基本选择器——子元素选择器

【概念】:子元素选择器只能选择某元素的子元素(直接后代选择器)

语法格式:父元素>子元素(father>children)

【兼容性】:IE8 、FireFox、chrome、Safari、opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
section > div {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
</section>
</body>
</html>

图片 6

效果

三,CSS 类选择器和ID选择器,请参考博客CSS类选择器和ID选择器。

四,CSS后代选择器,子选择器和相邻兄弟选择器,请参考博客CSS后代选择器,子选择器和相邻兄弟选择器。

五,CSS伪类和伪元素及二者区别,请参考博客CSS 属性 - 伪类和伪元素的区别

六,CSS属性,根据元素的属性及属性值来选择元素。

智能搜索

每个条目里都有一个智能搜索模块。当然,你也可以在Codrops 首页找到它,紧靠左侧专题文章 。

图片 7

正如“智能搜索”这名字,它会匹配你要搜索字符串,然后从所有 CSS 条目中返回一列结果。所以,如果你搜索明确的字符串(或一个字母),智能搜索模块会从所有条目中,将含有该字符串的标题形成一个下拉框。当你搜索一个具体属性时这很有用,它可以获取一些相关的相关属性(例如:border、border-top、border-bottom、bottom-right等)。

前言

为什么要写这本书 CSS3是在CSS2.1基础上扩展而来,事实上,它还没有完全成熟。有些专家会告诉你,CSS3现在还用不上,甚至几年之后都不会有成熟的规范发布。 目前为止CSS3还没有一套成熟的规范,其中的模块也在不断更新,特别是浏览器对CSS3特性的支持也在不断变化,同时没有足够的时间去学习和研究W3C官方文档和规范,致使我们学习CSS3变得更为复杂。 为什么会选择这个时候编写这样一本图书呢?原因很简单。对于希望Web应用开发者而言,CSS3可以说是众望所归,这也是技术变更的硬性需求。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地变更着,众多浏览器厂商也在不断加快对CSS3新特性的支持。在编写这本图书的过程中,我也被迫不断更新书中的浏览器支持表格。 面对自己正在使用的浏览器,大多数用户并不真正了解其具备的功能有多强大。当然,他们在浏览器自动更新后可能会发现一些细微的界面变化。但他们可能不知道,新版的浏览器对哪些CSS3特性有所支持。 本书的目标是帮助开发者更好地掌握CSS3的特性,并且将新技术运用到实际的开发当中,提高自己开发Web程序的水平。 本书面向的读者 有一定CSS3开发经验的前端工程师。 本书能帮助你系统掌握CSS3的各项知识,提升技术水平和业务能力。 从事CSS3开发的前端工程师。 由于CSS3涵盖的新特性非常多,在开发过程中将本书作为速查手册,提高开发效率。 前端开发爱好者。 如果还不是一名前端工程师,但是对前端开发非常感兴趣,本书也能让你对最新的CSS标准和规范有一个系统和全面的认识,为学习前端知识打下基础。 本书的特色 本书最大的特色就是将CSS3特性按模块功能分类,通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。 内容全面、丰富、翔实。 由浅到深地讲解了CSS3新特性的语法、特性以及使用技巧。本书涵盖了CSS3众多功能模块,如CSS3选择器特性、边框模块、文本模块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS媒体查询、响应式设计等。 图解方式,直观易懂。 图解的方式是本写的最大特色之一,在描述每一个CSS3特性过程都配了生动的实战效果,甚至每一步骤都配有相应的效果图。就算是你对文字理解或者代码理解有所误差,实战效果图能辅助你更好地理解CSS3每个特性。 案例丰富,实战性强。

2.基本选择器——相邻兄弟元素选择器

【概念】:相邻兄弟选择器可以选择紧接在另一元素的元素,而且他们具有一个相同的父元素。

语法格式:元素 兄弟相邻元素(Element Sibling)

【兼容性】:IE8 、FireFox、chrome、Safari、oper

<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
section > div   article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

图片 8

效果

简单属性选择

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

浏览器支持

无论何时可用,你会看到 CanIUse.com 的浏览器兼容性表格嵌入在浏览器支持章节,所以这个兼容性表格是一直保持最新的。

由于有些条目没有嵌入 CanIUse 的浏览器兼容性表格,我们会手工将这个浏览器支持信息写入。常见和经过测试的主要特性都得到浏览器支持,但有些特性可能会在未来被修改。所以,如果你发现体验过时的兼容性信息,请联系我们,让我们知道,我们会根据你的建议及时更新。

媒体评论

CSS3在前端开发中的重要性毋庸置疑,这些年来,新的CSS3规范在不断演进和完善,但是一直没有确定的规范。从技术标准的角度来讲,本书应该是目前版本最新的;从知识点的涵盖面来讲,本书也是同类书中最全面的。更难得的是,为了便于读者理解,作者用大量直观的图示替代了枯燥的文字,采用了图解的方式来讲解,相信这应该会很受读者欢迎。此外,本书还包含大量实战案例,理论与实践相结合。如果你要系统学习CSS3或者在开发中还不能熟练使用它,强烈推荐这本书给你。

3.基本选择器——通用兄弟选择器

【概念】:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素

语法格式:元素后面所有兄弟相邻元素(Element Siblings)

【兼容性】IE8 、FireFox、chrome、Safari、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
section > div ~ article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

图片 9

效果

例子 1

如果您希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

向前看

有些被遗漏属性,它们只得到小部分浏览器支持,甚至还没得到当今浏览器支持。对于它们的说明还不是很稳定,经常会变动。我们的愿望是把它们添加到条目里,因为它们在将来有希望得到浏览器更好的支持,并且它们的说明变得稳定起来。

我们都知道,在我们这个领域,每天都会有新发现。所以,我们希望 CSS 参考文档能一直得到成长和扩展,能随着时间不断添加额外的属性和特性。即时当前条目更新缓慢。

我们设定了一个里程碑式的目标,首先向你提供一个优秀的参考文档,并致力于不断改善它。

书摘

第1章 揭开CSS3的面纱 如果关注前端方面的技术,那么对CSS一定不会陌生,你肯定听说过CSS3。在使用CSS3之前,应该对这个新一代样式表语言的来龙去脉有个基本了解。 在本章中,你将知道CSS3与CSS2.1的区别,以及当前市面上主流浏览器、移动端浏览器对CSS3支持的情况。对于尚不完全支持CSS3的浏览器,将会为大家引入一个渐进增强的概念,用一些CSS方法来模拟CSS3的实现方法。最后给大家简单介绍一些CSS3引入的新特性及其未来的前景。 1.1什么是CSS3 CSS3并不是一门新的语言。如果接触过CSS就知道,CSS是创建网页的另一个独立但并非不重要的一部分。CSS是种层叠样式表,是一种样式语言,用来告诉浏览器如何渲染你的Web页面。 CSS3是CSS规范的最新版本,在CSS2.1的基础上增加了很多强大的新功能,以帮助开发人员解决一些问题,并且不再需要非语义标签、复杂的JavaScript脚本以及图片,例如圆角功能、多背景、透明度、阴影等功能等。CSS2.1是单一的规范,而CSS3被划分成几个模块组,每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。 现在先来看看CSS3激动人心的新特性。 1.1.1CSS3的新特性 CSS3规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比,其变化是革命性的,虽然它的部分属性还不能够被浏览器完美的支持,但却让我们看到网页样式发展的前景,让我们更具有方向感、使命感。 CSS3新特性非常多,这里挑选一些被浏览器支持较为完美、更具实用性的新特性。 1.强大的CSS3选择器 使用过jQuery的人都知道,jQuery的选择器功能强大,使用方便,CSS3选择器和jQuery选择器非常类似。允许设计师通过选择器直接指定需要的HTML元素,而不需要在HTML中添加不必要的类名、ID等。使用CSS3选择器,能在Web的制作中更完美地做到结构与表现分离,设计师能轻松地设计出简洁、轻量级的Web页面,并且能更好地维护和修改样式。 2.抛弃图片的视觉效果 Web中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS中都是依赖于设计师制作图片或者JavaScript脚本来实现的。CSS3的一些新特性可以用来创建一些特殊的视觉效果,后面的章节将为大家展现这些新特性是如何实现这些视觉效果。 3.背景的变革 如果说CSS中的背景给你带来太多的限制,那么CSS3将带来革命性的变化。CSS3不再局限于背景色、背景图像的运用,新特性中添加了多个新的属性值,例如background-origin、background-clip、background-size,此外,还可以在一个元素上设置多个背景图片。这样,如果要设计比较复杂的Web页面效果,就不再需要使用一些多余标签来辅助实现了。举个例子,要实现CSS中的滑动门效果,在CSS中基本上要添加2~3个额外的标签来辅助实现,那么CSS3中的这些新特性能够在一个标签中完成同等的效果。 4.盒模型变化 盒模型在CSS中是重中之重,CSS中的盒模型只能实现一些基本的功能,对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这一点得到了很大的改善,设计师可以直接通过CSS3来实现。例如,CSS3中的弹性盒子,这个属性将给大家引入一种全新的布局概念,能轻而易举实现各种布局,特别是在移动端的布局,它的功能更是强大。大家将在第7章、第8章见识它的神功。 5.阴影效果

4.基本选择器——群组选择器

【概念】:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开
【语法格式】:元素1,元素2, ..., 元素n(Eelement1, Element2, ..., Elementn)
【兼容性】:IE6 、FireFox、chrome、Safari、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
    color: #f00;
    margin-top: 10px;
    background: #abcdef;
}
</style>
</head>
<body>
<section>
    <article>article</article>
    <aside>aside</aside>
    <div>div</div>
</section>
</body>
</html>

图片 10

效果

例子 2

与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

a[href] {color:red;}

你的反馈

当然,你的评价和反馈对我们是非常重要的。毕竟,这个参考文档是为你们而做的,所以我们想确保你能在这里找到任何你需要的东西。

我们会在专门收集问题和建议的 Github 库上收集你的反馈与建议。

找到 BUG?找到一处需要更新的信息?有错别字?有改善参考文档的建议?希望我们在概念条目添加某个 CSS 概念?那就在 Github 尽情提交问题吧。我自己也会常常寻找问题和回答你的问题,并根据需要尽可能多和尽快进行编辑和更新。如果你想及时得到关于条目或请求的回答,可以在 Twitter 发信息给我。

目录

《图解css3:核心技术与案例实战》 前 言 第1章 揭开css3的面纱 1 1.1 什么是css3 1 1.1.1 css3的新特性 2 1.1.2 css3的发展状况 4 1.1.3 现在能使用css3吗 5 1.1.4 使用css3有什么好处 5 1.2 浏览器对css3的支持状况 6 1.2.1 经典回顾:图说浏览器大战 7 1.2.2 浏览器的市场份额 8 1.2.3 主流浏览器对css3支持状况 9 1.3 渐进增强 11 1.3.1 渐进增强与优雅降级 11 1.3.2 渐进增强的优点 12 1.4 css3的现状及未来 13 1.4.1 谁在使用css3 13 1.4.2 css3的未来 14 1.5 本章小结 14 第2章 css3选择器 15 2.1 认识css选择器 15 2.1.1 css3选择器的优势 15 2.1.2 css3选择器分类 16 2.2 基本选择器 16 2.2.1 基本选择器语法 16 2.2.2 浏览器兼容性 17 2.2.3 实战体验:使用基本选择器 17 2.2.4 通配选择器 18 2.2.5 元素选择器 18 2.2.6 id选择器 18 2.2.7 类选择器 19 2.2.8 群组选择器 20 2.3 层次选择器 21 2.3.1 层次选择器语法 21 2.3.2 浏览器兼容性 21 2.3.3 实战体验:使用层次选择器选择元素 21 2.3.4 后代选择器 23 2.3.5 子选择器 23 2.3.6 相邻兄弟选择器 24 2.3.7 通用兄弟选择器 25 2.4 动态伪类选择器 25 2.4.1 动态伪类选择器语法 26 2.4.2 浏览器兼容性 26 2.4.3 实战体验:美化按钮 27 2.5 目标伪类选择器 29 2.5.1 目标伪类选择器语法 29 2.5.2 浏览器兼容性 30 2.5.3 实战体验:制作手风琴效果 30 2.6 语言伪类选择器 33 2.6.1 语言伪类选择器语法 33 2.6.2 浏览器兼容性 34 2.6.3 实战体验:定制不同语言版本引文风格 34 2.7 ui元素状态伪类选择器 36 2.7.1 ui元素状态伪类选择器语法 36 2.7.2 浏览器兼容性 36 2.7.3 实战体验:bootstrap的表单元素ui状态 37 2.8 结构伪类选择器 41 2.8.1 重温html的dom树 41 2.8.2 结构伪类选择器语法 42 2.8.3 浏览器兼容性 43 2.8.4 结构伪类选择器中的n是什么 44 2.8.5 结构伪类选择器的使用方法详解 47 2.8.6 实战体验:css3美化表格 61 2.9 否定伪类选择器 66 2.9.1 否定伪类选择器语法 66 2.9.2 浏览器兼容性 67 2.9.3 实战体验:改变图片效果 67 2.10 伪元素 69 2.10.1 伪元素::first-letter 69 2.10.2 伪元素::first-line 70 2.10.3 伪元素::before和::after 70 2.10.4 伪元素::selection 72 2.11 属性选择器 73 2.11.1 属性选择器语法 73 2.11.2 浏览器兼容性 74 2.11.3 属性选择器的使用方法详解 75 2.11.4 实战体验:创建个性化链接样式 81 2.12 本章小结 84 第3章 css3边框 85 3.1 css3边框简介 85 3.1.1 边框的基本属性 85 3.1.2 边框的类型 86 3.1.3 谁在使用css3边框 88 3.2 css3边框颜色属性 88 3.2.1 border-color属性的语法及参数 88 3.2.2 浏览器兼容性 90 3.2.3 border-color属性的优势 90 3.2.4 实战体验:立体渐变边框效果 91 3.3 css3图片边框属性 91 3.3.1 border-image属性的语法及参数 92 3.3.2 border-image属性使用方法 92 3.3.3 浏览器兼容性 99 3.3.4 border-image属性的优势 100 3.3.5 实战体验:按钮圆角阴影效果 100 3.4 css3圆角边框属性 105 3.4.1 border-radius属性的语法及参数 105 3.4.2 border-radius属性使用方法 107 3.4.3 浏览器兼容性 114 3.4.4 border-radius属性的优势 115 3.4.5 实战体验:制作特殊图形 115 3.5 css3盒子阴影属性 118 3.5.1 box-shadow属性的语法及参数 118 3.5.2 box-shadow属性使用方法 119 3.5.3 浏览器兼容性 129 3.5.4 box-shadow属性的优势 130 3.5.5 实战体验:制作3d搜索表单 130 3.6 本章小结 133 第4章 css3背景 134 4.1 css3背景属性简介 134 4.1.1 背景的基本属性 134 4.1.2 与背景相关的新增属性 137 4.2 css3背景原点属性 137 4.2.1 background-origin属性的语法及参数 137 4.2.2 background-origin属性使用方法 138 4.2.3 浏览器兼容性 140 4.3 css3背景裁切属性 141 4.3.1 background-clip属性的语法及参数 141 4.3.2 background-clip属性使用方法 143 4.3.3 浏览器兼容性 147 4.4 css3背景尺寸属性 148 4.4.1 background-size属性的语法及参数 148 4.4.2 background-size属性使用方法 149 4.4.3 浏览器兼容性 152 4.4.4 实战体验:制作全屏背景 153 4.5 内联元素背景图像平铺循环方式 154 4.6 css3多背景属性 154 4.6.1 css3多背景语法及参数 155 4.6.2 css3多背景的优势 156 4.6.3 浏览器兼容性 156 4.6.4 实战体验:制作花边框 157 4.7 本章小结 159 第5章 css3文本 160 5.1 css3文本简介 160 5.2 css3文本阴影属性 161 5.2.1 text-shadow属性的语法及参数 162 5.2.2 浏览器兼容性 162 5.2.3 实战体验:制作立体文本 163 5.3 css3溢出文本属性 166 5.3.1 text-overflow属性的语法及参数 166 5.3.2 浏览器兼容性 166 5.3.3 text-overflow属性使用方法 167 5.3.4 实战体验:制作固定区域的博客列表 168 5.4 css3文本换行 170 5.4.1 word-wrap属性 170 5.4.2 word-break属性 173 5.4.3 white-space属性 177 5.4.4 文本换行技巧 179 5.4.5 文本换行技术对比 180 5.5 本章小结 180 ☆第6章 css3颜色特性 181 6.1 网页中的色彩特性 181 6.1.1 网页色彩的表现原理 181 6.1.2 web页面的安全色 182 6.1.3 色彩模式 183 6.2 css3透明属性 184 6.2.1 opacity属性的语法及参数 184 6.2.2 opacity浏览器兼容性 185 6.2.3 实战体验:制作透明过渡色块 185 6.3 css3颜色模式 187 6.3.1 rgba颜色模式 187 6.3.2 hsl颜色模式 190 6.3.3 hsla颜色模式 194 6.3.4 rgba和hsla颜色模式之间的选择 196 6.3.5 rgba/hsla的ie兼容方案 196 6.3.6 rgba/hsla滤镜格式 197 6.4 本章小结 197 第7章 css3盒模型 198 7.1 css盒模型简介 198 7.1.1 什么是盒模型 198 7.1.2 重置盒模型解析模式 199 7.2 css3盒模型属性 200 7.2.1 box-sizing属性的语法及参数 200 7.2.2 浏览器兼容性 201 7.2.3 实战体验:box-sizing拯救了布局 202 7.3 css3内容溢出属性 209 7.3.1 overflow-x和overflow-y属性的语法及参数 209 7.3.2 浏览器兼容性 209 7.4 css3自由缩放属性 210 7.4.1 resize属性的语法及参数 210 7.4.2 浏览器兼容性 210 7.4.3 实战体验:修改文本域随意调整大小的功能 210 7.5 css3外轮廓属性 211 7.5.1 outline属性的语法及参数 211 7.5.2 浏览器兼容性 212 7.5.3 outline和border的对比 212 7.5.4 实战体验:模仿边框效果 213 7.6 本章小结 213 第8章 css3伸缩布局盒模型 214 8.1 flexbox模型基础知识 214 8.1.1 css中的布局模式 214 8.1.2 flexbox模型的功能 215 8.1.3 flexbox模型中的术语 215 8.1.4 flexbox模型规范状态 218 8.1.5 flexbox模型浏览器兼容性 218 8.1.6 flexbox模型语法变更 219 8.2 旧版本flexbox模型的基本使用 221 8.2.1 伸缩容器设置display 222 8.2.2 伸缩流方向box-orient 224 8.2.3 布局顺序box-direction 226 8.2.4 伸缩换行box-lines 229 8.2.5 主轴对齐box-pack 232 8.2.6 侧轴对齐box-align 237 8.2.7 伸缩性box-flex 242 8.2.8 显示顺序box-ordinal-group 246 8.2.9 实战体验:box制作自适应的三列等高布局 249 8.3 混合版本flexbox模型的基本使用 253 8.3.1 伸缩容器设置display 253 8.3.2 伸缩流方向flex-direction 254 8.3.3 伸缩换行flex-wrap 257 8.3.4 伸缩流方向与换行flex-flow 259 8.3.5 主轴对齐flex-pack 259 8.3.6 侧轴对齐flex-align 262 8.3.7 堆栈伸缩行flex-line-pack 266 8.3.8 伸缩性flex 271 8.3.9 显示顺序flex-order 273 8.4 新版本flexbox模型的基本使用 275 8.4.1 伸缩容器display 275 8.4.2 伸缩流方向flex-direction 276 8.4.3 伸缩换行flex-wrap 276 8.4.4 伸缩流方向与换行flex-flow 277 8.4.5 主轴对齐justify-content 277 8.4.6 侧轴对齐align-items和align-self 278 8.4.7 堆栈伸缩行align-content 280 8.4.8 伸缩性flex 281 8.4.9 显示顺序order 285 8.5 综合案例:跨浏览器的三列布局 288 8.6 本章小结 292 第9章 css3多列布局 293 9.1 css3多列布局简介 293 9.1.1 浏览器兼容性 293 9.1.2 css3多列布局的属性 294 9.2 css3多列布局基本属性 295 9.2.1 columns属性的语法及参数 295 9.2.2 浏览器兼容性 295 9.2.3 实战体验:web页面的多列布局 296 9.3 css3多列布局列宽属性 297 9.3.1 column-width属性的语法及参数 297 9.3.2 实战体验:浏览器根据窗口宽度变化调整列数 298 9.4 css3多列布局列数属性 302 9.4.1 column-count属性的语法及参数 302 9.4.2 实战体验:显示固定列数 302 9.5 css3多列布局列间距属性 303 9.5.1 column-gap属性的语法及参数 304 9.5.2 实战体验:设置列间距 304 9.6 css3多列布局列边框样式属性 306 9.6.1 column-rule属性的语法及参数 306 9.6.2 实战体验:设置列边框 307 9.7 css3多列布局跨列属性 309 9.7.1 column-span属性的语法及参数 310 9.7.2 实战体验:文章标题跨列显示 310 9.8 css3多列布局列高度属性 311 9.9 本章小结 311 ☆第10章 css3渐变 312 10.1 css3渐变简介 312 10.1.1 什么是色标 312 10.1.2 浏览器兼容性 313 10.2 css3线性渐变 314 10.2.1 css3线性渐变语法与参数 315 10.2.2 css3 线性渐变的基本用法 317 10.2.3 自定义css3线性渐变 324 10.2.4 实战体验:css3制作渐变按钮 325 10.3 css3径向渐变 333 10.3.1 css3径向渐变语法 333 10.3.2 css3径向渐变的属性参数 334 10.3.3 css3径向渐变的基本用法 335 10.3.4 实战体验:css3径向渐变制作圆形图标按钮 350 10.4 css3重复渐变 353 10.4.1 css3重复线性渐变 353 10.4.2 css3重复径向渐变 354 10.4.3 实战体验:制作记事本纸张效果 354 10.5 综合案例:css3渐变制作纹理背景 355 10.6 本章小结 357 第11章 css3变形 358 11.1 css3变形简介 358 11.1.1 css变形属性及函数 358 11.1.2 浏览器兼容性 359 11.2 css变形属性详解 360 11.2.1 transform属性 360 11.2.2 transform-origin属性 363 11.2.3 transform-style属性 370 11.2.4 perspective属性 372 11.2.5 perspective-origin属性 377 11.2.6 backface-visibility属性 380 11.3 css3 2d变形 385 11.3.1 2d位移 385 11.3.2 2d缩放 390 11.3.3 2d旋转 394 11.3.4 2d倾斜 396 11.3.5 2d矩阵 398 11.4 css3 3d变形 403 11.4.1 3d位移 404 11.4.2 3d缩放 406 11.4.3 3d旋转 407 11.4.4 3d矩阵 409 11.5 多重变形 410 11.5.1 2d多重变形制作立方体 410 11.5.2 3d多重变形制作立方体 412 11.6 综合案例:3d变形制作产品信息展示 413 11.7 本章小结 416 ☆第12章 css3过渡 417 12.1 css3过渡简介 417 12.1.1 如何创建简单的过渡 417 12.1.2 浏览器兼容性 418 12.1.3 css3过渡属性 418 12.2 css3过渡子属性详解 420 12.2.1 指定过渡属性transition-property 421 12.2.2 指定过渡所需时间transition-duration 423 12.2.3 指定过渡函数transition-timing-function 425 12.2.4 指定过渡延迟时间transition-delay 431 12.2.5 多个css3过渡效果 433 12.3 css3触发过渡 434 12.3.1 伪元素触发 434 12.3.2 媒体查询触发 436 12.3.3 javascript触发 436 12.4 css3过渡技巧 437 12.4.1 一个完整的过渡 437 12.4.2 可过渡的属性 438 12.4.3 优先的过渡属性 439 12.4.4 过渡的开始和结束为auto 439 12.4.5 隐式过渡 439 12.4.6 开关状态的不同过渡方式 440 12.4.7 几乎无限延迟的过渡 441 12.4.8 通过硬件加速过渡更加流畅 441 12.4.9 过渡和伪元素 442 12.5 综合案例:纯css3制作css dock导航效果 443 12.6 本章小结 449 第13章 css3动画 450 13.1 css3动画简介 450 13.1.1 浏览器兼容性 450 13.1.2 css3动画属性 451 13.2 关键帧 452 13.2.1 @keyframes的作用 452 13.2.2 @keyframes的语法 453 13.2.3 浏览器兼容性 454 13.3 css中为元素应用动画 454 13.3.1 使用@keyframes声明动画 454 13.3.2 调用@keyframes声明的动画 456 13.4 css3动画子属性详解 457 13.4.1 调用动画animation-name 457 13.4.2 设置动画播放时间animation-duration 458 13.4.3 设置动画播放方式animation-timing-function 458 13.4.4 设置动画开始播放的时间animation-delay 458 13.4.5 设置动画播放次数animation-iteration-count 458 13.4.6 设置动画播放方向animation-direction 458 13.4.7 设置动画的播放状态animation-play-state 459 13.4.8 设置动画时间外属性animation-fill-mode 459 13.5 综合案例:全屏slidershow效果 459 13.6 本章小结 464 第14章 媒体特性与responsive设计 465 14.1 媒体类型 465 14.1.1 media type设备类型 465 14.1.2 媒体类型引用方法 466 14.2 媒体特性 467 14.2.1 media query和css属性集合 467 14.2.2 常用media query设备特性 468 14.2.3 浏览器兼容性 468 14.2.4 media query使用方法 468 14.3 responsive布局概念 470 14.3.1 responsive设计特点 471 14.3.2 responsive中的术语 471 14.3.3 responsive布局技巧 473 14.3.4 meta标签 474 14.4 本章小结 475 第15章 嵌入web字体 476 15.1 @font-face模块介绍 476 15.1.1 浏览器兼容性 476 15.1.2 @font-face语法 477 15.1.3 使用字体图标的优势 477 15.2 实现@font-face 478 15.2.1 使用@font-face自定义字体 478 15.2.2 声明字体来源 479 15.2.3 创建各种字体 481 15.2.4 调用字体 483 15.3 综合案例:将图标转换成web字体 483 15.3.1 创建一个图标字体 483 15.3.2 准备插图 484 15.3.3 导入到icomoon 485 15.3.4 从icomoon中导出字体 485 15.3.5 下载字体文件 485 15.3.6 调用字体 486 15.4 本章小结 486

二、属性选择器

对带有指定属性的HTML元素设置样式
使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。

例子 3

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

留在最后的一些话

我们把全部心血都放到了这个参考文档,希望它能为你提供非常有用的学习资源。我希望你能从参考文档里学到尽可能多地东西,因为我也在写的过程中学会了很多。

同时我们也希望您喜欢经过小小改造的 Codrops !

非常感谢您的阅读。另外,别忘了到 参考文档 看看哦!

打赏支持我翻译更多好文章,谢谢!

打赏译者

Element[attribute]

【概念】:为带有attribute属性的Element元素设置样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

例子 4

可以采用一些创造性的方法使用这个特性。

例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

img[alt] {border: 5px solid red;}
提示:上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 11 图片 12

2 赞 2 收藏 评论

Element[attribute=“value”]

【概念】:为attribute=“value”属性的Element元素设置样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

例子 5:为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

关于作者:刘健超-J.c

图片 13

前端,在路上... 个人主页 · 我的文章 · 19 ·     

图片 14

Element[attribute~=“value”]

【概念】:选择attribute属性包含单词“value”的元素,并设置其样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

根据具体属性值选择

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

习题:one,two,three,four,five哪个变红?

图片 15

答案:one,two

例子 1

例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

Element[attribute^=“value”]

【概念】:设置attribute属性值以“value”开头的所有Element元素的样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

例子 2

与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

Element[attribute$=“value”]

【概念】设置attribute属性值以“value”结尾的所有**Element元素的样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

例子 3

同样地,XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素:

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Element[attribute*=“value”]

【概念】:设置attribute属性值包含“value”的所有Element元素的样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

1) 属性与属性值必须完全匹配

请注意,这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表,匹配就可能出问题。

请考虑一下的标记片段:

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"],那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素,必须这样写:

p[class="important warning"] {color: red;}

Element[attribute|=“value”]

【概念】:选择attribute属性值以“”value-”**开头的元素,并设置其样式
【兼容性】:IE8 、FireFox、chrome、Safari、opera

2) 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

p[class~="important"] {color: red;}

如果忽略了波浪号,则说明需要完成完全值匹配。

 

三、伪类选择器

3) 部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。

例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

 

动态伪类

锚点伪类、用户行为伪类

4) 子串匹配属性选择器

下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器,包括 IE7。

下表是对这些选择器的简单总结:

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

可以想到,这些选择有很多用途。

举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

a[href*="w3school.com.cn"] {color: red;}
提示:任何属性都可以使用这些选择器。

UI

5) 特定属性选择类型

最后为您介绍特定属性选择器。请看下面的例子:

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说,[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像:

img[src|="figure"] {border: 1px solid gray;}

当然,这种属性选择器最常见的用途还是匹配语言值。

 

元素状态伪类

CSS 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

 

 

CSS3结构类

最后补充下,通配符选择器(不常用,如有需要,可参考)

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

例如,下面的规则可以使文档中的每个元素都为红色:

* {color:red;}

 

否定选择器

伪元素

·动态伪类

动态伪类

这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来

1.锚点伪类

:link,    :visited

2.用户行为伪类

:hover,    :active,    :focus

案例:focus案例

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>动态伪类</title>
        <style type="text/css">
         input{
            width: 200px;
            height: 30px;
            border: 5px solid #f00;
         }
         input:focus{
            background: #abcdef;
         }

        </style>
    </head>
    <body>
        <input type="text">
    </body>
</html>

图片 16

伪类选择器.gif

·UI元素状态伪类

【概念】:把":enabled",":disabled",":checked"伪类称为UI元素状态伪类

【兼容性】:
":enabled",":disabled":IE9 、FireFox、Chrome、Safari、Opera
":checked仅opera

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI元素状态伪类</title>
    <style type="text/css">
    input{
        width: 200px;
        height: 30px;
    }
    input:enabled{
        width: 200px;
        height: 30px;
        border: 1px solid #f00;
    }
    input:disabled{
        background: #abcdef;
        border: 1px solid #ff0;
    }
    </style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">
<input type="text"> 
</body>
</html>

图片 17

UI元素伪类enabled,disabled.gif

·CSS3结构类

CSS3的:nth选择器

【概念】:我们把CSS3的:nth选择器也成为CSS3结构类

选择方法:

:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

1.Element:first-child

【概念】
选择属于其父元素的首个子元素每个Element元素,并为其设置样式
【兼容性】
IE8 、FireFox、Chrome、Safari、Opera

2.Element:last-child

【概念】
选择属于其父元素的最后一个子元素Element元素,并为其设置样式
【兼容性】
IE8 、FireFox、Chrome、Safari、Opera

Element:nth-child(N)

【概念】
nth-child(N)选择器匹配属于其父元素的第N个子元素,不论元素的类型
【兼容性】
IE9 、FireFox4 、Chrome、Safari、Opera

·关于参数(N)

1.Element:nth-child(number)

选择某元素下的第numberElement元素关于参数(N)

2.Element:nth-child(n)

n是一个简单表达式,取值从“0”开始计算。这里只能是“n”,不能用其他字母代替。

3.Element:nth-child(odd)、Element:nth-child(even)

odd和even是可用于匹配下标是奇数偶数的Element元素的关键词(第一个的下标是1)

案例题:

列表UL背景颜色有没有变化?
列表项奇数项还是偶数项为绿色?

图片 18

odd,even的练习题

答案:ul 没有变化;奇数项为绿色

4.Element:nth-last-child(N)

【概念】
匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。(注意:直接从1开始计数,不是0,与JS有区别
【兼容性】
IE9 、FireFox4 、Chrome、Safari、Opera

5.Element:nth-of-type(N)

【概念】
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素的每个元素
【兼容性】
IE9 、FireFox4 、Chrome、Safari、Opera

案例div:nth-of-type(N)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
div:nth-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源码的1-2;0-2;2-2会变红

对比案例div:nth-child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noth-child</title>
<style type="text/css">
div:nth-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源码:1-2和2-2会变红

6.Element:nth-last-of-type(N)

【概念】
匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数
【兼容性】
IE9 、FireFox4 、Chrome、Safari、Opera
【注意对比】:

nth-last-of-type(n)指定元素类型
nth-last-child(n)不指定元素类型

案例:div:nth-last-0f-type(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">

div:nth-last-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-2,2-2变红

对比案例div:nth-last-child(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-child</title>
<style type="text/css">
div:nth-last-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-3,2-2变红

7.Element:first-of-type

【概念】
:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
相当于noth-of-type(1)
【兼容性】
IE9 、FireFox、Chrome、Safari、Opera

案例first-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

效果:0-1,1-1,2-1

8.Element:last-of-type

【概念】
:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
【兼容性】
IE9 、FireFox、Chrome、Safari、Opera

案例last-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

案例效果:1-3,0-3,2-3红色

9.Element:only-child

【概念】
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
【兼容性】
IE9 、FireFox、Chrome、Safari、Opera

案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果:仅第3个背景红色

10.Element:only-of-type

【概念】
:only-of-type选择器匹配属于其父元素的特定类型唯一子元素的每个元素
【兼容性】
IE9 、FireFox4 、Chrome、Safari、Opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果:3和5都是红色。

11.Element:empty

【概念】
:empty选择器匹配没有子元素(包括文本节点)的每个元素
【兼容性】
IE9 、FireFox、Chrome、Safari、Opera

12.否定选择器(:not)

【概念】
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
【语法格式】
父元素:not(子元素/子选择器) (Father:not(Children/selector))
【兼容性】
IE9 、FireFox、Chrome、Safari、Opera

not案例:最后一个竖线清除

图片 19

最后一个竖线清除效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
    float: left;
    width: 100px;
    height: 30px;
}
nav {
    width: 800px;
    margin: 0 auto;
}
nav > a:not(:last-of-type) {
    border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
    <a href="#">first</a>
    <a href="#">second</a>
    <a href="#">third</a>
    <a href="#">fourth</a>
    <a href="#">fifth</a>
</nav>
</body>
</html>

三、伪元素

CSS伪元素用于向某些选择器设置特殊效果

【语法格式】
元素::伪元素(Element::pseudo-element)

【兼容性】
IE9 、FireFox、Chrome、Safari、Opera
【备注】

对于新版本的浏览器,伪元素:或::都可以,用两个:是为了和之前的选择器进行区分。
伪元素和伪类是不同的:

伪类:整体是个选择器,它选中的只是针对一个元素
伪元素:在之前的元素中,增加了一个在HTML并不存在的元素,即相当于伪造的元素。

1.伪元素——Element::first-line

【概念】
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
【说明】
“first-line”伪元素只能用于块级元素

2.伪元素——Element::first-letter

【概念】
用于向文本的首字母设置特殊样式
【说明】
“first-letter”伪元素只能用于块级元素

3.伪元素——Element::before

【概念】
在元素的内容前面插入新内容
【说明】
常用“content”配合使用

【注意】::before伪元素的特点:
1、第一个子元素
2、行级元素
3、内容通过content写入
4、标签中找不到对应的标签

案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}
div::before {
    content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

源码效果:

图片 20

4.伪元素——Element::after

【概念】
在元素的内容后面插入新内容
【说明】
常用“content”配合使用,多用于清除浮动

Element::after清除浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style type="text/css">
header {
    background: #abcdef;
}
header::after {
    display: block;
    content: "";
    clear: both;
}
header > article {
    float: left;
    width: 40%;
    height: 30px;
    background: #f00;
}
header > aside {
    float: right;
    width: 40%;
    height: 50px;
    background: #ff0;
}
</style>
</head>
<body>
<header>
    <article></article>
    <aside></aside>
</header>
</body>
</html>

5.伪元素——Element::selection

【概念】
用于设置在浏览器中选中文本后的背景色与前景色
【兼容性】
::selection在IE家族中,只有IE9 版本支持,在Firefox中需要加上其前缀“-moz”

案例:

图片 21

selection效果.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
    background: red;
    color: #ff0;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

CSS权重

什么是权重

当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程

权重等级与权值

行内样式(1000)>ID选择器(100)>类、属性选择器和伪类选择器(10)>元素和伪类(1)>*(0)

权重计算口诀

从0开始,一个行内样式 1000,一个id 100,一个属性选择器、class或者伪类 10,一个元素名或者伪元素 1

CSS权重规则

包含更高权重选择器的一条规则拥有更高的权重
ID选择器(idValue)的权重比属性选择器([id="idValue"])高带有上下文关系的选择器比单纯的元素选择器权重要高
带有上下文关系的选择器比单纯的元素选择器权重要高
与元素“挨得近”的规则生效
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器,都没有一个class选择器权重高
通配符选择器权重是0,被继承的CSS属性也带有权重,权重也是0

本文由pc28.am发布于前端技术,转载请注明出处:选用器汇总,伪类选用器

上一篇:始发认知,近期关于less 下一篇:没有了
猜你喜欢
热门排行
精彩图文