始于设计 - 专于体验 - 合于沟通 - 久于转化 - 终于口碑 !      16年高端网站建设、跨境电商独立站定制开发、300+专业技术,设计团队、国家高新技术企业
外贸网站设计css的常用选择器技术详解

发布者:万邦     目录:外贸网站设计     阅读数:53241

外贸网站设计中的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}

welcome to xingbell.com

万邦外贸网站设计公司


这是一个非常的示例。但是,只使用前面计论的四种选择器就可以成功的找到许多元素。
伪类
有时候,希望根据文档结构的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪类选择器来完成。

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;}

main heading

 

first paragraph

 

second paragraph


属性选择器
顾名思义,属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某些非常有意思和强大的效果。
例如:当鼠标停留在具有title属性的元素上时,大多数浏览器会显示一个工具提示。可以使用这种特性解释某些内容的含义
但是如果不把鼠标停留在这个些元素上面,那么就没办法知道这些元素的表明意义。为了解决这个问题,我们可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式-在下面的示例中,在它们下面的加上点。还可以在鼠标停留在这个元素上时将鼠标指针必为问号,表示这个元素与众不同,从而提供更多的上下文相关信息。
abbr[title]{border-bottom:1px dotted #999}
abbr[title]:hover{cursor:help;}

 

上一篇: 手机数码外贸网站设计的要点

下一篇: 外贸网站设计中css的图片定位技术讲解