1.基本选择器
//类选择器
.name{
};
//ID选择器
#name{
};
//元素选择器
name{
};
//通配符选择器(编译不通过)
*{
};
//包含选择器(parent下所有的同一名字的child)
parent child{
};
//子元素选择器(parent下一层所有的同一名字的child)
parent > child{
};
//邻近兄弟元素选择器(同一层级中与child1相邻的child2元素)
child1+child2{
};
//通用兄弟元素选择器(同一层级中，child1下一个（可不相邻）child2元素)
child1~child2{
};
2.属性选择器（教程）
属性选择器可以根据元素的属性及属性值来选择元素
// 包含attr属性的元素
E[attr]{
}
// 属性值只等于“value"的元素
E[attr="value"]{
}
// 有的元素属性有很多个属性值，该样式表示属性值中只要有一个是“value"的元素
E[attr~="value"]{
}
// 属性值以“value-"开头的元素
E[attr|="value"]{
}
// 属性值以“value"开头的元素
E[attr^="value"]{
}
// 属性值以“value"结尾的元素
E[attr$="value"]{
}
// 属性值字符串中包含“value"的元素
E[attr*="value"]{
}
3.伪类选择器
3.0 动态伪类选择器
// 链接没有被访问时的效果（微信小程序不支持）
xxx:link{
}
// 鼠标经过的效果（微信小程序不支持）
xxx:hover{
}
// 链接被访问后的效果（微信小程序不支持）
xxx:visited{
}
// 鼠标点下去的效果（正发生在点的那一下）
xxx:active{
}
// 获得焦点后的效果
xxx:focus{
}
3.1 状态伪类选择器
1、E:hover；2、E:action；3、E:focus；4、E:enable；5、E:disabled；6、E:read-only；7、E:read-write；8、E:checked
// 用于指定当鼠标指针移动到元素上面时元素所使用的样式；
E:hover{
}
// 用于指定元素被激活（鼠标在元素上按下还没有松开）时所使用的样式；
E:action{
}
// 用于指定元素获得光标焦点时所使用的样式，主要是在文本框空间获得焦点并进行文字输入时使用的样式；
E:focus{
}
// 设置该元素处于可用状态的样式；
E:enable{
}
// 设置该元素处于不可用状态时的样式；
E:disabled{
}
// 设置元素处于只读状态时的样式；
E:read-only{
}
// 设置元素处于非只读状态时的样式；
E:read-write{
}
// 指定表单中的radio单选按钮或者checkbox复选框处于选取状态时的样式；
E:checked{
}
// 指定页面打开时默认处于选取状态的单选按钮或者复选框样式；（即使用户将默认状态设置为选取状态的单选按钮或者复选框改为禁用状态，使用该选择器设置的样式同样有效）
E:default{
}
// 指定当页面打开时，如果一组单选按钮中任何一个选项都没有被设定为选取状态时，整组单选按钮的样式；如果用户选取了其中任何一个单选按钮，则该样式将被停止使用。
E:indeterminate{
}
// 设置元素被选中状态的样式。
E::selection{
}
3.2 选择伪类选择器
（: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{
}
// 选择某个元素的一个或多个特定的子元素（参数从1开始）
:nth-child(){
}
// 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-last-child(){
}
// 选择指定的元素（参数从1开始）
:nth-of-type(1){
}
// 选择指定的元素，从元素的最后一个开始计算
:nth-last-of-type(){
}
// 选择一个上级元素的第一个同类子元素
:first-of-type{
}
// 选择一个上级元素的最后一个同类子元素
:last-of-type{
}
// 选择的元素是它的父元素的唯一一个子元素
:only-child{
}
// 选择一个元素是它的上级元素的唯一一个相同类型的子元素
:only-of-type{
}
3.3 伪元素
（::first-line ::first-letter ::before ::after ::selection）
// 第一行
::first-line{
}
// 第一个字母
::first-letter{
}
// 文本被选择（如复制时）后的效果，CSS只能修改background与color两个属性，微信小程序不支持
::selection{
}
网友评论