CSS - 版本历史

Eric：/* 伪类 */

2022-11-14T07:26:08Z

伪类

←上一版本		2022年11月14日 (一) 07:26的版本
第149行：		第149行：
	\|		\|
	\|-		\|-
	\| :nth-child()		\| :nth-child() <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child MDN]
	\|		\|
	\|		\|
	\|-		\|-
	\| :nth-last-child() ~~<br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child MDN]~~		\| :nth-last-child()
	\|		\|
	\|		\|

Eric：/* 基本选择器 */

2022-11-14T07:24:51Z

基本选择器

←上一版本		2022年11月14日 (一) 07:24的版本
第38行：		第38行：
	\|\| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]		\|\| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
	}}		}}
			{{表格链接\|[https://www.baidu.com 百度]}}
	===基本选择器===		===基本选择器===
	{\| class="wikitable" style="width: 100%;		{\| class="wikitable" style="width: 100%;
第45行：		第46行：
	!示例		!示例
	\|-		\|-
	\|'''标签选择器'''<br \>Type selector <br />~~{{表格链接\|~~[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]}}		\|'''标签选择器'''<br \>Type selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]
	\|elementname		\|elementname
	\|选取特定类型元素		\|选取特定类型元素
	\|<code>p</code> 选择<nowiki><p>元素</nowiki>		\|<code>p</code> 选择<nowiki><p>元素</nowiki>
	\|-		\|-
	\|'''类选择器'''<br \> Class selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]		\|'''类选择器'''<br \> Class selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]
	\|.classname		\|.classname
	\|选取特定类的元素（单一页面中，一个类可以有多个实例）		\|选取特定类的元素（单一页面中，一个类可以有多个实例）
第65行：		第66行：
	\|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">		\|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">
	\|-		\|-
	\|'''通配选择器'''<br \> Universal selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]		\|'''通配选择器'''<br \> Universal selector <br /><br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]
	\|<nowiki>* ns\|* \|</nowiki>		\|<nowiki>* ns\|* \|</nowiki>
	\|选取选择所有元素，或某个命名空间下所有元素		\|选取选择所有元素，或某个命名空间下所有元素

Eric：/* 选择器 */

2022-11-14T04:25:22Z

选择器

←上一版本		2022年11月14日 (一) 04:25的版本
第45行：		第45行：
	!示例		!示例
	\|-		\|-
	\|'''标签选择器'''<br \>Type selector		\|'''标签选择器'''<br \>Type selector <br />{{表格链接\|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]}}
	\|elementname		\|elementname
	\|选取特定类型元素		\|选取特定类型元素
	\|<code>p</code> 选择<nowiki><p>元素</nowiki>		\|<code>p</code> 选择<nowiki><p>元素</nowiki>
	\|-		\|-
	\|'''类选择器'''<br \> Class selector		\|'''类选择器'''<br \> Class selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]
	\|.classname		\|.classname
	\|选取特定类的元素（单一页面中，一个类可以有多个实例）		\|选取特定类的元素（单一页面中，一个类可以有多个实例）
第65行：		第65行：
	\|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">		\|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">
	\|-		\|-
	\|'''通配选择器'''<br \> Universal selector		\|'''通配选择器'''<br \> Universal selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]
	\|<nowiki>* ns\|* \|</nowiki>		\|<nowiki>* ns\|* \|</nowiki>
	\|选取选择所有元素，或某个命名空间下所有元素		\|选取选择所有元素，或某个命名空间下所有元素
	\|<code>*</code> 选择所有元素		\|<code>*</code> 选择所有元素
	\|}		\|}

			{{了解更多
			\|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#基本选择器 MDN：基本选择器]
			}}

	===分组选择器===		===分组选择器===

Eric：/* 组合选择器 */

2022-11-14T04:03:34Z

组合选择器

