CSS3の新しいセレクター
-
属性セレクター
-
ボックスから始める
-
<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>
-
-
ボックスで終わる
-
<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>
-
-
ボックスが含まれています
-
<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 。クラス .intro class = "intro"のすべての要素を選択します 1 #id ＃ファーストネーム id = "firstname"のすべての要素を選択します 1 * * すべての要素を選択 2 素子 p すべてのp要素を選択します 1 要素、要素 div、p すべてのdiv要素とすべてのp要素を選択します 1 要素要素 div p div要素内のすべてのp要素を選択します 1 要素>要素 div> p 親要素がdiv要素であるすべてのp要素を選択します 2 要素+要素 div + p div要素の直後のp要素を選択します 2 [属性] [目標] ターゲット属性を持つすべての要素を選択します 2 [属性=値] [target = _blank] target = "_blank"のすべての要素を選択します 2 ：リンク リンク 未訪問のリンクをすべて選択 1 ：訪問 a：訪問 訪問したすべてのリンクを選択します 1 ：アクティブ a：アクティブ クリックした瞬間にリンクを選択します 1 ：ホバー a：ホバー マウスポインタが置かれているリンクを選択します 1 ：フォーカス 入力：フォーカス フォーカスがある入力要素を選択します 2 ：最初の文字 p：最初の文字 各p要素の最初の文字を選択します 1 ：最初の行 p：最初の行 各p要素の最初の行を選択します 1 ：第一子 li：最初の子 親要素の最初の子要素に属する各li要素を選択します 2 ：前 p：前 各p要素のコンテンツの前にコンテンツを挿入します 2 ：後 p：後 各p要素のコンテンツの後にコンテンツを挿入します 2 element1〜element2 div〜p div要素を前にしてp要素を選択します 3 [属性^ =値] a [src ^ = "https"] src属性値が「https」で始まる要素をそれぞれ選択します 3 [属性$ =値] a [src $ = "。pdf"] src属性が「pdf」で終わるすべての要素を選択します 3 [属性* =値] a [src * = "abc"] src属性に「abc」部分文字列を含む各要素を選択します 3 ：nth-child（n） p：nth-child（n） 親要素の2番目の子要素に属する各p要素を選択します 3 ：nth-last-child（n） p：nth-last-child（n） 上記と同じで、最後の子要素から数えます 3 ：nth-of-type（n） p：nth-of-type（n） 親要素の2番目のp要素に属する各p要素を選択します 3 ：nth-last-of-type（n） p：nth-last-of-type（n） 上記と同じですが、最後の子要素から数えます 3 ：最後の子 li：最後の子 親要素の最後の子要素に属する各li要素を選択します 3 ：ルート ：ルート ドキュメントのルート要素を選択します 3 ：空の p：空 子要素（テキストノード、スペース、改行を含む）を持たない各p要素を選択します 3 ：目標 #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; }
-