CSS知识点梳理(2)

2019-12-09 技术总结 css 0 评论字数统计: 3.6k(字) 阅读时长: 15(分)

Chapter 2

基本样式规则

每个规则都由两部分组成：选择器和声明块；声明块由一个或多个声明组成；每个声明则是一个属性-值对；值可以是单个关键字，也可以是多个关键字的空格（有些情况为反斜杠 /）分割列表；每个样式表由一系列规则组成。

p {
  font: 15px/15px sans-serif;  /*  font-size/line-height  */
  color: red;
}

分组

选择器分组，规则左侧可以放多个选择器，并用逗号,分割。
1
h2, h3, p { color: gray;}
通配选择器：*表示；相当于一个分组选择器，它列出文档中包含的没个元素。

声明分组，需在在每个声明的末尾是使用分号;

h1 {
  font: 18px HElvetica;
  color: purple;
  background: aqua;
}

Class 和 ID 选择器

隐含的通配选择器：当写 ID、类、属性、伪类、伪元素选择器而不附加到元素选择器时，将隐含有*通配选择器。

.waring {font-weight: bold;}
p.waring {font-weight: bold;}
*.waring {font-weight: bold;}

#first-para {font-weight: bold}
*#first-para {font-weight: bold;}

类选择器：前用点号.标记，元素的 class 属性指定一个合适的值；可应用到多个元素。
多类选择器：元素的 class 值可以是一个词列表，使用空格分割。将多个类选择器链接在一起，表示仅可以选择同时包含这些类名的元素（类名顺序不限）
1
2
3
4
5
6
<p class="urgent waring">warning and urgent</p>

.waring.urgent {
font-weight: bold;
color: red;
}
ID 选择器：ID 选择器前用井号#标记。元素的 id 属性指定一个合适的值，不允许是用空格分割的单词列表。一个 HTML 文档中，仅使用一次。

属性选择器：根据元素的属性和属性值来选择元素。分四种：简单属性选择器、精确属性值选择器、部分匹配属性值选择器、前导值属性选择器

简单选择器：选择具有某个属性的那些元素，不管该属性的值如何

h1[class] {   /* 有class属性的所用h1元素 */
  color:silver;
}

img[alt] {
  border: 3px solid red;
}

*[title] {   /* 加粗 任何含titile信息的元素 */
  font-weight: bold;
}

<a href="http://www.w3.org/" title="W3C Home">W3C</a>
a[href][title] {   /* 同时具有href和title属性的任何a元素*/
  font-weight: bold;
}

精确属性值选择器：选择包含属性为某个精确值的那些元素

a[href="http://www.w3.org"] {
  font-weight: bold;
}

a[href="http://www.w3.org"][title="W3C Home"] {
  font-weight: bold;
}

部分属性值选择器：如果属性能接受用空格分割的词列表（class 属性）,可根据元素的部分属性值而不是全部值来选择元素。

Type	Description
[foo~=”bar”]	foo 属性的值（以空格分割的单词列表）包含”bar”
[foo*=”bar”]	foo 属性的值包含子串”bar”
[foo^=”bar”]	foo 属性的值以”bar”开头
[foo$=”bar”]	foo 属性的值以”bar”结尾
[foo\|=”bar”]	foo 属性的值等于”bar”,或者以”bar-“开头

前导值属性选择器：特定的属性选择类型,比如[len|"en"]
1
2
3
*[lang|="en"] {
color: black;
}

文档结构

HTML 文档是基于元素的层次结构，该层次结构可以用“树”视图来表示。在树视图中，如果一个元素恰好位于另一个元素之上或之下的层次，则它们有父-子关系（parent-child）。如果从一个元素到另一个元素的路径经过了两个或多个层次，则它们具有祖先-后代关系（ancestor-descendant），而不是父-子关系。

后代选择器（Descendant Selectors）

在后代选择器中，规则的选择器端由两个或多个以空格分隔的选择器组成。选择器之间的空格是一种结合符（combinator）。每一个空格结合符都可以翻译：“…在…内部找到”、“…作为…的一部分”、“…作为…的后代”，但必须是从右向左阅读选择器。所以h1 em {color: gray;}可以解释为：“作为 h1 元素后代的任何 em 元素”。

