CSS3新增选择器
-
属性选择器
-
以box开头
-
<style> div[class^="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
以box结尾
-
<style> div[class$="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
包含box
-
<style> div[class*="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
-
结构性伪类选择器
-
:first-child 选择器：用于选取属于其父元素的首个子元素的指定选择器
-
<style> li:first-child { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:last-child 选择器：用于选取属于其父元素的最后一个子元素的指定选择器
-
<style> li:last-child { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:nth-child(n)选择器：匹配属于其父元素的第n个子元素，n可以是数字、关键字或公式
-
<style> li:nth-child(2) { background:red; } li:nth-child(even) { background:red; } li:nth-child(odd) { background:red; } li:nth-child(2n) { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:nth-last-child()选择器：匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键字或公式
-
<style> li:nth-last-child(2) { background:red; } li:nth-last-child(even) { background:red; } li:nth-last-child(odd) { background:red; } li:nth-last-child(3n) { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
-
-
:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n个子元素。n可以是数字、关键字或公式
-
<style> .wrap h2:nth-of-type(2) { background:red; } .wrap p:nth-of-type(odd) { background:red; } .wrap p:nth-of-type(even) { background:red; } .wrap p:nth-of-type(3n) { background:yellow; } </style> <div class="wrap"> <h2>标题1</h2> <p>段落文本1</p> <p>段落文本2</p> <p>段落文本3</p> <h2>标题2</h2> <p>段落文本4</p> <p>段落文本5</p> </div>
-
-
:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数。n可以是数字、关键字或公式
-
<style> .wrap h2:nth-last-of-type(2) { background:red; } .wrap p:nth-last-of-type(odd) { background:red; } .wrap p:nth-last-of-type(even) { background:red; } .wrap p:nth-last-of-type(3n) { background:yellow; } </style> <div class="wrap"> <h2>标题1</h2> <p>段落文本1</p> <p>段落文本2</p> <p>段落文本3</p> <h2>标题2</h2> <p>段落文本4</p> <p>段落文本5</p> </div>
-
-
-
状态伪类选择器
-
:checked匹配用户界面上处于选中状态的元素
-
:enabled匹配用户界面上处于可用状态的元素
-
:disabled匹配用户界面上处于禁用状态的元素
-
<style> input[type=text]:enabled { color:#f00; } input[type=text]:disabled { color:#ff0; } input[type=radio]:checked { color:#f0f; } </style> <form action="#"> <input type="text" value="请输入用户名" enabled> <input type="text" value="请输入别名" disabled> <input type="radio" checked name="sex"> <input type="radio" name="sex"> </form>-
选择器 例子 例子描述 CSS .class .intro 选择class="intro"的所有元素 1 #id #firstname 选择id="firstname"的所有元素 1 * * 选择所有元素 2 element p 选择所有p元素 1 element，element div,p 选择所有div元素和所有p元素 1 element element div p 选择div元素内部的所有p元素 1 element>element div>p 选择父元素为div元素的所有p元素 2 element+element div+p 选择紧接在div元素之后的p元素 2 [attribute] [target] 选择带有target属性所有元素 2 [attribute=value] [target=_blank] 选择target="_blank"的所有元素 2 :link a:link 选择所有未被访问的链接 1 :visited a:visited 选择所有已被访问的链接 1 :active a:active 选择点击那一刻的链接 1 :hover a:hover 选择鼠标指针位于其上的链接 1 :focus input:focus 选择获得焦点的input元素 2 :first-letter p:first-letter 选择每个p元素的首字母 1 :first-line p:first-line 选择每个p元素的首行 1 :first-child li:first-child 选择属于父元素的第一个子元素的每个li元素 2 :before p:before 在每个p元素的内容之前插入内容 2 :after p:after 在每个p元素的内容之后插入内容 2 element1~element2 div~p 选择前面有div元素的p元素 3 [attribute^=value] a[src^="https"] 选择其src属性值以“https”开头的每个a元素 3 [attribute$=value] a[src$=".pdf"] 选择其src属性以“pdf”结尾的所有a元素 3 [attribute*=value] a[src*="abc"] 选择其src属性中包含“abc”子串的每个a元素 3 :nth-child(n) p:nth-child(n) 选择属于其父元素的第二个子元素的每个p元素 3 :nth-last-child(n) p:nth-last-child(n) 同上，从最后一个子元素开始计数 3 :nth-of-type(n) p:nth-of-type(n) 选择属于其父元素第二个p元素的每个p元素 3 :nth-last-of-type(n) p:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数 3 :last-child li:last-child 选择属于其父元素最后一个子元素每个li元素 3 :root :root 选择文档的根元素 3 :empty p:empty 选择没有子元素的每个p元素（包括文本节点，空格，换行也不可以） 3 :target #news:target 选择当前活动的#news元素 3 :enabled input:enabled 选择每个启用的input元素 3 :disabled input:disabled 选择每个禁用的input元素 3 :checked input:checked 选择每个被选中的input元素 3 :not(selector) :not(p) 选择非p元素的每个元素，需要设定p元素属性 3 ::selection ::selection 选择被用户选取的元素部分 3
-
-
CSS3常用边框属性
-
border-radius
-
border-radius: top-left top-right bottom-right bottom-left ;
-
-
box-shadow
-
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow 必需，水平阴影的位置，允许负值；
-
v-shadow 必需，垂直阴影的位置，允许负值；
-
blur 可选，模糊距离；
-
spread 可选，阴影的尺寸；
-
color 可选，阴影的颜色；
-
inset 可选，将外部阴影改为内部阴影
-
-
text-shadow
-
text-shadow: h-shadow v-shadow blur color;
-
h-shadow 必需，水平阴影的位置，允许负值；
-
v-shadow 必需，垂直阴影的位置，允许负值；
-
blur 可选，模糊距离；
-
color 可选，阴影的颜色；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100%; height: 150px; background-color: red; font-size: 100px; color: #fff; /* text-shadow 1.水平位置，必需 2.垂直位置，必需 3.模糊距离 4.阴影的颜色 */ text-shadow: 10px 10px 10px black; } .box1 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: blue; font-size: 100px; color: #fff; text-shadow: 0 0 5px gold ,0 0 10px gold ,0 0 15px gold ,0 0 20px gold; } .box2 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: #ccc; font-size: 100px; color: #ccc; text-shadow: -1px -1px #fff,1px 1px #000; } .box3 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: #ccc; font-size: 100px; color: #ccc; text-shadow: 1px 1px #fff,-1px -1px #000; } </style> </head> <body> <div class="box"> hello world </div> <div class="box1"> hello world </div> <div class="box2"> hello world </div> <div class="box3"> hello world </div> </body> </html>
-
CSS3背景属性
-
多背景
-
background-image:url(图片路径)，url(图片路径)。。。；
-
<style> .box { width: 1000px; height: 500px; background-image: url(images/pic1.jpeg), url(images/pic2.jpeg); background-repeat: no-repeat; background-postion: left top, right bottom; border: 1px solid; } </style> -
background-size: length|percentage|cover|contain;
-
length: 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
-
percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
-
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也可能无法完全显示在背景区域中。
-
contain: 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
-
-
background-origin: 规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-box区域。
-
content-box 背景图像相对于内容框来定位
-
padding-box 背景图像相对于内边距来定位（默认）
-
border-box 背景图像相对于边框来定位
-
-
background-clip: 规定背景的绘制区域
-
border-box 背景被裁剪到边框盒 (默认)
-
padding-box 背景被裁剪到内边距框
-
content-box 背景被裁剪到内容框
-
-
CSS3渐变属性
-
linear-gradient
-
#grad { background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 */ }
-
-
radial-gradient
-
#grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */ background: radial-gradient(red, green, blue); /* 标准语法 */ } -
第一个属性值(形状):是可选的，一共有下面两种选择： circle 圆形 ellipse 椭圆形，默认值 第一个属性值还可以设置，发散的位置，值如下所示： at center（默认），at top,at left,at right,at bottom,at top left…… 第一个属性值还可以设置，发散的半径，关键字值如下所示： closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边 farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
-
用户界面
浏览器的私有前缀(兼容高版本，提前兼容)
-
内核 私有前缀 浏览器 Gecko -moz- 火狐 Webkit -webkit- Chrome、Safari Presto -o- Opera Trident -ms- IE -
-moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;
-
resize 属性
-
resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
-
none 用户无法调整元素的尺寸。
-
both 用户可调整元素的高度和宽度。
-
horizontal 用户可调整元素的宽度。
-
vertical 用户可调整元素的高度。
-
-
-
box-sizing 属性
-
content-box：宽度和高度分别应用到元素的内容框；即在宽度和高度之外绘制元素的内边距和边框
-
border-box：为元素设定的宽度和高度决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都不会改变盒子大小
-
-
calc函数 （实现不同单位之间换算），-两边要加空格
多列布局
-
通过CSS3,能够创建多个列来对文本进行布局一就像报纸那样
-
column-count 规定元素应该被分隔的列数
-
column-width 该属性指定一个长度值，用于规定每个栏目的宽度
-
column-gap 规定列之间的间隔
-
column-rule 属性设置列之间的分隔线
-
p { column-count: 3; column-width: 300px; column-gap: 30px; column-rule: 1px dashed red; }
-