css3学习笔记（二）

ui元素状态伪类选择器

E：checked  选中

E:enabled    可修改

E:disabled
不可修改

start：

<input   id="" value=""  disabled><!--input的默认状态具有enabled属性>

<input id="" value="radio" name=“sex”    ><>

<input id="" value="radio" name=“sex”    ><>

<input id="" value="radio" name=“sex”    ><>

<style>

 input:disabled{background:yellow;color:green}

input:enabled{bockground:#abcdef;}

input：check +span{background：red}

</style>

end

<style>
input:disabled{background:yellow;color:green}
input:enabled{background:#f90;color:red}
input:checked+span{background:red}

/*以上三个选择器都是针对表单做的提升修改*/
</style>

<form method="post" action="#">
<fieldset>
<legend>disabled和enabled</legend>
<ul>
<li>
<label>
<input type="text" name="id" value="99" disabled /><span>ID</span>
</label>
</li>
<li>
<label>
<input type="text" name="user" value=""  />
<!--input的默认状态具有 enabled属性-->
<span>昵称</span>
</label>
</li>
<li>
<label>
<input type="text" name="pwd" value="" enabled />
<span>密码</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(单选按钮)</legend>
<ul>
<li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(多选按钮)</legend>
<ul>
<li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>

checked属性在单选和多选按钮中用到的 

二。属性选择
99f0
器

E[att^="值"]选中已指定值开头的属性的元素

E[attr$='值']选中已指定值结尾的属性的元素

E[att*="值"]选中包含指定值字符的属性的元素

三。伪对象选择器

E::first-letter  选择第一个字

E::first-line
选择第一行

E::before

E::after

E::selection 改变选中状态，浏览器默认的选中状态是蓝色