jackyrong
- 浏览: 7855258 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi：
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng：
(转）JAVA获得机器码的实现 -
albert0707：
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707：
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle：
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
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元素 指定样式
一 伪选择器
<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元素 指定样式
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 759刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 483三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1463http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 770https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1653即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 960不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2978参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92651. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 601http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 811http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9541 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 551虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 524【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1386https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 779深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 910(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1113https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3123http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1524canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 526http://www.ruanyifeng.com/blog/ ...
相关推荐
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
CSS和CSS3学习笔记，知识全面，知识分类清晰，内涵学习3D的链接博客
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与...
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
HTML+CSS个人学习笔记
css经典学习笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
CSS3学习笔记思维导图
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
CSS3学习笔记之立体盒子，供大家一起共同分享学习。
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...
作为html 和css 学习笔记 和 复习大纲
个人css学习笔记 精华版 个人css学习笔记 精华版
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些学习笔记和练习 主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些学习笔记和练习 主要是HTML和CSS的一些学习笔记和练习主要是HTML和CSS的一些...
个人学习总结，关于css的。。。。。。。。。。。。。。。。。。。。。。。