代码：

<!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属性选择器应用的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  3. CSS：CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  4. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

  5. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

  6. CSS 属性选择器(八)

    一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...

  7. CSS笔记（二）CSS属性选择器

    对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...

  8. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  9. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  10. css 属性选择器

    css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...

随机推荐

  1. Go语言中的HTTP

    Go中的http使用 package main import ( "fmt" "net/http" "io/ioutil" "st ...

  2. HDU 5530：Pipes Selection

    题意: 给定长度为\(L\),元素总和为\(S\)的非负整数序列\(A\),对于每一个\(1 \leq i \leq S\),求出:所有满足\(\sum_{j=l}^rA_j=i\)的二元组\((l, ...

  3. 虚拟现实-VR-UE4-认识UE4

    VR的火热,让每个人都想参与一下, 公司在展会上面搞了一个VR的Demo,关注度超出预期,使得公司高层决定来个VR项目 所以 关于UE4 百度百科地址:http://baike.baidu.com/l ...

  4. 推荐5个机器学习Python 库，国内外评价超高

    机器学习令人无比神往,但从事这个工作的人可能并不这么想. 机器学习的工作内容往往复杂枯燥又困难——通过大量重复工作进行提升必不可少: 汇总工作流及传输渠道.设置数据源以及在内部部署和云部署的资源之间来 ...

  5. Java实现网页截屏功能（基于phantomJs）

    公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...

  6. VC++之运算符重载简单小结

    封装继承和多态是面向对象三大基本支柱.在面向对象系统中有两种编译方式:静态联编和动态联编静态联编:也叫早期联编:指系统在编译时就决定如何实现某一动作,提供了执行速度快的优点.动态联编:也叫滞后联编:指 ...

  7. PostgreSQL 建库建表脚本

    1.创建角色(create_role.sql) drop role if exists "kq_acs";create role "kq_acs" login ...

  8. tomcat中配置JNDI方法

    1.项目中spring的数据源配置: <bean id="dataSource" class="org.springframework.jndi.JndiObjec ...

  9. PHP+IIS上传大文件

    最近刚接触IIS服务器,在使用php上传大文件的时候,遇到了一些问题.通过查阅网上资料进行了总结,希望对各位有帮助. 第一步,检查PHP的配置. 打开php.ini配置文件 1.file_upload ...

  10. 微信小程序-腾讯地图显示偏差问题

    原文地址: http://fanjiajia.cn/2018/08/30/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E8%85%BE%E8%AE%A ...