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元素 指定样式
一 伪选择器
<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元素 指定样式