css 选择器

基本选择器
  • 通配符选择器(*)
    • 用来选择所有元素  * {}
    • 也可以选择某个元素下的所有元素  .dov*{}
  • 元素选择器(E) li {}
  • 类选择器(.class)
  • ID选择器(#id)
  • 群组选择器(selector1,selector2,...,selectorN)并集
 
层次选择器
  • 后代选择器(E F)
  • 子元素选择器(E > F)
  • 相邻兄弟元素选择器(E + F)
  • 通用兄弟选择器(E ~ F)
 
属性选择器
  • E[attr]  用于选取带有指定属性的元素,也可以使用多属性进行选择元素E[attr1][attr2]
  • E[attribute=value]  用于选取带有指定属性和值的元素,属性和属性值必须完全匹
  • E[attribute~=value]  选取属性值中包含指定词汇的元素
  • E[attribute^=value]  匹配属性值以指定 value 值开头的每个元素
  • E[attribute$=value]  匹配属性值以指定 value 值结尾的每个元素
  • E[attribute*=value]  匹配属性值中包含指定 value 值的每个元素
  • E[attribute|=value]  选择 attr 属性值等于 value 或以 value- 开头的所有元素
 
伪类选择器
  •  a:link
  • a:visited
  •  a:hover
  •  a:active
 
UI元素状态伪类选择器
  • ":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类,这些主要是针对于 HTML 中的 Form 元素操作
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 选择器

上一篇:微信小程序登录


下一篇:css盒模型