实例 如果 input 元素设置了 "readonly" 属性，设置输入框样式为黄色: input:read-only{ background-color: yellow;} 尝试一下 » 定义和使用 :read-only 选择器用于选取设置了 "readonly" 属性的元素。 表单...

实例 如果 input 元素没有设置 "required" 属性，设置其为黄色: input:optional{ background-color: yellow;} 尝试一下 » 定义和使用 :optional 选择器在表单元素是可选项时设置指定样式。 表单元素中如...

实例 如果 input 元素设置了 "required" 属性，设置其为黄色: input:required{ background-color: yellow;} 尝试一下 » 定义和使用 :required 选择器在表单元素是必填项时设置指定样式。 表单元素可以使...

实例 如果 input 元素中输入的值为合法的，设置其为黄色: input:valid{ background-color: yellow;} 尝试一下 » 定义和使用 :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。 注...

实例 如果 input 元素中的值是非法的，设置样式为红色： input:invalid{ border:2px solid red;} 尝试一下 » 定义和使用 :invalid 选择器用于在表单元素中的值是非法时设置指定样式。 注意： :in...

实例 设置底部边框颜色： p { border-style:solid; border-bottom-color:#ff0000;} 尝试一下 » 标签定义及使用说明 border-bottom-color属性设置元素的底部边框颜色。 注意 使用border-bottom颜色属性前，必...

实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);} 尝试一下 » 定义和使用 filter 属性定义了元素(通常是img)的可视效果...

实例 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： #main div{ flex:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在...

实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2) {flex-basis: 80px;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms-...

实例 让第二个元素的宽度为其他元素的三倍： div:nth-of-type(1) {flex-grow: 1;}div:nth-of-type(2) {flex-grow: 3;}div:nth-of-type(3) {flex-grow: 1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第...