服务热线：0755 - 23214858发布者：万邦 目录：外贸网站设计 阅读数：68868
外贸网站设计中的css选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落、锚或标题元素，只需指定元素的名称。类型元素有时候也称为元素选择器或简单选择器。
p{color:black;} a{text-decoration:underline;} h1{font-weight:bold;}
后代选择器可用来寻找特定元素或元素组的后代。代后选择器由其他两个选择器之间的空格表示。在下面的示例中，只在作为列表项的后代锚元素上应用样式，而段落中的锚不受影响。
li a{text-decoration:none;}
这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素，可以使用ID选择器和类选择器。顾名思义，这两种选择器用于发找那些具有指定ID和类名的元素。ID选择器由一定#字符表示，类选择器由一点号表示。下面例示中的第一条规则使简介段落中的文本以粗体显示，第二条规则让日期显示为绿色；
#intro {font-weight:bold;} .datePosted{color:green;}
some text
24/3/2006
正如前面提到的许多css开发人员过度依赖类选择器和ID选择器。如果他们希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一个方式，那么他们很可以创建两个类并且在每一个标题上应用一个类。一种简单得多的方法是使用类型后。ID和类几种选择器的组合。
#mainContent h1{ font-size:1.8em} #secondaryContent h1{ font-size:1.2em}
这是一个非常的示例。但是，只使用前面计论的四种选择器就可以成功的找到许多元素。
伪类
有时候，希望根据文档结构的其他条件对元素应用样式，例如表单元素或链接的状态。这要使用伪类选择器来完成。
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
tr:hover{background-color:red;}
input:focus{background-color:yellow;}
:link和：visited称为链接伪类，只能应用于锚元素。：hover、：active、：focus称为动态伪类。理论上可以应用于任何元素。不幸的是只有现代浏览器（比如firefox）支持这种功能。
通用选择器
通用选择器可能是所有选择中最强大却是最少使用的。通用选择器的作用就是通配符，它匹配所有可用元素。与其它语言中的通配符一样，通用选择器由一个星号表示。例如下：
*{
padding:0px;
margin:0px;
}
css2中有一些高级选择器
但是这高级选择器在html5和css3来到来，以及现在各浏览器的快速更新，这些高级选择器已经可以投入使用。
如下面的例示可以用高级选择器
其样式可以这样写：
#nav li{ color:red;}
#nav li *{ coler:blue;}
有时我们还可以用相加的方法，可以使用相邻同胞选择器让顶级标题后面的第一个段落以粗体显示，同时不影响其它段落：
h1+p{font-weight:bold;}
first paragraph
second paragraph
属性选择器
顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某些非常有意思和强大的效果。
例如：当鼠标停留在具有title属性的元素上时，大多数浏览器会显示一个工具提示。可以使用这种特性解释某些内容的含义
但是如果不把鼠标停留在这个些元素上面，那么就没办法知道这些元素的表明意义。为了解决这个问题，我们可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式-在下面的示例中，在它们下面的加上点。还可以在鼠标停留在这个元素上时将鼠标指针必为问号，表示这个元素与众不同，从而提供更多的上下文相关信息。
abbr[title]{border-bottom:1px dotted #999}
abbr[title]:hover{cursor:help;}
上一篇: 手机数码外贸网站设计的要点
下一篇: 外贸网站设计中css的图片定位技术讲解
© 2008-
2024 by Wanbong Inc. All Rights Reserved. 粤ICP备14092676号