←上一版本		2022年11月14日 (一) 04:03的版本
第87行：		第87行：
	!描述		!描述
	!示例		!示例
	~~!示例结果~~
	\|-		\|-
	\|>		\|>
	\|A > B		\|A > B
	\|子代选择器，只选择A元素子代的元素B		\|子代选择器，只选择A元素子代的元素B
	\|div > p		\|<code>div > p</code> 选取div下的所有子元素p
	\|选取div下的所有子元素p
	\|-		\|-
	\| （空格）		\| （空格）
	\|A B		\|A B
	\|后代选择器，选择A元素下的元素B，不管子代还是孙代等。		\|后代选择器，选择A元素下的元素B，不管子代还是孙代等。
	\|div p		\|<code>div p</code> 选取div下的所有元素p
	\|选取div下的所有元素p
	\|-		\|-
	\|<nowiki>+</nowiki>		\|<nowiki>+</nowiki>
	\|A + B		\|A + B
	\|相邻兄弟选择器，选择与元素A相邻的同级元素B。		\|相邻兄弟选择器，选择与元素A相邻的同级元素B。
	\|div + p		\|<code>div + p</code> 选取与元素div相邻的同级元素p
	\|选取与元素div相邻的同级元素p
	\|-		\|-
	\|~		\|~
	\|A ~ B		\|A ~ B
	\|兄弟选择器，选择与元素A同级的元素B，不管相不相邻。		\|兄弟选择器，选择与元素A同级的元素B，不管相不相邻。
	\|div ~ p		\|<code>div ~ p</code> 选取与元素div的同级元素p
	\|选取与元素div的同级元素p
	\|-
	\|}		\|}

			{{了解更多
			\|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#组合器（combinators） MDN：组合器（combinators）]
			}}

	===伪选择器===		===伪选择器===

2022年11月14日 (一) 03:59 Eric

2022-11-14T03:59:39Z

@@ 第28行： / 第28行： @@
 ==选择器==
 ===基本选择器===
 {| class="wikitable"  style="width: 100%;
@@ 第59行： / 第69行： @@
 |选取选择所有元素，或某个命名空间下所有元素
 |<code>*</code> 选择所有元素
 |}
-===选择器组===
+===分组选择器===
 选择器用逗号''','''分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：
@@ 第110行： / 第115行： @@
 |}
