CSS3 (一)

属性选择器

• 1. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

• .wrap a[href^="http://"]{background:orange;color:blue;}

• 2. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；

  .wrap a[title*="hubwiz"]{background:black;color:white;}

• 3. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

  .wrap a[href$="png"]{background:green;color:black;}

选择某个元素的第一个子元素<:first-child>

.wrap li:first-child {background: green; border: 1px dashed blue;}

选择某个元素的最后一个子元素<:last-child>

.wrap li:last-child {background: green; border: 2px dashed blue;}

选择某元素下的第一个同类子元素<:first-of-type>

.wrap  p:first-of-type {
   background: green;
}

选择某元素的最后一个同类子元素<:last-of-type>

.wrap  p:last-of-type {
  background: green;
}

选择某元素的一或多个特定的子元素<:nth-child()>

1. 简单数字序号写法 :nth-child(number)，直接匹配第number个元素。参数number必须为大于0的整数。

如下，把第3个p的背景设为绿色：

p:nth-child(3){background:green;}

2. 倍数写法 :nth-child(an)，匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

如下，把第2、第4、第6、…、所有2的倍数的p的背景设为蓝色：

p:nth-child(2n){background:blue;}

3. 倍数分组匹配 :nth-child(an+b)与:nth-child(an-b)，先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。

如下，匹配第1、第4、第7、…、每3个为一组的第1个p元素

p:nth-child(3n+1){background:orange;}

选择元素并倒序计算<:nth-last-child()>

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，它是从最后一个元素开始算，来选择特定元素。

如下使用:nth-last-child()选择器来选择元素并添加样式：

.wrap p:nth-last-child(4) {background: red;}

匹配其父元素中有唯一子元素的元素<:only-child>

p:only-child
{
   background:red;
}

选择没有任何内容的元素<:empty>

p:empty {
   display: none;
}

CSS3 边框

CSS3 圆角边框

border-radius：

div
{
   border:2px solid;
   border-radius:25px;
   -moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影

box-shadow：

div
{
    box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片

border-image：

div
{
     border-image:url(border.png) 30 30 round;
     -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
     -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
     -o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

CSS3 背景

调整背景图片的大小：

div
{
     background:url(bg_flower.gif);
     -moz-background-size:63px 100px; /* 老版本的 Firefox */
     background-size:63px 100px;
     background-repeat:no-repeat;
}

规定背景图片的定位区域:

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div
{
     background:url(bg_flower.gif);
     background-repeat:no-repeat;
     background-size:100% 100%;
     -webkit-background-origin:content-box; /* Safari */
     background-origin:content-box;
}

CSS3 文本效果

向文本应用阴影：

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自动换行:

word-wrap:允许对长单词进行拆分，并换行到下一行：

p {word-wrap:break-word;}