css 选择器

1 /** 下面对所不可用的文本框设置样式 **/
2 input[type="text"]:disabled {
3     cursor: not-allowed;
4 }
5 /** 下面对所选中的的复选框设置样式 **/
6 input[type="checkbox"]:checked {
7     background-color:pink;
8 }

• E:empty  选择没有子元素的元素，而且该元素也不包含任何文本节点
• E:first-child  用来选择某个元素的第一个子元素，与 E:nth-child(1) 等同
• E:last-child  选择是的某个元素的最后一个子元素，与 E:nth-last-child(1) 等同
• E F:nth-child(n) 选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）
• E F:nth-last-child(n)  选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）
• E:only-child   选择父元素只包含一个子元素，且该子元素匹配 E 元素
• E:nth-of-type(n)  类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
• E:first-of-type  类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
• E:last-of-type  类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
• E:nth-last-of-type(n)  类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
• E:only-of-type   类似于 E:only-child，只不过它选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素

• :not   匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器

1 /** 对form中所有input加边框，但又不想submit也起变化 **/
2 input:not([type="submit"]) {
3   border: 1px solid red;
4 }

•  ::first-line  选择元素的第一行
• ::first-letter   选择文本块的第一个字母，除非在同一行里面包含一些其它元素,主要运用于段落排版。
• ::before和::after  给元素的前面或后面插入内容
• 常用的便是是清除浮动  .box::after {clear: both;}
• 与"content"配合使用，可以实现许多特效
• ::selection 用来改变浏览网页选中文的默认效果
• 只能设置两个属性,一个就是 background,另一个就是 color 属性

css 选择器

原文：https://www.cnblogs.com/hjcby/p/13539034.html