-===伪类===
+====伪元素====
-CSS 伪类用于在不能使用文档树或其他简单选择器选择不了时进行选择。 使用冒号:加关键字表示。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
+伪元素选择器，使用双冒号<code>::</code>加关键字表示，支持选择元素特定某部分。 例如<code>::first-line</code>选择元素第一行
- <nowiki>/* 所有用户指针悬停的按钮 */
+<syntaxhighlight lang="CSS" >
-button:hover {
+/* 每一个 <p> 元素的第一行。 */
    color: blue;
-}</nowiki>
+  text-transform: uppercase;
 {{了解更多
 | [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors MDN：CSS selectors]
 | [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]

2021年9月28日 (二) 04:24 Eric

2021-09-28T04:24:27Z

←上一版本		2021年9月28日 (二) 04:24的版本
第1行：		第1行：
	层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由[[W3C]]~~定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。~~		层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由[[W3C]]定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。CSS 与 [[HTML]] 和 [[JavaScript]] 并称 [[Web]] 三大核心技术。

	==简介==		==简介==
			===时间轴===
			* 1996年12月17日，W3C发布[https://www.w3.org/TR/CSS1/ CSS 1]。
			* 1998年5月12日，W3C发布[https://www.w3.org/TR/1998/REC-CSS2-19980512/ CSS 2]。
			* 2011年6月7日，W3C发布[https://www.w3.org/TR/CSS21/ CSS 2.1]。

			{{了解更多
			\|[https://www.w3.org/Style/CSS/specs W3C：所有CSS规范]
			}}
			==基本知识==
	和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：		和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：
	<nowiki>p {		<nowiki>p {
第10行：		第19行：
	在浏览器打开html文件可以看到所有段落文件都变为红色。		在浏览器打开html文件可以看到所有段落文件都变为红色。

	~~===时间轴===~~

	==结构==		===结构===
	CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则，每个声明用分号;隔开，所有声明在大括号里。一条声明包含属性（Properties）和属性值（Property value）,用冒号:隔开。		CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则，每个声明用分号;隔开，所有声明在大括号里。一条声明包含属性（Properties）和属性值（Property value）,用冒号:隔开。


			===引入CSS方式===


第20行：		第31行：
	{\| class="wikitable" style="width: 100%;		{\| class="wikitable" style="width: 100%;
	!名称		!名称
	~~!中文名称~~
	!格式		!格式
	!描述		!描述
	!~~示例选择器~~		!示例
	~~!示例选取结果~~
	\|-		\|-
	\|Type selector		\|'''标签选择器'''<br \>Type selector
	~~\|标签选择器(或元素选择器)~~
	\|elementname		\|elementname
	\|选取特定类型元素		\|选取特定类型元素
	\|p		\|<code>p</code> 选择<nowiki><p>元素</nowiki>
	\|选择 <<nowiki />p>
	\|-		\|-
	\|Class selector		\|'''类选择器'''<br \> Class selector
	~~\|类选择器~~
	\|.classname		\|.classname
	\|选取特定类的元素（单一页面中，一个类可以有多个实例）		\|选取特定类的元素（单一页面中，一个类可以有多个实例）
	\|.my-class		\|<code>.my-class</code> 可以选择 <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
	~~\|选择~~ <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
	\|-		\|-
	\|ID selector		\|'''ID 选择器'''<br \> ID selector
	~~\|ID 选择器~~
	\|#idname		\|#idname
	\|选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）		\|选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）
	\|#my-id		\|<code>#my-id</code> 可以选择 <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
	~~\|选择~~ <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
	\|-		\|-
	\|Attribute selector		\|'''属性选择器'''<br \> Attribute selector
	~~\|属性选择器~~
	\|<nowiki>[attr] [attr=value] [attr~=value] [attr\|=value] [attr^=value] [attr$=value] [attr*=value]</nowiki>		\|<nowiki>[attr] [attr=value] [attr~=value] [attr\|=value] [attr^=value] [attr$=value] [attr*=value]</nowiki>
	\|选取特定属性的元素		\|选取特定属性的元素
	\|img[src]		\|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">
	\|选择img元素中含有src属性的元素，如 <img src="myimage.png">
	\|-		\|-
	\|Universal selector		\|'''通配选择器'''<br \> Universal selector
	~~\|通配选择器~~
	\|<nowiki>* ns\|* \|</nowiki>		\|<nowiki>* ns\|* \|</nowiki>
	\|选取选择所有元素，或某个命名空间下所有元素		\|选取选择所有元素，或某个命名空间下所有元素
	\|*		\|<code>*</code> 选择所有元素
	\|选择所有元素
	\|-		\|-
	\|Pseudo classes		\|'''伪类选择器'''<br \> Pseudo classes
	~~\|伪类选择器~~
	\|<nowiki>:pseudo-class(value)</nowiki>		\|<nowiki>:pseudo-class(value)</nowiki>
	\|选取特定伪类特定值的元素		\|选取特定伪类特定值的元素
	\|a:hover		\|<code>a:hover</code> 鼠标悬停的a元素
	\|鼠标悬停的a元素
	\|-
	\|}		\|}

	===选择器组===		===选择器组===
	选择器用逗号''','''分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：		选择器用逗号''','''分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：
第189行：		第186行：
	==资源==		==资源==
	===官网===		===官网===
	* ~~[https~~://www.w3.org/Style/CSS/ CSS ~~官网]~~		* CSS 官网：https://www.w3.org/Style/CSS/
			* CSS 2.2 文档：https://www.w3.org/TR/CSS22/
			* CSS 2.1 文档：https://www.w3.org/TR/CSS21/
			* CSS 2 文档：https://www.w3.org/TR/1998/REC-CSS2-19980512/
			* CSS 1 文档： https://www.w3.org/TR/CSS1/

	===相关网站===		===相关网站===

2021年9月28日 (二) 01:50 Eric

2021-09-28T01:50:55Z

@@ 第146行： / 第146行： @@
 }}
+{{了解更多
 ==资源==
 ===官网===

2020年8月23日 (日) 06:08 Eric

2020-08-23T06:08:28Z

←上一版本		2020年8月23日 (日) 06:08的版本
第159行：		第159行：
	* [https://developer.mozilla.org/zh-CN/docs/Web/CSS MDN文档：CSS（层叠样式表）]		* [https://developer.mozilla.org/zh-CN/docs/Web/CSS MDN文档：CSS（层叠样式表）]
	* [https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics MDN文档：CSS 基础]		* [https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics MDN文档：CSS 基础]

			[[分类:编程语言]]

Eric：创建页面，内容为“层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由W3C定义和维护。用来为结构化文档（如HTML文档或XML…”

2020-08-04T07:20:18Z

创建页面，内容为“层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由W3C定义和维护。用来为结构化文档（如HTML文档或XML…”

新页面

层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由[[W3C]]定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。

==简介==
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：
<nowiki>p {
color: red;
}</nowiki>
保存到style.css文件中，然后在THML文档头部标签<head>引入。
<link href="style.css" rel="stylesheet">
在浏览器打开html文件可以看到所有段落文件都变为红色。

===时间轴===

==结构==
CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则，每个声明用分号;隔开，所有声明在大括号里。一条声明包含属性（Properties）和属性值（Property value）,用冒号:隔开。

==选择器==
===基本选择器===
{| class="wikitable" style="width: 100%;
!名称
!中文名称
!格式
!描述
!示例选择器
!示例选取结果
|-
|Type selector
|标签选择器(或元素选择器)
|elementname
|选取特定类型元素
|p
|选择 <<nowiki />p>
|-
|Class selector
|类选择器
|.classname
|选取特定类的元素（单一页面中，一个类可以有多个实例）
|.my-class
|选择 <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
|-
|ID selector
|ID 选择器
|#idname
|选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）
|#my-id
|选择 <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
|-
|Attribute selector
|属性选择器
|<nowiki>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</nowiki>
|选取特定属性的元素
|img[src]
|选择img元素中含有src属性的元素，如 <img src="myimage.png">
|-
|Universal selector
|通配选择器
|<nowiki>* ns|* *|*</nowiki>
|选取选择所有元素，或某个命名空间下所有元素
|*
|选择所有元素
|-
|Pseudo classes
|伪类选择器
|<nowiki>:pseudo-class(value)</nowiki>
|选取特定伪类特定值的元素
|a:hover
|鼠标悬停的a元素
|-
|}
===选择器组===
选择器用逗号''','''分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：

<nowiki>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
等价：
h1, h2, h3 { font-family: sans-serif }</nowiki>

===组合选择器===
两选择器可以通过组合选择符来组合选择，CSS里现在共有4种组合选择符（Combinators），如下：
{| class="wikitable" style="width: 100%;
!符号
!语法
!描述
!示例
!示例结果
|-
|>
|A > B
|子代选择器，只选择A元素子代的元素B
|div > p
|选取div下的所有子元素p
|-
| （空格）
|A B
|后代选择器，选择A元素下的元素B，不管子代还是孙代等。
|div p
|选取div下的所有元素p
|-
|<nowiki>+</nowiki>
|A + B
|相邻兄弟选择器，选择与元素A相邻的同级元素B。
|div + p
|选取与元素div相邻的同级元素p
|-
|~
|A ~ B
|兄弟选择器，选择与元素A同级的元素B，不管相不相邻。
|div ~ p
|选取与元素div的同级元素p
|-
|}

===伪类===
CSS 伪类用于在不能使用文档树或其他简单选择器选择不了时进行选择。使用冒号:加关键字表示。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
<nowiki>/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}</nowiki>

===伪元素===
{{了解更多
| [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors MDN：CSS selectors]
| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
}}

==属性==
属性（Properties）和属性值（Property value）值构成一条声明。

CSS中定义的所有属性见网页 [https://www.w3.org/Style/CSS/all-properties CSS官网：所有属性]。该页面为属性索引按字母排序，包括所有8个成熟度等级css属性，如编辑稿，草案，推荐等，用颜色区分成熟度等级。

===字体属性===

{{了解更多
| [https://www.w3.org/TR/CSS22/fonts.html CSS 官网：CSS22-字体]
}}

{{了解更多
| [https://www.w3.org/Style/CSS/all-properties CSS 官网：所有属性]
}}

==资源==
===官网===
* [https://www.w3.org/Style/CSS/ CSS 官网]

===相关网站===
* [http://zh.html.net/tutorials/css/ HTML.net：CSS 教程]
* [http://chinese-school.netfirms.com/CSS-tutorial-Chinese-index.htm netfirms.com：CSS 教程]

==参考资料==
* [https://developer.mozilla.org/zh-CN/docs/Web/CSS MDN文档：CSS（层叠样式表）]
* [https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics MDN文档：CSS 基础]

CSS - 版本历史

Eric：​/* 伪类 */

Eric：​/* 基本选择器 */

Eric：​/* 选择器 */

Eric：​/* 组合选择器 */