css选择器

常用选择器

类型选择器

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

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

 

# fe  css 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×