微信小程序之样式选择器
2019-05-13 本文已影响9人
贤总_
一.基本选择器
- 类选择器 .name{}
- ID选择器 #name{}
- 元素选择器 name{}
- 通配符选择器(编译不通过) *{}
- 包含选择器 p c{}：parent下所有的同一名字的child
- 子元素选择器 p>c{}：parent下一层所有的同一名字的child
- 邻近兄弟元素选择器 c1+c2{}：同一层级中与child1相邻的child2元素
- 通用兄弟元素选择器 c1~c2{}：同一层级中，child1下一个（可不相邻）child2元素
二.属性选择器
- E[attr]：包含attr属性的元素
- E[attr="value"]：属性值只等于“value"的元素
- E[attr~="value"]：有的元素属性有很多个属性值，该样式表示属性值中只要有一个是“value"的元素
- E[attr|="value"]：属性值以“value-"开头的元素
- E[attr^="value"]：属性值以“value"开头的元素
- E[attr$="value"]：属性值以“value"结尾的元素
- E[attr*="value"]：属性值字符串中包含“value"的元素
伪类选择器
动态伪类选择器（:link :visited :hover :active :focus）
- :link：链接没有被访问时的效果（微信小程序不支持）
- :hover：鼠标经过的效果（微信小程序不支持）
- :visited：链接被访问后的效果（微信小程序不支持）
- :active：鼠标点下去的效果（正发生在点的那一下）
- :focus：获得焦点后的效果
状态伪类选择器（:enabeld :disabled :checked）
选择伪类选择器（:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type）
- :first-child：选择某个元素的第一个子元素（更确切的说为：选择第一个使用该属性的元素）
- :last-child：选择某个元素的最后一个子元素（更确切的说为：选择最后一个使用该属性的元素）
- :nth-child()：选择某个元素的一个或多个特定的子元素（参数从1开始）
- :nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
- :nth-of-type()：选择指定的元素（参数从1开始）
- :nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算
- :first-of-type：选择一个上级元素的第一个同类子元素
- :last-of-type：选择一个上级元素的最后一个同类子元素
- :only-child：选择的元素是它的父元素的唯一一个子元素
- :only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素
空内容伪类选择器（:empty）：选择的元素里面没有任何内容
否定伪类选择器（:not）：不匹配该属性的每个元素（微信小程序不支持）
伪元素（::first-line ::first-letter ::before ::after ::selection）
- ::first-line：第一行
- ::first-letter：第一个字母
- ::selection：文本被选择（如复制时）后的效果，CSS只能修改background与color两个属性，微信小程序不支持
原文：https://blog.csdn.net/weixin_39766005/article/details/82056839
