• 🏡
    首页
  • 📎
    归档
  • ✍
    日志
  • 🐂
    留言板
顶 峰 相 见
顶 峰 相 见

dfxj

各自努力,顶峰相见

12月
09
fe

css选择器

发表于 2016-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;
}

 

分享到:
Java模板方法设计模式及应用场景
volatile关键字
  • 文章目录
  • 站点概览
dfxj

trade what you see, not what you think

Github QQ Email RSS
看爆 Top5
  • 金融交易技术分析 1,244次看爆
  • Angular 变更检测 —— 它到底是如何工作的? 1,208次看爆
  • kubernetes低版本java客户端ProcessorListener容量问题 1,116次看爆
  • Angular SSR踩坑记录 1,079次看爆
  • kubernetes容器编排和调度管理 1,008次看爆

站点已萌萌哒运行 00 天 00 小时 00 分 00 秒(●'◡'●)ノ♥

Copyright © 2021 dfxj