后代选择器没有元素接近的概念，换句话说，文档树中的两个元素的紧密程度与规则是否适用无关。
1
2
3
4
5
6
7
8
9
10
11
div:not(.help) span {
color: gray;
}
div.help span {
color: red;
}
<div class="help">
<div class="aside">
This text contains <span>a span element </span> within.
<div/>
</div>
因为红色的规则写在后面，所以 span 元素显示红色。但实际上：div class="aside"比 div class="help"更靠近span元素。
选择子元素：选择一个元素的子元素。h1 > stong,选择作为 h1 元素子元素的所有 strong 元素。
选择相邻兄弟元素：选择一个紧跟（二者相邻）在另一个元素后的元素。且二者具有相同父元素。 h1+p,选择紧跟在 h1 元素后面的所有 p 元素，且 h1 和 p 元素有共同的父元素。另外，两个元素之间的文本内容不会阻止相邻兄弟结合符起作用。
选择跟随兄弟元素：选择一个跟随（二者可以不相邻）在另一个元素后的元素，且二者具有相同的父元素。 h1 ~ p,选择 h1 元素后面的所有 p 元素（二者之间可以有其它元素，也可以是相邻的），h1 和 p 元素有相同的父元素。

伪类选择器

组合伪类：伪类是可以链/组合在一起的,但不能是相互排斥的。比如a:link:visited，一个连接不能既是未访问，又是访问后的。
1
2
3
4
5
6
a:link:hover {
color: red;
}
a:visited:hover {
color: maroon;
}

结构化的伪类
注意：伪类始终指向它们所附加的元素，而没有其它元素，比如后代元素

1
2
3

/* CSS 玩笑，假如我结婚生子 */
#liuzhenjiang > :first-child {} /* 刘振江 的 第一个孩子 */
#liuzhenjiang:first-child {}  /* 刘振江且是父母的第一个孩子 */

根元素： :root，匹配根元素。在 HTML 中，它总是html元素
空元素： :empty,匹配空元素，没有子元素，没有任何文本节点（包括文本、空白（空格、换行符等））。:empty {display: none;},其实等同于*:empty:{display: none;}。但有个陷阱：在 HTML 的元素中，img、input,没有插入默认文本的textarea,都与之匹配。就匹配而已，img与img:empty实际上是相同的。
唯一子元素： :only-child,某类型元素是另一个元素的唯一子元素。

a[href] img:only-child {
  border: 5px solid black;
}
/* 以下3个都匹配，匹配有父元素且子元素只是img类型元素的img */

<a href="http://w3.org/"><img src="w3.png" alt="W3C">W3C</a>
<a href="http://w3.org/"><span><img src="w3.png" alt="W3C"></span>W3C</a>
<a href="http://w3.org/">A link to <span>The <img src="w3.png" alt="W3C"></span>W3C</a>

同类型元素： :only-of-type,同级中唯一个某类型的元素。（该类型元素在父元素中仅有一个）

a[href] img:only-of-type {
  border: 5px solid black;
}

<a href="http://w3.org/"><b>.</b><img src="w3.png" alt="W3C">W3C</a>
<a href="http://w3.org/"><span><b>.</b><img src="w3.png" alt="W3C"><span>W3C</a>

第一个/最后一个子元素：

:first-child,选择作为其他元素的第一个子元素的元素。以下是第一个子元素：第一个 p 元素、第一个 li 元素、第一个 strong 元素、第一个 em 元素。

<div>
  <p>These are the necessary steps:</p>
  <ul>
    <Li>Insert key</li>
    <Li>Turn key <strong>clockwise</strong></li>
    <Li>Push accelerator</li>
  </ul>
  <p>Do <em>not</em> push the brake at the same times as the accelerator</p>
</div>

最后一个子元素： :last-child,选择作为其他元素的最后一个子元素的元素。

p:first-child {
  font-weight: bold;
}
li:last-child {
  text-transform: uppercase;
}
p:last-child em {   /* 最后一个p元素内的em元素  */
  color: red;
}

p:only-child等同于p:first-child:last-child

类型的第一个、最后一个：在另一个元素中选择元素类型的第一个或最后一个。
- 类型的第一个: table:first-of-type,选择在每个包含表元素的元素中，选择第一个表元素，并跳过它后面的所有同级的表元素。
- 类型的最后一个: table:last-of-type,选择在每个包含表元素的元素最后，选择最后一个表元素。
- table:only-of-type等同于table:first-of-type:last-of-type

选择等 n 个子元素：

:nth-child(n)，在另一个元素中选择等 n 个子元素。

p:nth-child(2) {    /* 上面的HTML例子中，第2段落，不会被选中，因为等2段落不是其父元素的第2个子元素，是第3个子元素。  */
  font-weight: bold;
}
li:nth-child(2) {
  text-transform: uppercase;
}

:nth-child(3n + 1), 从第一个子元素开始，每隔 3 个选则一个子元素。n代表：0,1,2,3,4,5,6 …,3n + 1的结果是:1,4,7,10,13 …
；nth-last-child(n)，从最后一个子元素数起，朝向首元素。

可以使用 CSS 确定列表中有多少个列表项，并相应地设置起样式：

li:only-child {
  width: 100%;
}

li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
  width: 50%;
}

