选择器类型

2016-07-26  本文已影响13人  DRBIN

/*div{

border: 1px solid red;

width:400px;

padding: 20px;

margin:50px auto;

background-color: green;

}*/通用选择器

div{

margin: 20px auto;

}元素选择器

#div1{

background-color: pink;

color: gray;

width: 200px;

height: 300px;

}ID选择器

#div2{border: 2px dashed red;

width: 200px;

height: 200px;}ID选择器

.map{

font-size: 12px;

color: gray;

height: 36px;

line-height: 36px;

border: 2px solid blue;

width: 500px

}类选择器

span{

font-size: 12px;

color: red;

}

.mys1,.mys2,.mys3{

background-color: yellow;

}群组选择器

ul li{

color:blue;

text-decoration:overline;

}

ul li a{

color:blue;

text-decoration:overline;

}后代选择器

body{

}类型选择器

a:hover{

}伪类选择器

div>p{

}子元素选择器

伪类选择器

链接伪类

link  适用于未访问的链接

visited  适用于饭访问的链接

动态伪类

hover适用于鼠标悬停在HTML元素上时

active 适用于html元素被激活时

focus适用于HTML元素获取焦点时

选择器优先级

内联样式大于ID选择器大于伪类选择器大于元素选择器

overflow:当内容益处框内时如何显示

scroll  滚动条

hidden 隐藏

inherit

规定应该从父元素继承 overflow 属性的值。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

visible

默认值。内容不会被修剪,会呈现在元素框之外。

/*border-radius边角: 10px 15px 20px 25px;上右下左*/

/*border-radius: 20px上下 50px右左*/

/*border-radius: 10px 20px 50px ;上 右左 下*/

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:必须,为水平阴影的位置

v-shadow:必须,为垂直阴影的位置

blur:可选,模糊距离

spread  阴影的尺寸

color 阴影颜色

inset  将外部阴影outset改为内部阴影

outline轮廓

outline width  style  color;

outline:0px;

-webkit-border-image:url(border.jpg) 27 stretch;拉伸

/*火狐*/

-moz-border-image:url(border.jpg) 27 stretch;

/*欧朋浏览器*/

-o-border-image:url(border.jpg) 27 stretch;

border-image:url(border.jpg) 27 stretch;

/*所以浏览器*/round圆、循环

上一篇 下一篇

猜你喜欢

热点阅读