css3学习之杂项

一.背景相关

1.background-origin限制背景显示在盒子模型的区域范围,默认content-box

background需要设置background-repeat:no-repeat

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

2.background-clip将背景做剪裁,默认no-clip

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

3.background-size设置背景图片的大小

background-size: auto | <长度值> | <百分比> | cover(同100% 100%) | contain(容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止)

4.

background ： [background-color] | [background-image] | [background-
position][/background-size] | [background-repeat] | [background-
attachment] | [background-clip] | [background-origin],...

等同于

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

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

二.选择器

1.属性选择权

使用示例

/*------------------html---------------------------*/ 
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

/*------------------css---------------------------*/ 
a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2. 结构性伪类选择器 :root

:root 选择器是指元素的根元素,在html中同html

:root{background:orange}
等同于
html {background:orange;}

3. 结构性伪类选择器 :not

可以选取除了某个元素之外的所有元素

给除了footer之外的元素设置橘色背景
/*--------------------html-----------------------------*/
    <div id="header">页头</div>
    <div id="page">页体</div>
    <div id="footer">页脚</div>
/*--------------------css-----------------------------*/
div:not([id="footer"]){
  background: orange;
}

4.结构性伪类选择器 :empty

选择没有内容的元素,空格也不能有

div:empty {
  border: 1px solid green;
}

5.结构性伪类选择器 :target

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

// 点击a标签显示出来内容
-------------------css------------------------
    <h2><a href="#brand1">Brand</a></h2>
    <div class="menuSection1" id="brand1">
        content for Brand
    </div>
-------------------css------------------------
#brand1:target{/*这里的:target就是指id="brand1"的div对象*/
  display:block;
}
.menuSection1{
  display: none;
}

6.结构性伪类选择器 :first-child , last-child , nth-child ,nth-last-child , first-of-type , nth-of-type , last-of-type , only-child , only-of-type

first-child ,第一个子元素
last-child ,第二个子元素
nth-child(n) ,第n个子元素,n从1开始
nth-last-child(n) , 倒数第n个子元素,n从1开始
first-of-type , 选择元素中第一个某种类型的子元素,这个子元素不一定在第一个位置
nth-of-type(n) , 选择元素第n个是某种类型的子元素
last-of-type , 选择元素最后一个是某种类型的子元素
only-child , 选择只有一个子元素的父元素
only-of-type , 选择父元素中只有唯一一个的某种类型的元素,意义上包含only-child

ol > li:nth-child(2n){
  background: orange;
}
.wrapper > p:nth-of-type(even){
  background: orange;
}

7.结构性选择器 :enabled , :disabled , :checked

:enabled , 选择表单中可用表单元素
:disabled , 选择表单中不可用的表单元素
:checked , 选择表单中单选框和复选框被选中时的元素

input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

8.伪元素选择器 ::selection

::selection , 会改变页面级别(不用于特定元素)的鼠标选中样式,浏览器默认鼠标选中文字时是蓝色背景白色字体
火狐浏览器加前缀使用

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

9.伪类选择器 :read-only , :read-write

:read-only , 选择只读属性的元素
:read-write , 选择不是只读属性的元素

textarea:-moz-read-only{
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}
textarea:read-only {
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}