当前阅读教程:微信小程序设计教程 > 属性选择器 | |||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
上一篇: 派生选择器 | 下一篇: 后代选择器 | ||||||||||||||||
CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。 1.基础语法属性选择器可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。 下面的例子为带有 title 属性的所有元素设置样式,代码示例 如下: [title] { color:red; } 下面的例子为 title="W3School" 的所有元素设置样式,代码示例 如下: [title=W3School] { border:5px solid blue; } 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值,代码示例 如下: [title~=hello] { color:red; } 下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值,代码示例 如下: [lang|=en] { color:red; } 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用,代码示例 如下: input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } 选择器的值参见表6-1。 表6-1 CSS选择器的值及说明
2.小程序应用根据基础语法,下面在微信小程序中实现,使用属性选择器,设定input组件不同type值里面value字体的颜色。 .wxml文件代码示例 如下: <view> <input type='text' placeholder='文本1' value='文本1' /> <input type='number' placeholder='文本2' value='文本2'/> </view> .wxss文件代码示例 如下: [type='text'] { color: orange; } [type='number'] { color: red; } 效果如图6-3所示。 |
|||||||||||||||||
上一篇: 派生选择器 | 下一篇: 后代选择器 |