Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于CSS中:nth-child深层用法 #62

Open
Hibop opened this issue Jun 22, 2019 · 0 comments
Open

关于CSS中:nth-child深层用法 #62

Hibop opened this issue Jun 22, 2019 · 0 comments

Comments

@Hibop
Copy link
Owner

Hibop commented Jun 22, 2019

:nth-child(x*n + y) (n>=0整数, x, y整数)

  1. x = 0 选择的是第y个标签
// 选取第3个元素 【从第一个开始,非数组从第0开始】
ul.container li:nth-child(3) {
 // todo
} 
  1. x < 0 选择的是大于0 、小于等于y的标签
    负方向选取

  2. x = 1 选择的大于等于y的标签

li:nth-child(n+6) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
  1. x > 1 选择 基数位偶数位 或者隔x取第y
  • :nth-child(odd) --- :nth-child(2n+1) 基数位
  • :nth-child(even) --- :nth-child(2n)偶数位
  • :nth-child(3n+1) 隔三位选第一个
  1. 可以多层限制
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)
// 大于1小于9的偶数位
:nth-child(-n+8):nth-child(n+2):nth-child(even)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant