1.用 :*-Of-Type 选择元素
不兼容IE8
假如我们有这样的htm结构
html
1 | <p>11111</p> |
给第一个 p 段落文本变红:
plaintext
1 | p:first-of-type { |
给最后一个 p 加边框:
css
1 | p:last-of-type { |
让偶数列的 p 段落背景设置黑色:
css
1 | p:nth-of-type(even) { |
此外, 还可以设置其他类型的参数
css
1 | /* only 第三个 */ |
完成的代码如下:
html
1 | <html> |
2.用 unset 做 CSS Reset
不兼容IE8
html
1 | <html> |
3.使用 :empty 区分空元素
不兼容IE8
假如我们有以下的HTML结构:
html
1 | <div class="item">1</div> |
如果我们希望对空元素和非空元素区别处理。那么有这两种方案。
使用 :empty 选择空元素:
css
1 | .item:empty { |
或者使用**:not(:empty)** 选择非空元素
css
1 | :not(:empty) { |
完成的代码如下:
html
1 | <html> |
4.每个单词的首字母大写 text-transform
CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none
参数介绍:
- none:默认。定义带有小写字母和大写字母的标准的文本。
- capitalize:文本中的每个单词以大写字母开头。
- uppercase:定义仅有大写字母。
- lowercase:定义无大写字母,仅有小写字母。
从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。
例子:每个单词的首字母大写
html
1 | <div class="title">shuliqi is boy</div> |
css
1 | .title { |