1. 属性选择器
说明：在css3中新追加了三种属性选择器分别为：[att * =val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
- [att*=val]：代表选择包含val的元素
- [att^=val]：代表选择首字符为val的元素
- [att$ =val]：代表选择结束字符为val的元素
属性选择器.PNG
注意：val为数字式，需加反斜杠
\。如：
<style>
[id$=\1]{
color:blue;
}
</style>
2. 结构性伪元素选择器(主要有4个)
- first-line：
- first-letter：
- before
- after
3. 结构性伪类选择器
备注：结构性伪类选择器在css中已存在，需要注意的是不要以系统定义好的选择器的名称来命名，比如link和hover等。
说明：在css3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
- root选择器：是将样式绑定到页面的根元素上
注意：指定root时，body下的样式只对内容区域起作用；未指定root时，body下的样式对整个页面起作用。 - not选择器：指定某元素下的某子元素不使用该样式
- empty选择器：指定当前元素内容为空白时使用的样式
- target选择器：对页面中某个target元素指定样式，该样式只在用户点击页面的超链接并跳转到target页面后起作用
4. last-child、last-child、nth-child、nth-last-child和only-child选择器
- first-child：针对一个父元素中的 第一个子元素 进行样式的指定
- last-child：针对一个父元素中的 最后一个子元素 进行样式的指定
- nth-child：针对一个父元素中的 指定序号的子元素 / 第偶数个子元素或第奇数个子元素进行样式的指定
- nth-last-child：nth-child的倒序
- only-child：针对一个父元素中的 仅一个子元素 进行样式的指定
备注：在父元素中仅一个子元素的情况下，此时last-child、last-child、nth-child(1)、nth-last-child(1)和only-child的效果一致，可使用only-child来替代它们。 - nth-of-type：
- nth-last-of-type：
(1) first-child
<view>
<text>水果</text>
<text>分类</text>
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
</view>
</view>
text:first-child{
color: red;
}
first-child.PNG
(2) last-child
<view>
<text>水果</text>
<text>分类</text>
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
</view>
</view>
text:last-child{
color: green;
}
last-child.PNG
(3) nth-child(position)、nth-child(odd)和nth-child(even)
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
<text>未知</text>
</view>
text:nth-child(2){
color: blue;
}
text:nth-child(odd){
color: salmon;
}
text:nth-child(even){
color: greenyellow;
}
ntn-child.PNG
补充：nth-child(αn+β)α：每次循环包括的样式总数β：指定样式在循环中所处的位置
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
</view>
text:nth-child(3n+1){
color: red;
}
text:nth-child(3n+2){
color: green;
}
text:nth-child(3n+3){
color: blue;
}
备注：text:nth-child(3n+3)可简写为text:nth-child(3n)。
nth-child(αn+β).PNG
(4) nth-last-child(position)、nth-last-child(odd)和nth-last-child(even)
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
<text>未知</text>
</view>
text:nth-last-child(2){
color: yellow;
}
text:nth-last-child(odd){
color: blueviolet;
}
text:nth-last-child(even){
color: green;
}
nth-last-child.PNG
(5) only-child
<view>
<view>
<text>水果</text>
</view>
<view>
<text>热性</text>
<text>温性</text>
<text>凉性</text>
</view>
</view>
/* text:nth-child(1){
color: red;
} */
text:only-child{
color: red;
}
only-child.PNG
5. UI元素状态伪类选择器
说明：在css3中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下才起作用，默认情况下不起作用。在css3中，共有17种UI元素状态伪类选择器，如E:hover、E:focus、E:active、E:checked、E:disabled、E:ready-only、E:default、E:indeterminate、E::selection、E:valid、E:invalid、E:required、E:optional、E:in-range等。其中最常用的有hover、focus、active、checked、enabled和disabled。
- (1) hover：设置鼠标经过时元素的样式(如鼠标经过input但未点击时)
- (2) focus：设置获取焦点时元素的样式(如鼠标点击input松开时)
- (3) active：设置激活时元素的样式(如鼠标点击input不松开时)
- (4) checked：设置选中时元素的样式(如鼠标选中checkbox时)
<view class="page">
<view class="page__bd">
<view class="weui-cells__title">input类型为text</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<input class="weui-cell__bd" type='text' name="name" placeholder='请输入姓名'></input>
<input class="weui-cell__ft" type='text' name="age" placeholder='请输入年龄'></input>
</view>
</view>
<view class="weui-cells__title">input类型为checkbox</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<!-- <input class="weui-cell__bd" type='checkbox'>阅读</input>
<input class="weui-cell__bd" type='checkbox'>运动</input>
<input class="weui-cell__bd" type='checkbox'>电影</input>
<input class="weui-cell__ft" type='checkbox'>音乐</input> -->
<checkbox>阅读</checkbox>
<checkbox>运动</checkbox>
<checkbox>电影</checkbox>
<checkbox>音乐</checkbox>
</view>
</view>
</view>
</view>
input[type="text"]:hover{
background-color: darkviolet;
}
input[type="text"]:focus{
background-color: aqua;
}
input[type="text"]:active{
background-color: darkorange;
}
/* input[type="checkbox"]:checked{
outline: 2px solid greenyellow;
} */
说明：微信小程序中input[type="text"]:focus的样式未起作用。
- (5) enabled：
- (6) disabled：
<view class="page">
<view class="page__bd">
<view class="weui-cells__title">input类型为radio</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<text class="weui-cell__bd" style="color: {{textColor}}">姓名:</text>
<input class="weui-cell__bd" type='text' name="name" placeholder='请输入姓名' disabled="{{isDisabled}}"></input>
</view>
<view class="weui-cell">
<radio-group class="radio-group" bindchange="radioChange1">
<radio value="red">红色</radio>
<radio value="green">绿色</radio>
<radio value="blue">蓝色</radio>
</radio-group>
</view>
<view class="weui-cell">
<radio-group class="radio-group" bindchange="radioChange2">
<radio value="enabled">输入框可用</radio>
<radio value="disabled">输入框不可用</radio>
</radio-group>
</view>
</view>
</view>
</view>
input[type="text"]:enabled{
background-color: gold;
}
input[type="text"]:disabled{
background-color: dimgray;
}
data: {
textColor : "",
isDisabled : false,
},
radioChange1(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);
var value = e.detail.value;
this.setData({
textColor: value
});
console.log('radio发生change事件，textColor为：', this.data.textColor);
},
radioChange2(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);
var value = e.detail.value;
if (value == "disabled"){
this.setData({
isDisabled: true
});
}else{
this.setData({
isDisabled: false
});
}
},
说明：微信小程序中input[type="text"]:enabled和input[type="text"]:disabled的样式未起作用。
6. 通用兄弟元素选择器
说明： 通用兄弟元素选择器用来指定位于同一个父元素之中的某一个元素之后的所有其他某个种类的兄弟元素所使用的样式。
<view>
<view>
<text>text1</text>
<text>text2</text>
</view>
<text>text3</text>
<text>text4</text>
<text>text5</text>
<text>text6</text>
</view>
view ~ text{
color: red
}
