css3（一）

 css3现状

1、浏览器支持程度差，需要添加私有前缀

-webkit-/*chrome  safari*/

-moz-/*Firefox*/

-ms-/*ie*/

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

基本选择器

通配符选择器：*  

*{margin：0；padding：0；}

标签选择器：div、li、p等等

类名选择器

属性选择器

 1，E[attr]

    （1）用于选取带有指定属性的元素。 */

    

    /**选择了.demo下所有带有id属性的a元素 **/

    .demo a[id] {

    }

 

    /* （2）可以使用多属性进行选择元素。

    

    *选择了.demo下同时拥有href和title属性的a元素 * */

    .demo a[href][title] {

    }

2、[attribute^=value]

a[src^="https"] 选择每一个src属性的值以"https"开头的元素

3、[attribute$=value]

a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素

4、[attribute*=value]

a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素

5、 /* ，E[attribute|=value]

这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。 */

/** 下面3个img都会被匹配到 **/

img[src|="ure"] {

 

}

 eg：

<img src="ure-0.png" alt="图1">

<img src="ure-1.png" alt="图1">

<img src="ure-2.png" alt="图1">

动态伪类选择器

使用锚点伪类设置链接样式

    a:link {color:gray;} /*链接没有被访问时前景色为灰色*/

    a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/

    a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/

    a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/

UI元素状态伪类选择器

我们把":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类，这些主要是针对于 HTML 中的 Form 元素操作，比如：

<input type="text"/> 有 enable 和 disabled 两种状态，前者为可写状态后者为不可写状态

<input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。

结构伪类选择器

:nth-child(n)

p:nth-child(2) 选择每个p元素是其父级的第二个子元素

:nth-last-child(n)

p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数

:nth-of-type(n)

p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素

:nth-last-of-type(n)

p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数

:last-child

p:last-child 指定只有选择每个p元素是其父级的最后一个子级。

:first-child

p:first-child 指定只有当<p>元素是其父级的第一个子级的样式

:only-child

选择父元素只包含一个子元素，且该子元素匹配 E 元素。

伪元素选择器

是一个行内元素，需要转换成块:display:block   float:**  position:。

必须添加content,哪怕不设置内容，也需要content:””。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

:first-letter

p:first-letter 选择每一个<P>元素的第一个字母或者第一个汉字

:first-line

p:first-line 选择每一个<P>元素的第一行

:before

p:before 在每个<p>元素之前插入内容

:after

p:after 在每个<p>元素之后插入内容

::selection

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。

颜色

/*h：色调（0~360）0为红色，120绿色，240为蓝色s：饱利度0~100%1：亮度0~100%*/
background:hsl（hue，saturation，lightness）；
background:hsla（hue，saturation，lightness,alpha）；

阴影

盒子阴影：box-shadow：x轴偏移量，y轴偏移量，模糊度，颜色；
文字阴影：text-shadow：x轴偏移量，y轴偏移量，模糊度，颜色；

文本溢出

　　white-space:nowrap;
　　　　overflow:hidden;
　　　　text-overflow:ellipsis;//省略号代替剪切文本
　　　　text-overflow:clip;//剪切文本

css边界图片border-image:url(border.png) 30 30 round（环绕）;
　　　　　　border-image:url(border.png) 30 30 stretch（拉伸）;

box-sizing:border-box;边框以内的会自动计算，margin不管用
content-box：只含边框

 

resize：none；
resize:both;
resize:vertical;垂直
resize:horizontal;水平
和overflow属性搭配伸缩使用

 

扩充：table专用

rows获取表格行，cells获取表格的每一个单元格

创建tr方法：insertRow（1）

创建单元格：insertCell（）

伪元素与伪类区别（根本区别：伪元素不存在于DOM里，伪类基于的是当前元素处于的状态）

1.伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
2.与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素