12月
09

发表于 • 被 185 人看爆

常用选择器

类型选择器

类型选择器也称为元素选择器，用来寻找特定类型的元素

img{
    max-width: 100%;
    max-height: 100%;
}
p {
    color: black;
}
后代选择器

后代选择器可用来寻找特定元素或元素组的后代，后代选择器由其他两个选择器之间的空格表示。

html .body-background{
    background-color: #f9f9f9;
}

类型选择器和后代选择器适用于那些应用范围广的一般性样式。要想寻找特定的元素，可以适用ID选择器和类选择器。

ID选择器

ID选择器由#字符表示

#intro {
    font-weight: bold;
}
类选择器

类选择器用.表示

.x-layout-5{
    width: 5%;
}

开发人员不要过度依赖ID选择器和类选择器，而是要结合使用类型、后代、ID和类这几种选择器。

让人吃惊的是只使用前面提到的这4种选择器就可以成功的找到许多元素。如果你发现你的HTML中添加了许多不必要的类，那么应该是HTML结构不合理的一个警告信号。不要给每个元素指定不同的类，而应将一个类或ID应用于他们的祖先，然后使用后代选择器定位他们。

伪类

有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态。这要使伪类选择器来完成。

a:link {
    color:blue;
}
a:visited {
    color:blue;
}
a:facus,a:hover,a:acive {
    color:blue;
}
tr:hover {
    background-coloe:red;
}
input:focus {
    background-color:yellow;
}

.clear:after {
content: ".";
height:0;
visiblity:hidden;
display:block;
clear:both;
}

:link和:visited称为链接伪类，只能应用于锚元素。:hover，:active，:focus称为动态伪类，理论上可以应用于任何元素。

通用选择器

通用选择器可能是所以选择器中最强大却最少使用的，通用选择器的作用就像通配符，它作用于所有可用元素。

*{
    padding :0;
    margin: 0;
}

高级选择器

子选择器

后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。

#nav>li {
    background-color:url(folder.png) no-repeat left top;
    padding-left:20px;
}

 

分享到：