码迷,mamicode.com
首页 > 其他好文 > 详细

选择器

时间:2020-04-17 22:00:28      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:清除   add   scroll   cti   颜色   layout   span   splay   元素   

/* 高级选择器 */
/* 通配符选择器,最低,内敛,id,类,元素,通配符 */
#{
color: #0000FF;
margin: 0px;
padding: 0px;
}
/* 选择器分组 两个选择器之间用逗号隔开,两个选择器共同的特征 */
span,p,.aa{

color: #FF0000;
}

/* 后代选择器 ,div空格a*/
div a{
color:red;             选中div中的a标签
}
/* 子代选择器,div>a */
div>a{
color: #00FFFF;           选中div标签中的a标签
}

/* 相邻兄弟选择器,选中div和离div最近的p*/
div+p{
color: #0000FF;
}

/* a标签未被访问的颜色 */
a:link{
color: #0000FF;
}
/* 已经访问的链接*/
a:visited{
color: #00FFFF;
}
/* 鼠标移上去之后*/
a:hover{
color: #FFE4C4;               常用
}
/* 鼠标点上去之后*/
a:active{
color: antiquewhite;
}

 

在span标签的前后加文字或者图标

span::before{
content: ‘文字‘;
}
span::after{
content: ‘文字‘;
}

 

 

<ul>
<li class="aa">1</li>
<li>2</li>
<li>3</li>
</ul>

.aa{
list-style-type: circle;/* 单独给ul中的某个标签加样式 */
}
ul{
list-style: disc;
}

.aa{
list-style-image: url(../img/hang.png);/* 阿里巴巴矢量图中点击下载图标中的PNG下载,然后保存到文件夹直接用 */标记图像,图像过大时需要ps改小
}
ul{
list-style: disc;
}

 

ul,li{
list-style: none;
}
li.aa{
padding-left: 10px;
background: url(../img/hang.png) no-repeat left ;   可以显示图标,不需要ps缩小
background-size: 9px;

}

#table{
width: 500px;
table-layout: fixed;/* 固定表格按照CSS的样式来执行 */

}
table td{
overflow-x: scroll;/* 单元格内元素超出范围用滚动条显示 */
}

table{
border-collapse: collapse;/* 表格的边框合并成一个 */
table-layout: fixed;/* 设置表格宽度,fixed列宽由表格宽度和列宽度设定。 */

}
/* 浮动,正常两个div是两行,如果浮动可以在一行里*/
float:right右浮动
float:left左浮动
/* 清除浮动*/
方法一:最外层加上<div class="a" style=overflow:hidden;
方法二:在最后面加<div class="b" style="clean:both">
方法三:在css中写样式
.clear::after{
content:‘ ‘;
display:block;
clear:both;
}里层有浮动外层就要清除浮动

选择器

标签:清除   add   scroll   cti   颜色   layout   span   splay   元素   

原文地址:https://www.cnblogs.com/111wdh/p/12717897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!