你不知道的CSS3选择器--精辟用法
来源:互联网 发布:跳蚤街二手市场软件 编辑:程序博客网 时间:2024/05/23 01:58
本文主要讲 CSS3 中三中不常用的选择器的精辟用法(E~F,E+F,E:not(selector)):
(1)E~F (选择E元素后面的所有兄弟元素F)
* 通用兄弟元素选择器类型。 * 选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。 * 在DOM结构树中,E和F所匹配的元素应该在同一级结构上。
需求:根据后台传过来的 li 标签个数,动态渲染 li 标签的宽度(flex都无法实现的效果);
一个 li : 宽度占100%
两个 li : 宽度各占50%
三个 li : 宽度各占33.333%
四个 li : 宽度各占25%
五个 li : 宽度各占20%
六个 li : 宽度各占16.66%
七个 li : 前六个各占16.66%,第七个换行且宽度占16.66%
注意:可以根据需求改变一行需要渲染li的个数,和宽度。如果一行只需要三列,则 li:nth-last-child(4) 及之后的代码就不要在再写了。
代码:
ul li { background: pink; height: 20px; float: left; } li:nth-last-child(1), li:nth-last-child(1) ~ li { width: 100%; } li:nth-last-child(2), li:nth-last-child(2) ~ li { width: 50%; } li:nth-last-child(3), li:nth-last-child(3) ~ li { width: 33.33%; } li:nth-last-child(4), li:nth-last-child(4) ~ li { width: 25%; } li:nth-last-child(5), li:nth-last-child(5) ~ li { width: 20%; } li:nth-last-child(6), li:nth-last-child(6) ~ li { width: 16.66%; }
(2)E:not(selector)
* 通用兄弟元素选择器类型。 * 选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。 * 在DOM结构树中,E和F所匹配的元素应该在同一级结构上。
代码:
<style>p:not(.bg) {background:pink;}</style><body><div><p>匹配所有不匹配简单选择符selector的元素E</p><p class="bg">匹配所有不匹配简单选择符selector的元素E</p> //没有粉色<p>匹配所有不匹配简单选择符selector的元素E</p><p>匹配所有不匹配简单选择符selector的元素E</p><p class="xxx">匹配所有不匹配简单选择符selector的元素E</p><p class="bg">匹配所有不匹配简单选择符selector的元素E</p> //没有粉色</body>
(3)E + F (选择紧贴在E元素之后F元素。)
* 相邻兄弟选择器 * 选择匹配F的元素 * 且该元素为所匹配E元素后面相邻的位置。
代码:
<style>p + p { color:blue;}</style><body> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p> //color:blue; <h3>这是一个标题</h3> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p> //color: blue;</body>
阅读全文
0 0
- 你不知道的CSS3选择器--精辟用法
- 你也许不知道的#define用法
- 你也许不知道的#define用法
- 你也许不知道的#define用法
- Android RecyclerView 你不知道的用法
- CSS3你可能不知道的冷知识
- CSS3你可能不知道的冷知识
- 你不知道的css之标签选择器效果
- 你不知道的JSON的高效率用法
- C++ std::string --- 你可能不知道的一些用法
- C++ STL 算法 --- 你可能不知道的一些用法
- 空格键常用法你不知道的有多少
- 你也许不知道的#define用法 [转载]
- C++ std::string --- 你可能不知道的一些用法
- C++ STL 算法 --- 你可能不知道的一些用法
- [转载]你也许不知道的#define用法
- C++ std::string --- 你可能不知道的一些用法
- C++ std::string --- 你可能不知道的一些用法
- Zookeeper之集群搭建-yellowcong
- Lucene 代码详解
- 完全理解 Python 迭代对象、迭代器、生成器
- 微信开发必备外网映射工具----Ngroke
- 【Caffe特征图可视化】【权重图weight】【特征图feat】
- 你不知道的CSS3选择器--精辟用法
- Android Chronometer类
- 4.3(4)
- jqgrid ajax加载
- linux 如何显示一个文件的某几行(中间几行)
- SequenceInputStream合并流
- Git版本冲突
- Caffe、TensorFlow、MXnet三个开源库对比
- 设计模式笔记之装饰模式---变继承关系为组合关系