CSS3的状态伪类选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3的状态伪类选择器</title>
 6     <style type="text/css">
 7         :enabled{
 8             background-color: blue;
 9         };
10         :disabled{
11             background-color: yellow;
12         };
13         :checked{
14             background: blue;
15             width: 100px;
16         };
17     </style>
18     <script type="text/javascript"></script>
19 </head>
20 <body>
21     <input type="text" value="tom"><br>
22     <input type="text" value="北京" disabled><br>
23     篮球<input type="checkbox" checked value="篮球"><br>
24     足球<input type="checkbox" value="足球"><br>
25 </body>
26 </html>

时间： 2024-12-22 22:50:31

CSS3的状态伪类选择器的相关文章

CSS之固定定位，绝对定位+负边距，双飞翼布局，属性选择器，伪类选择器补，状态伪类选择器，相邻全部兄弟选择器，取非选择器，em与rem，变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要负边距双飞翼布局属性选择器伪类选择器补状态伪类选择器相邻全部兄弟选择器取非选择器 em与rem 变形效果固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr

CSS3的一个伪类选择器

CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+. 描述: 伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明. 第一种:简单数字序号写法 :nth-child(number)

状态伪类选择器(E::selection)

E::selection选择器: E::selection{background:#FF6600; color:#fff;} //当文字被选中时,背景是红色,文字是白色 E::-moz-selection{background:#FF6600; color:#fff;} //为了让火狐浏览器支持 *IE6/7/8 不支持 selection:[s?'lek?n]选择.挑选状态伪类选择器(E::selection)

CSS3中的伪类选择器详解

类选择器和伪类选择器区别类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择最常见的伪类选择器未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000

CSS3中结构伪类选择器——root、not、empty、target选择器

1.root选择器将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器如果想

CSS3知识点总结----伪类选择器

1.E:target 表示当前的URL片段的元素类型,这个元素必须是E <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div{width:300px;height:200px;b

CSS3中only-child伪类选择器

<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ background:yellow; } </style> <h2>列表1</h2> <ul> <li>li1</li> </ul> <h2>列表2</h2> <ul> <li>

CSS3新增的伪类选择器

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素.:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素.:only-child p:only-child 选择属于其父元素的唯一子元素的每个

CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式

转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一