当前位置:主页 > 设计学院 > 网页设计 >

CSS教程实例:学习使用复杂的CSS选择器让我们的代码和样式更加灵
栏目分类:网页设计   发布日期:2020-03-25  来源:趣素材网 - www.pic83.com 浏览次数:

CSS 教程 实例 :学习使用复杂的CSS选择器让我们的代码和样式更加灵活 2. 子选择器 子选择器用符号表示。它允许你定位某个元素的第一级子元素。 比如,如果你想匹配所有的作为你的
CSS教程实例:学习使用复杂的CSS选择器让我们的代码和样式更加灵活

 

2. 子选择器

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如,如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素,而不是可能是在div元素内的所有h2元素,也不是div的孙元素(或者更低级别的),你就可以使用下面的选择器:

div#sidebar > h2 {	font-size: 20px;	}

 

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类:链接 和用户行为。链接就是:link 和:visited,而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中,这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候,而:visited 伪类用于用户访问过的链接,也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上,而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后,:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类,这样你就可以,比如,根据用户的鼠标只是滑过或悬停的时候,为一个输入框定义不同的背景色:

input:focus {	background: #D2D2D2;	border: 1px solid #5E5E5E;	}input:focus:hover {	background: #C7C7C7;	}

 

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(比如,文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想,如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框:

input:disabled {	border:1px dotted #999;	background:#F2F2F2;	}

 

浏览器支持

Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着,使用这些选择器对网站的可用性和可访问性是很有用的,或者如果网站的用户中的大部分是使用IE而且你不想在某些细节上无视他们,最好还是保持使用通用的class和简单的选择器来迎合这些选择器。否则你会被搞疯的!

7. 否定选择器

否定选择器:not(),可以让你定位不匹配该选择器的元素

比如,如果你需要定义表单元素中的input元素,但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式,以看起来像按钮:

input:not([type="submit"]) {	width: 200px;	padding: 3px;	border: 1px solid #000000;	}

相关热词:

Copyright © 2010-2020 www.pic83.com. 趣素材网 版权所有   粤ICP备12084032号-5  壁纸设计 | 酷站欣赏 | 绘画艺术 | 平面设计 | 交互设计 | 3D艺术 | 摄影艺术 |
原创作品 经验分享 设计素材 佳作欣赏 装饰设计 设计学院 学服务器 系统下载 电脑教程