七、选择器样式优先级和常用CSS3

1、通配符选择器

*{margin:;padding:;}
tagName    元素选择器        div{width:;height:;}
.className类选择器      .box{width:;height:;}
#idName    id选择器        #box{width:;height:;}

2优先级排序:

通配符   <   标签   <   Class   <   Id
  • 优先级相同的选择器后写的样式会覆盖前面的

3、后代选择器优先级多种情况

ID选择器个数不相等,ID个数多的优先级高,后面不用比
ID选择器个数相等,则看class个数
class 个数相等 ,再看tagName 个数
#wrap ul li .list{} 和.wrap ul li #list{}优先级一样
选择器使用原则:准确的控制选中元素

4、样式的优先级

外部引入样式

引入式;

导入式
写在style标签里面的@import"mystyle.css";   
注意:外部css需要 设置编码 @charset 'UTF-8';
行内样式 > 内部样式 = 外部样式

5、常用CSS3 样式

圆角 border-radius:
四个值: 左上 右上 右下 左下
三个值: 左上 右上左下 右下 
两个值: 左上右下 右上左下 
一个值: 所有角一样的值
圆角单样式写法
    左上角border-top-left-radius: 
    右上角border-top-right-radius: 
    右下角border-bottom-right-radius: 
    左下角border-bottom-left-radius:
border-radius:50%; 圆形
盒子阴影 box-shadow
 h-shadow 水平偏移量。允许负值 ( 必需) 
 v-shadow 垂直偏移量。允许负值 (必需)
 blur 模糊半径 (可选。) 
 spread 阴影的大小 (可选。) 
 color 阴影的颜色 (可选。) 
 outset 外部阴影 (默认) 内部阴影(inset可选 )
溢出隐藏 overflow:
visible     默认值 
hidden  隐藏,并且其余内容是不可见的。 
scroll      出现滚动条 
auto        根据内容情况来决定是否出现滚动条

水平溢出隐藏 overflow-x:
垂直溢出隐藏 overflow-y:

你可能感兴趣的:(七、选择器样式优先级和常用CSS3)