css3属性总结（中）

来源：互联网发布：古筝大师软件编辑：程序博客网时间：2024/06/01 22:39

CSS3背景 background-origin

设置元素背景图片的原始起始位置。

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

CSS3背景 background-clip

用来将背景图片做适当的裁剪以适应实际需要。

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

CSS3背景 background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background-size: auto | <长度值> | <百分比> | cover | contain

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

CSS3背景 multiple backgrounds

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat,
url(http://static.mukewang.com/static/img/logo_index.png) 150px 50px no-repeat;

注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

CSS3选择器属性选择器

CSS3 结构性伪类选择器—root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>

使用方法：

                :root {
                       background:blue;
                }

“:root”选择器等同于<html>元素，简单点说：:root{background:orange} 和 html {background:orange;} 得到的效果等同。

CSS3 结构性伪类选择器—not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，

使用方法：

input:not([type="submit"]){  border:1px solid red;}div:not([id="footer"]){  background: orange;}

CSS3 结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

使用方法：div:empty {
border: 1px solid green;
}

CSS3 结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素

实例：

HTML代码：

<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand">    content for Brand</div>

CSS代码：

.menuSection{  display: none;}:target{/*这里的:target就是指id="brand"的div对象*/  display:block;}

演示结果：

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。

如下面例子：
html代码：

<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand">  content for Brand</div><h2><a href="#jake">Brand</a></h2><div class="menuSection" id="jake"> content for jake</div><h2><a href="#aron">Brand</a></h2><div class="menuSection" id="aron">    content for aron</div>

css代码：

#brand:target {  background: orange;  color: #fff;}#jake:target {  background: blue;  color: #fff;}#aron:target {  background: red;  color: #fff;}

CSS3 结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。

HTML代码：

<ol>  <li><a href="##">Link1</a></li>  <li><a href="##">Link2</a></li>  <li><a href="##">link3</a></li></ol>

CSS代码：

ol > li{  font-size:20px;  font-weight: bold;  margin-bottom: 10px;}ol a {  font-size: 16px;  font-weight: normal;}ol > li:first-child{  color: red;}

演示结果：

CSS3 结构性伪类选择器—last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

CSS3 结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素

CSS3 结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

CSS3 first-of-type选择器

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

.wrapper > p:first-of-type {  background: orange;}

这里的p是和first-of-type是在一层关系上，指的是第一个类型是p的，但是比如.wrapper：nth-child(2)就是wrapper下面的，不是在一层关系上

CSS3 nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

CSS3 last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

CSS3 nth-last-of-type(n)选择器

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

CSS3 only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

CSS3 only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

CSS3选择器 :enabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

HTML代码:

<form action="#">  <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="可用输入框"  />  </div>   <div>    <label for="name">Text Input:</label>    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />  </div></form>

CSS代码：

div{  margin: 20px;}input[type="text"]:enabled {  background: #ccc;  border: 2px solid red;}

结果演示

CSS3选择器 :disabled选择器

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

CSS3选择器 :checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

CSS3选择器 ::selection选择器

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的

从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

使用方法：

::selection{
      background: orange;
      color: green;
}
::-moz-selection{
      background: orange;
      color: green;
}

CSS3选择器 :read-only选择器

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

使用方法：

input[type="text"]:-moz-read-only{  border-color: #ccc;}input[type="text"]:read-only{  border-color: #ccc;}

CSS3选择器 :read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

CSS3选择器 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

阅读全文

0 0

css3属性总结（中）

CSS3背景 background-origin

CSS3背景 background-clip

CSS3背景 background-size

CSS3背景 multiple backgrounds

CSS3选择器 属性选择器

CSS3 结构性伪类选择器—root

CSS3 结构性伪类选择器—not

CSS3 结构性伪类选择器—empty

CSS3 结构性伪类选择器—target

CSS3 结构性伪类选择器—first-child

CSS3 结构性伪类选择器—last-child

CSS3 结构性伪类选择器—nth-child(n)

CSS3 结构性伪类选择器—nth-last-child(n)

CSS3 first-of-type选择器

CSS3 nth-of-type(n)选择器

CSS3 last-of-type选择器

CSS3 nth-last-of-type(n)选择器

CSS3 only-child选择器

CSS3 only-of-type选择器

CSS3选择器 :enabled选择器

CSS3选择器 :disabled选择器

CSS3选择器 :checked选择器

CSS3选择器 ::selection选择器

CSS3选择器 :read-only选择器

CSS3选择器 :read-write选择器

CSS3选择器 ::before和::after

CSS3选择器属性选择器