`

css3学习笔记2

 
阅读更多
css笔记2


一  伪选择器
   <style type="text/css">
input[type="text"]:hover{
        background-color: greenyellow;
}
input[type="text"]:focus{
        background-color: skyblue;
}
input[type="text"]:active{
        background-color: yellow;
}
</style>

二 e:enabled选择器用来指定当元素处于可用状态时的样式
   e:disabled用来指定当元素处于不可用时的样式
     <script>
function radio_onchange()
{   
    var radio=document.getElementById("radio1");
    var text=document.getElementById("text1");
    if(radio.checked)
        text.disabled="";
    else
    {
        text.value="";
        text.disabled="disabled";
    }
}
</script>
<style>
input[type="text"]:enabled{
    background-color:yellow;
}
input[type="text"]:disabled{
    background-color:purple;
}
</style>
</head>
<body>
<form>
<input type="radio" id="radio1" name="radio"
onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio"
onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />

三  e:readonly选择器:当元素只读时用;e:read-write,当元素非只读是用:
  <style type="text/css">
input[type="text"]:read-only{
        background-color: gray;
}
input[type="text"]:read-write{
        background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
        background-color: gray;
}
input[type="text"]:-moz-read-write{
        background-color: greenyellow;
}
</style>

四 当元素checked时候的样式
   <style type="text/css">
input[type="checkbox"]:checked {
    outline:2px solid blue;
}
input[type="checkbox"]:-moz-checked {
    outline:2px solid blue;
}
五 selection,当某个元素被选中时的样式
   <style type="text/css">
p::selection{
    background:red;
    color:#FFF;
}
p::-moz-selection{
    background:red;
    color:#FFF;
}
input[type="text"]::selection{
    background:gray;
    color:#FFF;
}
input[type="text"]::-moz-selection{
    background:gray;
    color:#FFF;
}
td::selection{
    background:green;
    color:#FFF;
}
td::-moz-selection{
    background:green;
    color:#FFF;
}
</style>
</head>
<body>
<p>这是一段测试文字。</p>
<input type="text" value="这是一段测试文字。"/><p/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
<tr>
<td>测试文字</td>
<td>测试文字</td>
  
  五 通用兄弟选择器
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<title>通用兄弟元素选择器 E ~ F</title>
</head>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<div>
<p>p元素为div元素的子元素</p>
<p>p元素为div元素的子元素</p>
</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
<p>p元素为div元素的兄弟元素</p>
<hr />
<p>p元素为div元素的兄弟元素</p>
<hr />
<div>p元素为div元素的子元素</div>
<hr />
<p>p元素为div元素的兄弟元素</p>


  div ~p,表明div之后的,和div同级的p元素 指定样式
分享到:
评论

相关推荐

    S变换+Sockwell R G , Mansinha L , Lowe R P . Localization of the complex spectrum: the S transformJ

    s变换用的高斯窗函数( 高斯窗是指数窗的一种,它也无负的旁瓣,而且没有旁瓣波动,因而不回引起计算谱中假的极大值或极小值,而且高斯窗频率窗函数的主瓣比指数窗的主瓣窄,分辨率比指数窗有所提高。

    2021科大讯飞车辆贷违预测大赛冠军源码+全部资料.zip

    2021科大讯飞车辆贷违预测大赛冠军源码+全部资料.zip [资源说明] 1、该项目是团队成员近期最新开发,代码完整,资料齐全,含设计文档等 2、上传的项目源码经过严格测试,功能完善且能正常运行,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的高校学生、教师、科研工作者、行业从业者下载使用,可借鉴学习,也可直接作为毕业设计、课程设计、作业、项目初期立项演示等,也适合小白学习进阶,遇到问题不懂就问,欢迎交流。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 5、不懂配置和运行,可远程教学 欢迎下载,学习使用!

    AI图像处理工具包-一键抠图、背景切换、旧照片修复、人像漫画化、视频卡通化(Python+OpenCV+Dlib+TensorFlow).zip

    AI图像处理工具包-一键抠图、背景切换、旧照片修复、人像漫画化、视频卡通化(Python+OpenCV+Dlib+TensorFlow).zip [资源说明] 1、该项目是团队成员近期最新开发,代码完整,资料齐全,含设计文档等 2、上传的项目源码经过严格测试,功能完善且能正常运行,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的高校学生、教师、科研工作者、行业从业者下载使用,可借鉴学习,也可直接作为毕业设计、课程设计、作业、项目初期立项演示等,也适合小白学习进阶,遇到问题不懂就问,欢迎交流。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 5、不懂配置和运行,可远程教学 欢迎下载,学习使用!

    基于java+springboot+vue+mysql的远程教育网站设计与实现.docx

    基于java+springboot+vue+mysql的远程教育网站设计与实现.docx

    springboot005学生心理咨询评估系统(源码+数据库+论文+PPT+包调试+一对一指导)

    毕业设计资料,计算机毕业设计,源码,毕业论文,毕业答辩,答辩PPT,Java毕业设计,php毕业设计,ASP.NET毕业设计,毕业指导,计算机作业,php作业,java作业,ASP.NET作业,编程作业,管理系统,网站,app,毕业设计学习,Java学习,php学习,ASP.NET学习,java课程,php课程,ASP.NET课程,答辩技巧,SQLSERVER数据库,Mysql数据库,jdbc,SSM框架,SpringBoot框架,Html5,小程序

    蓝牙串口助手,可以连接HC-05等蓝牙模块,实现单片机设备与手机通讯,安卓手机,蓝牙调试助手,具有按键功能!

    蓝牙串口助手,可以连接HC-05等蓝牙模块,实现单片机设备与手机通讯,安卓手机,蓝牙调试助手,具有按键功能!

    TriLib-2-Model-Loading-Package-2.3.7.unitypackage

    TriLib 2 是一个跨平台的运行时 3D 模型导入器

    “人力资源+大数据+薪酬报告+涨薪调薪”

    人力资源+大数据+薪酬报告+涨薪调薪,在学习、工作生活中,越来越多的事务都会使用到报告,通常情况下,报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢?以下是小编精心整理的调薪申请报告,欢迎大家分享。相信老板看到这样的报告,一定会考虑涨薪的哦。

Global site tag (gtag.js) - Google Analytics