CSS-Study-notes0

• 导航 (返回顶部)
  • 1. google搜索关键字
    • 1.1 w3schools.com
    • 1.2 developer.mozilla.org
    • 1.3 w3.org
    • 1.4 更多
    • 1.5 搜索截图
  • 2. 某度搜索同样关键字截图
  • 3. 小结

1. google搜索关键字
 1.1 w3schools.com
 1.2 developer.mozilla.org
 1.3 w3.org
 1.4 更多
 1.5 搜索截图
2. 某度搜索同样关键字截图
3. 小结

1. google搜索关键字

nth-child(even) nth-child(odd)

1.1 w3schools.com

https://www.w3schools.com/cssref/sel_nth-child.asp
奇数和偶数是关键字，可用于匹配索引为奇数或偶数（第一个孩子的索引为1）的子元素。
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

使用公式（an + b）。说明：a表示周期大小，n是计数器（从0开始），b是偏移值。
p:nth-child(3n+0) { background: red;}

1.2 developer.mozilla.org

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
tr:nth-child(2n+1) 表示HTML表格中的奇数行。
tr:nth-child(odd) 表示HTML表格中的奇数行。
tr:nth-child(2n) 表示HTML表格中的偶数行。
tr:nth-child(even) 表示HTML表格中的偶数行。

1.3 w3.org

https://www.w3.org/Style/Examples/007/evenodd.en.html
（COL可以用于样式以外的其他用途，但是在这种情况下，我们需要的是存在COL元素。）以下规则将第一列的背景设为黄色，然后将第二列从第三列开始的背景设为灰色。 ：
<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>'94<th>'95<th>'96...

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

1.4 更多

https://www.w3school.com.cn/cssref/selector_nth-child.asp
https://api.jquery.com/nth-child-selector/
https://www.runoob.com/
...

1.5 搜索截图

2. 某度搜索同样关键字截图

3. 小结

某度搜索的结果第一页都是各种blog的文章，这些文章都是个人学习记录的点滴，不系统，当然能找到你要的答案，但仅此而已。
G搜索的结果是系统教学的相关页面，打开就可以看到该知识点在所属技术中的位置，可以方便的扩展学习。
想要学习使用某度搜索时常会带你绕弯...