CSS样式选择器

CSS样式选择器

一.基本选择器

类选择器 .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：链接没有被访问时的效果（微信小程序不支持）
: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两个属性，微信小程序不支持

posted @ 2020-01-15 10:13  LSKReno  阅读(168)  评论(0)  编辑  收藏  举报