正在加载图片...
5.伪类选择器 有时候,希望根据文档结构之外的条件对元素应用样式,如表单元素或者链接的状态。这就 需要通过伪类选择器来完成 /*将未访问的链接设为蓝色* a: link color: blue; /*将已访问的链接设为绿色+/ a: visited[ color: green; /★将鼠标移到链接上时以及点击链接时的颜色设为红色*/ a: link[ color: red; 1 /*将表格的行在鼠标移入时的背景颜色设为红色* tr: hover background-color: red /*当激活 input元素时将其背景颜色设为黄色+ input: focus background-color: yellow; ink和: visited称为链接伪类,只能应用于锚元素(<a>)。: hover、:actⅳve和: focus称为 动态伪类,理论上可应用于任何元素。但在一些包括IE6在内的老式浏览器只注意应用于锚 链接的: active和: hover选择器,完全忽略: focus。CSS2.1版本不仅有上述伪类,更多的 伪类(但很少使用)定义可以参考W3C官方的规范。 6.高级选择器(选看) CSS2.1定义了许多其他有用的选择器。可是包括IE6在内的一些老式浏览器并不支持这 些高级选择器。不过如果使用了老浏览览器所不支持的选择器,那么相应的规则会被忽略 并不影响其他规则。由于考虑到IE6的市场占有率,采用高级选择器就意味着忽视掉大量的 访客。所以,在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 ◆子选择器和相邻同胞选择器 后代选择器选择第一个元素的所有后代,而子选择器使用">"来只选择元素的直接后代。语 法如下 parent > child property: value;) 例如对于HTML结构 <ul id="nav"> <li>Home</li> <li>Services <li>Design</li> </u1>5. 伪类选择器 有时候,希望根据文档结构之外的条件对元素应用样式,如表单元素或者链接的状态。这就 需要通过伪类选择器来完成。 /* 将未访问的链接设为蓝色 */ a:link { color: blue; } /* 将已访问的链接设为绿色 */ a:visited { color: green; } /* 将鼠标移到链接上时以及点击链接时的颜色设为红色 */ a:link { color: red; } /* 将表格的行在鼠标移入时的背景颜色设为红色 */ tr:hover { background-color: red; } /* 当激活input元素时将其背景颜色设为黄色 */ input:focus { background-color: yellow; } :link和:visited称为链接伪类,只能应用于锚元素(<a>)。:hover、:active和:focus称为 动态伪类,理论上可应用于任何元素。但在一些包括IE6在内的老式浏览器只注意应用于锚 链接的:active和:hover选择器,完全忽略:focus。CSS 2.1版本不仅有上述伪类,更多的 伪类(但很少使用)定义可以参考W3C官方的规范。 6. 高级选择器(选看) CSS 2.1定义了许多其他有用的选择器。可是包括IE 6在内的一些老式浏览器并不支持这 些高级选择器。不过如果使用了老浏览览器所不支持的选择器,那么相应的规则会被忽略, 并不影响其他规则。由于考虑到IE 6的市场占有率,采用高级选择器就意味着忽视掉大量的 访客。所以,在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 Š 子选择器和相邻同胞选择器 后代选择器选择第一个元素的所有后代,而子选择器使用">"来只选择元素的直接后代。语 法如下: parent > child { property: value; } 例如对于HTML结构 <ul id="nav"> <li>Home</li> <li>Services <ul> <li>Design</li> … </ul>
<<向上翻页向下翻页>>
©2008-现在 cucdc.com 高等教育资讯网 版权所有