li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3) ~ li {
  width: 33.33%;
}

li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4) ~ li {
  width: 25%;
}

选择类型的第 n 个：p > a:nth-of-type(even),从第 2 个开始，选择所有 p 元素内所有第偶数个 a 元素。

动态伪类
应用样式是基于一些无法预测的短暂条件。比如a标签，判断访问过哪些链接的唯一方法是将文档中的链接与浏览器历史记录进行比较。
- 超链接伪类
  超链接必须是有href属性，<a>TH lives of Meerkats</a>,a:link{}无法匹配，a{}匹配。

Name	Description
:link	未访问的超链接（必须有`href`属性）
:visited	已访问过的超链接

用户操作伪类
根据用户操作改变文档的外观样式。

Name	Description
:focus	具有输入焦点的任何元素
:hover	鼠标指针所在的元素
:active	任何被用户输入激活的元素，包括链接、按钮、菜单选项、任何有`tabindex`值的元素 (例如，按钮，用户单击按下鼠标期间，直到鼠标松开)

伪类的顺序
link -> visited -> focus -> hover -> active
动态样式在实际中存在的问题
1
2
3
4
5
6
a:link, a:visited {
font-size: 13px;
}
a.hover, a:active {
font-size: 20px;
}
- 鼠标悬浮，字体变大。在触摸屏，则多亏:active。
- 鼠标悬浮，字体变大，必须要重新绘制文档，迫使链接后面的所有内容回流（reflow）。
UI 状态伪类
基于用户界面元素的当前状态进行样式化。

Name	Description
:enabled	启用的用户界面元素，可以输入
:disabled	禁用的用户界面元素，不能输入
:indeterminate	状态不确定的元素，单选、复选框既没有选中也没有不选中，由 DOM 脚本设置
:default	默认选择的单选、复选框或者选项
:valid	通过有效性校验的 input、form 元素
:invalid	未通过有效性验证的 input、form 元素
:in-range	用户输入的值，在最小值~最大值之间
:out-of-range	用户输入的值，不在最小值~最大值之间
:required	必须由用户输入来设置值的表单元素
:optional	不需设置值的表单元素，即没有 required 属性
:read-write	y 用户可编辑的表单元素 HTML 元素有 contenteditable 属性
:read-only	用户不可编辑的表单元素

目标伪类（:target）
- 片段标识符：Some URIs refer to a location within a resource. This kind of URI ends with a “number sign” (#) followed by an anchor identifier (called the fragment identifier).一些 uri 指向本地资源，这种 uri 以#结尾，后跟一个锚标识符。
- 带有片段标识符的 uri 链接到文档中的某个元素，即目标元素.示例如下:URI 链接到 HTML 文档中名字是p1的锚。
1
2
3
4
<a href="http://youwebsite.com/html/demo.html#p1">
<a href="#p1">Jump to the first paragraph! </a>

<p id="p1">You can target this paragraph using a URL fragment</p>
语言伪类(:lang())
基于语言来选择元素，:lang(fr)伪类与[lang|='fr']属性选择器是等价的；但使用伪类选择器它是语言信息来源有多个，属性选择器必须是该元素有 lang 属性。
1
2
*:lang(fr) {font-style:italic;}
*[lang|='fr'] {font-style:italic;}
否定伪类(:not())
:not()是附加到一个元素上，括号内填写一个简单选择器(simple selector).
- simple selector:一个没有祖先-后代关系的选择器。包括 type selector(Element type selector,元素选择器),universal selector（通配选择器）, attribute selector（属性选择器）, class selector（类选择器）, ID selector（ID选择器）, or pseudo-class（伪类选择器）

伪元素选择器

伪元素将虚构的元素插入到文档中。使用双冒号(::first-letter)语法，同伪类选择器（单冒号 :hover）区分。伪元素选择器只能出现在选择器末尾，p::first-letter em是不合法的。

Name	Description
::first-letter	非内联元素的第一个字母或第一个标点符号
::first-line	元素中的第一行文本
::before	在元素前插入生产的内容并设置其样式
::after	在元素后插入生产的内容并设置其样式

h2::before {
  content: ']]';
  color: silver;
}

::first-letter 和 ::first-line限制(样式属性)

::first-letter	::first-line
All font properties	All font properties
All background properties	All background properties
All text decoration properties	All margin properties
All inline typesetting properties	All padding properties
All inline layout properties	All border properties
All border properties	All text decoration properties
box-shadow	All inline typesetting properties
color	color
opacity	opacity

本文链接： https://better-jiang.github.io/2019/12/09/CSS%E7%9F%A5%E8%AF%86%E7%82%B9%E6%A2%B3%E7%90%86-2/

版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！

爱学兮Front End & Vue & TypeScript

前端狗，偶尔思考，间歇式码字