选择器

Posted 2021-02-28 111wdh

/* 高级选择器 */
/* 通配符选择器,最低,内敛,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;
}里层有浮动外层就要清除浮动