z-index只适用于已定位的元素：即拥有relative、absolute或者fixed的元素。所以z-index是一种依赖属性，依赖position属性。
行内元素：b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
多行文本省略号显示：
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
CSS 级联
div#test span { color: green; }
特异性是应用于给定 CSS 声明的权重，由匹配选择器中每个选择器类型的数量决定 当多个声明具有相同的特异性时，CSS 中找到的最后一个声明将应用于元素。
特殊性仅适用于多个声明针对同一元素的情况。
根据 CSS 规则直接目标元素将始终优先于元素从其祖先继承的规则。
以下选择器类型列表按特异性增加：
类型选择器（例如，h1和伪元素（例如，::before）。
类选择器例如.example、属性选择器（例如[type="radio"]和伪类例如:hover。
ID 选择器例如#example。
通用选择器 ( *)、组合器 ( +, >, ~, ' ' , ||) 和否定伪类 ( :not()) 对特异性没有影响。（但是，内部 声明的选择器:not()确实如此。）
添加到元素的内联样式（例如，style="font-weight: bold;"）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。
[id="someElement"] p {
color: blue;
}
p.awesome {
color: red;
}
将 id 作为属性选择器的一部分而不是作为 id 选择器包含在内，使其具有与类相同的特异性。上面的两个选择器现在具有相同的权重。在特殊性平局中，最后定义的规则获胜。
特异性基于选择器的形式。在以下情况下，*[id="foo"]即使选择器选择了一个 ID，选择器也会被视为属性选择器，以确定选择器的特殊性。
以下 CSS 样式...
*#foo {
color: green;
}
*[id="foo"] {
color: purple;
}
复制到剪贴板
...与此标记一起使用时 ...
<p id="foo">I am a sample text.</p>
I am a sample text.
...最终看起来像这样：
这是因为它匹配相同的元素，但 ID 选择器具有更高的特异性。
树邻近无知
元素与给定选择器中引用的其他元素的接近程度对特异性没有影响。以下样式声明...
body h1 {
color: green;
}
html h1 {
color: purple;
}
...使用以下 HTML ...
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
Here is a title!
...将呈现为：
这是因为这两个声明具有相等的选择器类型计数，但html h1选择器是最后声明的。
CSS 语言有规则来控制在发生冲突时哪个选择器更强。这些规则称为级联和特异性。在下面的代码块中，我们为p选择器定义了两个规则，但段落文本将是蓝色的。这是因为将段落文本设置为蓝色的声明稍后出现在样式表中。较晚的样式替换样式表中较早出现的冲突样式。这是级联规则。
当一个属性与一个值配对时，这种配对称为CSS 声明。CSS 声明可以在CSS 声明块中找到。在下面的示例中，突出显示标识 CSS 声明块。
CSS 声明块与选择器配对以生成CSS 规则集（或CSS 规则）
一些属性如font、background、padding、border和margin被称为速记属性。这是因为速记属性在一行中设置了多个值。
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
相当于：
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
例如，如果我们想选择类为“a”的列表项，它们是 a 的直接子项<ul>
ul > li[class="a"] { }
如果你想选择一个元素的兄弟，即使它们不直接相邻，那么你可以使用一般的兄弟组合器 ( ~)。要选择<img>元素之后任何位置的所有元素<p>，我们会这样做：
p ~ img
如果你想选择一个元素的兄弟，即使它们不直接相邻，那么你可以使用一般的兄弟组合器 ( ~)。要选择<img>元素之后任何位置的所有元素<p>，我们会这样做：
p ~ img
网友评论