摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。
文章大纲来源：【Day 3】HTML复习 + CSS基础
初识CSS
入门CSS
初识CSS层叠样式表（Cascading Style Sheets），即前端常说的CSS。
内容引用：CSS 简介
样式解决了什么问题？HTML标签原本被设计为用于定义文档内容。
通过使用标签来表达语义信息。
那个时候的文档布局由浏览器实现，没有使用什么格式的标签。
但是当时主要的浏览器（Netscape 和 Internet Explorer）不断地将新的HTML标签和属性（比如字体颜色等）加入到HTML规范中，文档内容要独立于文档表示层越来越困难（各家都有各家的HTML书写属性规范，并且样式一般不统一）。
为了解决这个问题，万维网联盟（W3C）在HTML 4.0 之外创造出样式（Style）。
样式表如何提高工作效率？样式表（Style Sheets）定义如何显示 HTML 元素。
样式通常保存在外部的.css文件中，并且可以被多个.html文件所引用，所以外部的样式表可以一处修改，多处协同影响。
CSS的使用方法一共有三种：
标签内属性定义...内部定义
外部定义
/* style.css */
body {
background: red;
}
外部定义可以多个样式表，书写多个标签引用即可。
那“层叠”指的是什么？样式表允许多种方式规定样式信息。
HTML元素属性中
HTML的头元素中
外部的CSS文件中
同一个文档引用多个外部样式表
那么就容易遇到一个问题：“当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？”
这就是一种层叠了，即多重样式将层叠为一个。
在这个层叠过程中，就需要一种层叠次序，来选择最后到底选择哪一个样式：
最高 —— 内联样式，即 HTML 元素内部
高 —— 内部样式表，即标签内部
中 —— 外部样式表
最低 —— 浏览器缺省样式
拥有高次序的样式会覆盖低次序的样式定义。
入门CSS 基础语法CSS规则 由两个主要部分构成：选择器，以及声明。
selector {
declaration1;
declaration2;
...
declarationN;
}
选择器（selector）用于选择需要改变的 HTML 元素
声明（declaration）定义需要改变的属性和值，每条声明由一个属性和一个值组成（property: value）。
例如：
h1 {
color: red;
font-size: 14px;
}
将元素内的文字颜色定义为红色，同时字体大小设置为14像素。
内容引用：CSS 基础语法
语法补充除了基础语法，还有一些需要补充的内容。
内容引用：CSS 高级语法
选择器分组被分组的选择器可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
使用逗号将需要分组到一组的选择器连接在一起即可。
样式继承根据CSS，子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
上述规则说明，元素将使用Verdana字体（如果访问者系统中有的话）。
通过CSS继承，子元素将继承最高级元素（上面的例子是）所拥有的属性。这里的子元素指的就是在标签内声明的那些所有标签(其实并不一定是所有，具体取决于浏览器支持度)。
但是在使用CSS继承规则时，如果不希望一个特定子元素继承该CSS，则再说明一条特殊规则来覆盖即可（这部分涉及到选择器优先级问题，将在后面说明）。
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
CSS 派生选择器
依据元素的位置关系来定义样式。
CSS1称其为上下文选择器（contextual selectors），CSS2称其为派生选择器。
例子：
li strong {
font-style: italic;
font-weight: normal;
}
我是粗体字，不是斜体，因为这个规则对我不起作用
- 我是斜体字。这是因为 strong 元素位于 li 元素内。
- 我是正常的字体。
只有 li 元素中的 strong 元素的样式为斜体字，这样无需为需要修饰的 strong 元素多带带定义 class或者id，代码更加简洁。
派生选择器还有更加深入的内容：
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
内容引用：CSS 派生选择器
CSS id选择器为标有 特定id 的 HTML 元素指定特定的样式。
id选择器以"#"来定义。
#red { color: red; }
#green { color: green; }
这个段落是红色。
这个段落是绿色。
之所以叫特定的，就是因为 id属性 只能在每个HTML文档中出现一次。
在现在布局中，id选择器常常用于建立派生选择器。
#sidebar p {
...
}
样式只会应用于出现在id是sidebar的元素内的段落。
内容引用：CSS id 选择器
CSS 类选择器类选择器的功能可以简单看成是：能给多个元素相同id的id选择器，只不过这里不再是用id了，而是用class。
在CSS中，类选择器以一个点号显示。
.center {
text-align: center;
}
所有拥有center类的HTML元素都会应用这个样式。
This heading will be center-aligned
This paragraph will also be center-aligned.
注意：类名的第一个字符不能是数字，否则无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器。
.sidebar p {
...
}
内容引用：CSS 类选择器
CSS 属性选择器对带有指定属性的 HTML 元素设置样式，不仅限于 class 和 id 属性。
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器：
/* 带有 title 属性的所有元素 */
[title] {
color: red;
}
属性和值选择器：
/* title="W3School" 的所有元素 */
[title=W3School] {
border: 5px solid blue;
}
如果一个属性有多个值，想要选中这样的元素：
/* 适用于由空格分隔的属性值 */
[title~=hello] {
color: red;
}
/* 适用于由连字符分隔的属性值 */
[lang|=en] {
color: red;
}
这种方法的一个应用是设置表单的样式：
input[type="text"] {
...
}
input[type="button"] {
...
}
...
内容引用：CSS 属性选择器
个人静态博客：
气泡的前端日记： https://rheabubbles.github.io
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117339.html
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
阅读 1545·2021-10-14 09:42
阅读 3785·2021-09-07 09:59
阅读 1268·2019-08-30 15:55
阅读 546·2019-08-30 11:17
阅读 3302·2019-08-29 16:06
阅读 450·2019-08-29 14:06
阅读 3087·2019-08-28 18:14
阅读 3605·2019-08-26 13:55
