CSS3 new selector
-
Attribute selector
-
Start with 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>
-
-
End with 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>
-
-
Contains 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>
-
-
-
Structural pseudo-class selector
-
:first-child selector: the specified selector used to select the first child element belonging to its parent element
-
<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 selector: the specified selector used to select the last child element belonging to its parent element
-
<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) selector: match the nth child element belonging to its parent element, n can be a number, keyword or formula
-
<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() selector: match each element belonging to the nth child element of its element, regardless of the type of the element, counting from the last child element. n can be a number, keyword or formula
-
<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): The selector matches the nth child element of a specific type belonging to the parent element. n can be a number, keyword or formula
-
<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): The selector matches each element of the Nth child element of a specific type belonging to the parent element, counting from the last child element. n can be a number, keyword or formula
-
<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>
-
-
-
State pseudo-class selector
-
:checked matches the selected element on the user interface
-
:enabled matches elements that are available on the user interface
-
:disabled matches elements that are disabled on the user interface
-
<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>-
Selector example Example description CSS .class .intro Select all elements of class="intro" 1 #id #firstname Select all elements with id="firstname" 1 * * Select all elements 2 element p Select all p elements 1 element，element div,p Select all div elements and all p elements 1 element element div p Select all p elements inside the div element 1 element>element div>p Select all p elements whose parent element is div element 2 element+element div+p Select the p element immediately after the div element 2 [attribute] [target] Select all elements with target attribute 2 [attribute=value] [target=_blank] Select all elements of target="_blank" 2 :link a:link Select all unvisited links 1 :visited a:visited Select all links that have been visited 1 :active a:active Select the link at the moment of clicking 1 :hover a:hover Select the link on which the mouse pointer is 1 :focus input:focus Select the input element that has the focus 2 :first-letter p:first-letter Select the first letter of each p element 1 :first-line p:first-line Select the first row of each p element 1 :first-child li:first-child Select each li element belonging to the first child element of the parent element 2 :before p:before Insert content before the content of each p element 2 :after p:after Insert content after the content of each p element 2 element1 ~ element2 div~p Select the p element with the div element in front 3 [attribute^=value] a[src^="https"] Select each a element whose src attribute value starts with "https" 3 [attribute$=value] a[src$=".pdf"] Select all a elements whose src attribute ends with "pdf" 3 [attribute*=value] a[src*="abc"] Select each a element that contains "abc" substring in its src attribute 3 :nth-child(n) p:nth-child(n) Select each p element belonging to the second child element of its parent element 3 :nth-last-child(n) p:nth-last-child(n) Same as above, counting from the last child element 3 :nth-of-type(n) p:nth-of-type(n) Select each p element belonging to the second p element of its parent element 3 :nth-last-of-type(n) p:nth-last-of-type(n) Same as above, but counting from the last child element 3 :last-child li:last-child Select each li element that belongs to the last child element of its parent element 3 :root :root Select the root element of the document 3 :empty p:empty Select each p element that has no child elements (including text nodes, spaces, and line breaks) 3 :target #news:target Select the currently active #news element 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; }
-