常用选择器

笔记

一、选择符

1、标签选择符：

      标签名{ css样式属性 }

2、Id选择符：

      #id值{ css样式属性 }

3、类选择符

      .class值{ css样式属性 }

4、属性选择符

      [属性名]

      [alt=”1”]               设置属性名为alt,值为1的元素

      [alt][title]              同事设置了阿勒泰和title属性的元素

      [属性名^=”属性值”]     指定属性值是起始字符的元素

      [属性名$=”属性值”]     指定属性值是结束字符的元素

      [属性名|=”属性值”]     以该属性值开头并以空格分隔的元素

      [属性名~=”属性值”]     以该属性值开头并以’—’分隔的元素

5、群组选择符

     h1,p,ul{   }             用逗号分隔

6、后代选择符

     div p img{  }            在div标签中的p标签中的img元素

7、同辈选择符

     同级相连用+号，同级不相连用~号

1、伪类选择器

     ul:first-of-type  选中第一个

     ul:last-of-type  选中最后一个

     ul:nth-of-type( )  从1开始/2n（even）选中偶数/2n-1(odd)选中奇数

     ul:nth-last( )  倒数选中元素

2、表单选择器

     from:focus   获取获得焦点的元素

3、行内样式 > id选择符# > 类选择符· > 标片选择符

三、内外边距

10、内边距（padding）

       Padding(上下  左右)       padding(上 右 下 左）

10、外边距（margin）

       margin-left=”10px”    right右   top上   bottom下

       margin(0px auto) 居中

三、边框

三个参数：宽度 样式 颜色

样式：sold实线、double双线、dashed虚线、dotted点虚线

border-top:   上边框    。。。。。。。。

border:none   消除边框线

border-radius:50px;    设置圆角

box-shadow:x轴 y轴 宽度 颜色 inset（内阴影）            设置边框阴影

四、实例