css3常见选择器

• /* 兄弟选择器【相邻选择器】 平级 只能向后找

• .box1+.box2 { color: #fff; }

• 兄弟选择器【通用兄弟选择器】 选择符合条件的所有兄弟元素

• .p1~p { color: #fff; }

• 选择有class属性的所有标签

• [class] { color: #fff; }

• 匹配属性值以指定开头的每个元素

• [class^='a'] { color: #fff; }

• 匹配属性值以指定结尾的每个元素

• [class$='a'] { color: #fff; }

• 匹配属性值中包含指定值的每个元素

• [class*="abc"] { color: #fff; }

• 匹配属于父元素中的第一个

• ul li:first-child { color: #fff; }

• 匹配属于父元素中的最后一个

• ul li:last-child { color: #fff; }

• 找到ul下面的第一个li

• ul li:first-of-type { color: #fff; }

• 否定选择器

• ul li:not(:first-of-type) { color: #fff; }

• 匹配属于其父元素中第n个子元素 子元素相对整洁（没有其他的标签乱入）
  -所有子元素排序

• ul li:nth-child(2) { color: #fff; }

• 找到指定的子元素再排序

• ul li:nth-of-type(2) { color: #fff; }

• 循环使用样式 (xn+y)
  n自然数 固定不变 css是从1开始的
  x每次循环总共包括几种样式
  y样式在循环中所处的位置

• ul li:nth-child(3n+1 { color: #fff; }

• 被选中的

• input:checked { margin: 0 50px; } input:disabled { background-color: #fcc; }

• 被用户选中的部分，只能改变背景颜色和文本颜色

• .div::selection { background-color: #fd6433; }