css属性选择器应用
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题</title>
<link type="text/css" rel="stylesheet" href="test.css"/>
<style type="text/css">
input[type="text"]:enabled {
background: rgba(255, 176, 38, 0.5);
} input[type="text"]:disabled {
background: rgba(35, 23, 23, 0.5);
}
</style>
</head> <body>
<script type="text/javascript">
function r() {
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");
var r3 = document.getElementById("r3");
if (r1.checked) {
r3.disabled = "";
} else {
r3.disabled = "disabled";
}
}
</script>
<input type="radio" name="ra" id="r1" onchange="r()"/>可用
<input type="radio" name="ra" id="r2" onchange="r()" checked/>不可用
<input type="text" id="r3" disabled/> </body>
</html> 运行结果简要展示:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV8AAAAxCAIAAADyXj1IAAADM0lEQVR4nO3aT2viQBiA8X7a/SJCL4HCXv0IqYdcWs1oaVMQirQjHoQU2kALi5cl5JiLugdBZPtOTPwzmXaeH3NRbOYdSJ6tSy/WACC5aHsAAI6iDgBk1AGAjDoAkFEHADLq8D104T2llOW7jjp8D23fmWiZUirPc8t33f46fHx8jMfjfr/f7/fH4/Hn56fxWrXV/5GDD3bysds95uYW+R0ELD9Xnudu1WG5XL68vEwmk/f398VisVgs3t7enp6etNbL5bLxTtIz8N+b1S9rOsnYB4fpTMekDp4v5+rw/Pw8mUz+frF50hrvZKsOJxmbOrCcWm7VIcuyx8fHPwb39/dZlslXNP92LX64/ss6dse+ubm5urq6vLy8vb3dO3bTfS0fkzp4vtyqw3A4nE6nmYHWejgcylc0PCqmx+bIL+SmsaMo+rUjiqLqsU1HqPMZC8ekDp4vt+rQ6/VeX19NdUjTtNfryVds+NjUf1nHduxOp7NbhyAIqsfe3XSzb/Xulo9JHTxfbtXh+vq6ug5hGMpXbLUO27FNdTCNvbvjdt+KAagDy+Zyqw5xHGutK75ZxHEsX7HVOmzHNn2zMI29NkTBNAN1YNlcbtVhPp+PRiNTHZRS8/lcvmKr/++wO3YURUEQdDqdTRoOG7ticpvHpA6eL7fqUJZlkiR3d3df0zAajZIkKctSvqLhvrfzu8NhY+/dV3zH5jGpg+fLrTqs1+s8zx8eHpRSWus0TdM01VorpZIkqRi03W8WB4xdswUV71AH1rmXc3VYrVZFUcxms8FgEIZhGIaDwWA2mxVFsVqtGu9kqw6Nxq4zVSPUgXWO5VwdNsqyLIpi8+eGRVGYvlDs36n5P9HHPKXHjH3aOpzkmNTB8+VoHU6wh+HPByreMf2IHYfte9ZjUgfP14+tw7reM9P0A+dz8NbnOyZ18Hz95DrgSNTB80UdYEQdPF/UAUbdbjeO4xx+s3zXUYfvgTQgpw4AHEEdAMioAwAZdQAgow4AZNQBgIw6AJBRBwAy6gBARh0AyKgDABl1ACCjDgBk1AGAjDoAkFEHADLqAEBGHQDIqAMAGXUAIKMOAGTUAYDsHy6K3SQrFto9AAAAAElFTkSuQmCC" alt="" />
css属性选择器应用的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- CSS:CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
- CSS属性选择器温故-4
1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...
- CSS 属性选择器(八)
一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...
- CSS笔记(二)CSS属性选择器
对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- css 属性选择器
css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...
随机推荐
- ChemDraw Std 14性价比最高版本,即将下架
虽然ChemDraw Std 14是ChemOffice®14的基础组件,但是基础功能涵盖全面,是教育专供产品.根据官方最新消息ChemDraw系列软件产品线将进行全面的升级,ChemOffice®1 ...
- Odoo8中安装新模块找不到的问题
为了要让系统识别出新的模块,我们需要打开用户的技术特性选项,具体在 左侧栏目->用户->administrator, 将技术特性勾选上,刷新. 然后左侧栏目->模块下面就会 ...
- elasticsearch 关联查询
父-子关系文档 父-子关系文档 在实质上类似于 nested model :允许将一个对象实体和另外一个对象实体关联起来. 而这两种类型的主要区别是:在 nested objects 文档中,所有对象 ...
- vs编译报错 BLOCK_TYPE_IS_VALID(pHead->nBlockUse)
1.重复释放内存导致,new delete和malloc free两个组合分配的堆空间都不能重复释放两次: 2.用delete或者free释放栈空间导致内存空间被破坏(栈空间内存的头部有系统写入的一些 ...
- swagger webapi控制器注释不显示
swagger是webapi文档描述及调试工具,要在asp.net mvc中使用swagger,需要安装Swashbuckle.Core这个包,安装好后会在app_start中生成SwaggerCon ...
- Mysql性能优化一:SQL语句性能优化
这里总结了52条对sql的查询优化,下面详细来看看,希望能帮助到你 1, 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2,应尽量避免在 w ...
- Laxcus大数据管理系统2.0(4)- 第一章 基础概述 1.3 节点
1.3 节点 按照我们给Laxcus集群的设计定义,Laxcus集群被分为内部和外部两个网络环境.内部网络由集群的所有权人负责实施和管理,为保证集群能够有效可靠运行,需要遵守一系列的集群部署和管理规定 ...
- COJ 2192: Wells弹键盘 (dp)
2192: Wells弹键盘 Description Wells十分羡慕和佩服那些会弹钢琴的人比如子浩君,然而Wells只会弹键盘…… Wells的键盘只有10个键,从1,2,3,……,9,0,如下图 ...
- 【tips】【词频统计】中可能用到的资源,以C++为例
前言 我不知道C#什么情况,不过C++里面,什么参数都不传时,argc=1,argv里面是当前程序名.当你传入dir时,argc=2,当你传入-e dir时,argc=3. 这个文章十分适合有一点C语 ...
- 利用vue-cli搭建项目后的目录结构
npm install -g vue-cli vue init webpack my-project(项目名称) 后的目录结构: -----build webpack配置相关 --- ...