CSS3新增的哪些选择器和常见的属性是哪些？ html 5 的CSS3新增的伪类选择器还包括哪些？
css3 \u65b0\u589e\u9009\u62e9\u5668\u6709\u54ea\u4e9b\uff1f\u4e00\u3001css3\u4e4b\u524d\u7684\u9009\u62e9\u5668
ID\u9009\u62e9\u5668\uff0c#
\u7c7b\u9009\u62e9\u5668\uff0c.
\u5305\u542b\u9009\u62e9\u5668(E F)
\u4f2a\u7c7b\u9009\u62e9\u5668\uff08:link,visited,hover,active,focus,first-child\uff09
\u4f2a\u5143\u7d20\u9009\u62e9\u5668\uff08::first-line,first-letter,before,after\uff09
\u901a\u914d\u9009\u62e9\u5668(.)
\u5c5e\u6027\u9009\u62e9\u5668(foo[name='martin'])
\u5b50\u5305\u542b\u9009\u62e9\u5668(E>F)
\u76f8\u90bb\u5144\u5f1f\u9009\u62e9\u5668(E+F)
\u4e8c\u3001css3\u65b0\u589e\u9009\u62e9\u5668
\u65b0\u589e\u5c5e\u6027\u9009\u62e9\u5668\uff1a
E[foo^='bar'] \u5339\u914dE\u5143\u7d20\uff0c\u8be5\u5143\u7d20\u5305\u542bfoo\u5c5e\u6027\uff0c\u4e14foo\u5c5e\u6027\u503c\u4ee5bar\u5f00\u5934
E[foo$='bar'] \u5339\u914dE\u5143\u7d20\uff0c\u8be5\u5143\u7d20\u5305\u542bfoo\u5c5e\u6027\uff0c\u4e14foo\u5c5e\u6027\u503c\u4ee5bar\u7ed3\u5c3e
E[foo*='bar'] \u5339\u914dE\u5143\u7d20\uff0c\u8be5\u5143\u7d20\u5305\u542bfoo\u5c5e\u6027\uff0c\u4e14foo\u5c5e\u6027\u503c\u5305\u542bbar\u5b57\u7b26\u4e32
\u65b0\u589e\u7ed3\u6784\u4f2a\u7c7b\u9009\u62e9\u5668\uff1a
E:root \u5339\u914d\u6587\u6863\u6240\u5728\u7684\u6839\u5143\u7d20
E:nth-child(n) \u5339\u914dE\u6240\u5728\u7236\u5143\u7d20\u7b2cn\u4e2a\u5339\u914dE\u7684\u5143\u7d20\uff0c\u975eE\u7684\u5b50\u5143\u7d20\u4e5f\u53c2\u4e0e\u6392\u5e8f\uff0c\u82e5\u7b2cn\u4e2a\u5b50\u5143\u7d20\u4e0d\u662fE\u5143\u7d20\uff0c\u5219\u8be5\u8bed\u53e5\u6ca1\u6709\u6548\u679c\uff08\u6ce8\u610f\u8fd9\u91cc\u7684n\u4ece1\u5f00\u59cb\uff09
E:nth-last-child(n) \u5339\u914dE\u6240\u5728\u7236\u5143\u7d20\u5012\u6570\u7b2cn\u4e2a\u5339\u914dE\u7684\u5143\u7d20
E:nth-of-type(n) \u5339\u914dE\u6240\u5728\u7236\u5143\u7d20\u7b2cn\u4e2a\u5339\u914dE\u7684\u5143\u7d20\uff0c\u975eE\u7684\u5b50\u5143\u7d20\u4e0d\u53c2\u4e0e\u6392\u5e8f(n\u540c\u6837\u662f\u4ece1\u5f00\u59cb\uff09\u6ce8\u610f\u533a\u522bnth-child(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
\u53e6\u5916\uff0c\u4f7f\u7528\u524d\u8981\u8003\u8651\u6d4f\u89c8\u5668\u7248\u672c\uff0c\u65b0\u589ecss3\u9009\u62e9\u5668\u5b58\u5728\u517c\u5bb9\u6027\u95ee\u9898\u3002\u5e73\u65f6\u591a\u591a\u7ec3\u4e60\uff0c\u591a\u52a8\u624b\u3002
:first-of-type p:first-of-type \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u7684\u9996\u4e2a \u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:last-of-type p:last-of-type \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u7684\u6700\u540e \u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:only-of-type p:only-of-type \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u552f\u4e00\u7684 \u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:only-child p:only-child \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u7684\u552f\u4e00\u5b50\u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:nth-child(n) p:nth-child(2) \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u7684\u7b2c\u4e8c\u4e2a\u5b50\u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:nth-last-child(n) p:nth-last-child(2) \u540c\u4e0a\uff0c\u4ece\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u5f00\u59cb\u8ba1\u6570\u3002
:nth-of-type(n) p:nth-of-type(2) \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u7b2c\u4e8c\u4e2a \u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\u3002
:nth-last-of-type(n) p:nth-last-of-type(2) \u540c\u4e0a\uff0c\u4f46\u662f\u4ece\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u5f00\u59cb\u8ba1\u6570\u3002
:last-child p:last-child \u9009\u62e9\u5c5e\u4e8e\u5176\u7236\u5143\u7d20\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u6bcf\u4e2a \u5143\u7d20\u3002
:root :root \u9009\u62e9\u6587\u6863\u7684\u6839\u5143\u7d20\u3002
:empty p:empty \u9009\u62e9\u6ca1\u6709\u5b50\u5143\u7d20\u7684\u6bcf\u4e2a \u5143\u7d20\uff08\u5305\u62ec\u6587\u672c\u8282\u70b9\uff09\u3002
:target #news:target \u9009\u62e9\u5f53\u524d\u6d3b\u52a8\u7684 #news \u5143\u7d20\u3002
:enabled input:enabled \u9009\u62e9\u6bcf\u4e2a\u542f\u7528\u7684 \u5143\u7d20\u3002
:disabled input:disabled \u9009\u62e9\u6bcf\u4e2a\u7981\u7528\u7684 \u5143\u7d20
:checked input:checked \u9009\u62e9\u6bcf\u4e2a\u88ab\u9009\u4e2d\u7684 \u5143\u7d20\u3002
:not(selector) :not(p) \u9009\u62e9\u975e \u5143\u7d20\u7684\u6bcf\u4e2a\u5143\u7d20\u3002
::selection ::selection \u9009\u62e9\u88ab\u7528\u6237\u9009\u53d6\u7684\u5143\u7d20\u90e8\u5206\u3002
一、新增的选择器
CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）
1 E[att^="val"] 属性att的值以"val"开头的元素 div[id^="nav"] { background:#ff0; }
2 E[att$="val"] 属性att的值以"val"结尾的元素
3 E[att*="val"] 属性att的值包含"val"字符串的元素
结构伪类选择器（过滤选择器）
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3) { color:#f00; }
6 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child { background:#ff0; }
7 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8 E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
9 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0; }
13 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
14 E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty { background:#ff0; }
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled 匹配表单中激活的元素
16 E:disabled 匹配表单中禁用的元素 input[type="text"]:disabled { background:#ddd; }
17 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection 匹配用户当前选中的元素
级元素通用选择器
ie6不支持
19 E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0; }
反选伪类
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc; }
:target 伪类
(ie6 7 8不支持)
21 E:target 匹配文档中特定"id"点击后的效果
二、css3新增属性
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
说明:
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal | break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4 , Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
十. resize(元素缩放)
使用:
resize: none | both | horizontal | vertical;
说明:
1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效);
2. 属性值说明:
(1). none --> 禁用缩放;
(2). both --> 可同时缩放宽度和高度;
(3). horizontal --> 仅能缩放宽度;
(4). vertical --> 仅能缩放高度;
支持:
safari 4, chrome 3
十一. outline(外边框)
使用:
outline: 边框厚度 边框样式 边框颜色;
outline-offset: 偏移值;
说明:
outline-offset需要独立写, 简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
-o-background-size: [length | percentage] {1, 2};
-webkit-background-size: [length | percentage] {1, 2};
例如:
-o-background-size: 50px 60px;
-webkit-background-size: 50px 60px;
这会将背景图片的宽设置了50px, 高60px.
支持:
safari 4, chrome 3, opera 10
十三. background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border | padding | content;
-moz-background-origin: border | padding | content;
说明:
(1) border --> 从border区域开始显示背景;
(2) padding --> 从padding区域开始显示背景;
(3) content --> 从content区域开始显示背景;
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+
十四. background-clip(指定背景图片从什么位置开始裁切)
使用:
-webkit-background-origin: border-box | padding-box | content-box | no-clip;
说明:
(1) border-box --> 从border区域向外裁剪背景;
(2) padding-box --> 从padding区域向外裁剪背景;
(3) content-box --> 从content区域向外裁剪背景;
(4) no-clip --> 不裁切背景.
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3
十五. background(为一个元素指定多个背景)
使用:
background: [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
safari 4, chrome 3
十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)
使用:
hsl: ( <length> || <percentage> || <percentage>);
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度), 取值为0%到100%之间的值;
(3) percentage: l(亮度), 取值为0%到100%之间的值;
例子:
background: hsl(240, 50%, 100%);
color: hsl(100, 80, 100%);
支持:
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
hsla: ( <length> || <percentage> || <percentage> || <opacity>);
说明:
(1) opacity: a(透明度), 取值在0到1之间;
例子:
background: hsl(240, 50%, 100%, 0.5);
color: hsl(240, 50%, 100%, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)
使用:
rgba: (r, g, b, opacity);
说明:
(1) r: 红色, 正整数 | 百分数;
(2) g: 绿色, 正整数 | 百分数;
(3) b: 蓝色, 正整数 | 百分数;
(4) a: 透明度, 取值在0到1之间;
(5) 正整数在0到255之间, 百分数在0%到100%之间.
例子:
rgba: (100%, 244, 0, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十九、 transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
河南新华专注互联网教育三十二年 到校参观路费报销 免费试听课程！
绛旓細safari 4, chrome 3, FF3, opera 10 鍗佸叓. rgba(鍩轰簬r,g,b涓涓鑹查氶亾鏉ヨ缃鑹插, 閫氳繃a鏉ヨ缃忔槑搴) 浣跨敤: rgba: (r, g, b, opacity); 璇存槑: (1) r: 绾㈣壊, 姝ｆ暣鏁 | 鐧惧垎鏁; (2) g: 缁胯壊, 姝ｆ暣鏁 | 鐧惧垎鏁; (3) b: 钃濊壊, 姝ｆ暣鏁 | 鐧惧垎鏁; (4) a: 閫忔槑搴, 鍙栧煎湪0鍒1涔嬮棿;...
绛旓細1. 鍏冪礌閫夋嫨鍣 鍏冪礌閫夋嫨鍣ㄦ槸鏈鍩烘湰鐨勯夋嫨鍣紝瀹冩牴鎹瓾TML鍏冪礌绫诲瀷鏉ラ夋嫨锛屼緥濡俙div`銆乣p`銆乣span`绛夈2. 绫婚夋嫨鍣 绫婚夋嫨鍣ㄩ氳繃鍏冪礌鐨刢lass灞炴ф潵閫夋嫨锛屼娇鐢╜.`绗﹀彿寮澶达紝渚嬪`.myClass`銆傚畠鍙互閫夋嫨鎵鏈夊叿鏈夌壒瀹氱被鍚嶇殑鍏冪礌銆3. ID閫夋嫨鍣 ID閫夋嫨鍣ㄤ娇鐢ㄥ厓绱犵殑ID灞炴ф潵閫夋嫨鐗瑰畾鐨勫崟涓厓绱犮侷D閫夋嫨鍣...
绛旓細绫婚夋嫨鍣: 绫诲悕鍓嶇殑`.`濡俙.fontStyle{font-size: 18px;}`锛岃兘绮惧噯瀹氫綅鍒板叿鏈夌壒瀹氱被鐨勫厓绱犮 ID閫夋嫨鍣: 浣跨敤`#`鏍囪瘑锛屽`#box{font-size: 18px; color: green;}`锛屼负鍏锋湁鐗瑰畾ID鐨勫厓绱犺瀹氭牱寮忋 閫氶厤绗﹂夋嫨鍣: `*{font-size: 18px; color: #1c65dd;}`锛岃鐩栨墍鏈夊厓绱狅紝璁剧疆鍏ㄥ眬鏍峰紡銆
绛旓細css3閫夋嫨鍣ㄥ涓嬶細涓銆侀氶厤绗﹂夋嫨鍣锛*锛夐氶厤绗﹂夋嫨鍣ㄦ槸鐢ㄦ潵閫夋嫨鎵鏈夊厓绱狅紝锛屼篃鍙互閫夋嫨鏌愪釜鍏冪礌涓嬬殑鎵鏈夊厓绱犮備簩銆佸厓绱犻夋嫨鍣紙E锛夊厓绱犻夋嫨鍣紝鏄痗ss閫夋嫨鍣ㄤ腑鏈甯歌鑰屼笖鏈鍩烘湰鐨勯夋嫨鍣ㄣ備笁銆佺被閫夋嫨鍣紙.className锛夌被閫夋嫨鍣ㄦ槸浠ヤ竴鐙珛浜庢枃妗ｅ厓绱犵殑鏂瑰紡鏉ユ寚瀹氭牱寮忥紝浣跨敤绫婚夋嫨鍣ㄤ箣鍓嶉渶瑕佸湪html鍏冪礌涓婂畾涔夌被...
绛旓細涓銆乧ss3涔嬪墠鐨勯夋嫨鍣 ID閫夋嫨鍣紝绫婚夋嫨鍣紝.鍖呭惈閫夋嫨鍣(E F)浼被閫夋嫨鍣紙:link,visited,hover,active,focus,first-child锛浼厓绱犻夋嫨鍣锛::first-line,first-letter,before,after锛夐氶厤閫夋嫨鍣(.)灞炴ч夋嫨鍣(foo[name='martin'])瀛愬寘鍚夋嫨鍣(E>F)鐩搁偦鍏勫紵閫夋嫨鍣(E+F)浜屻乧ss3鏂板閫夋嫨鍣 鏂板...
绛旓細绗 1 閫夋嫨鍣 绗 2 RGBA鍜岄忔槑搴 绗 3 澶氭爮甯冨眬 绗 4 澶氳儗鏅浘 绗 5 Word Wrap 绗 6 鏂囧瓧闃村奖 绗 7 @font-face灞炴 绗 8 鍦嗚(杈规鍗婂緞)绗 9 杈规鍥剧墖 绗 10 鐩掗槾褰 绗 11 鐩掑瓙澶у皬 绗 12 濯掍綋鏌ヨ 绗 13 璇煶
绛旓細鍏佽 娴忚鍣鍙鑼冨洿 鏈灏忓ぇ灏 涓 992px锛屽綋 娴忚鍣ㄥ彲瑙嗚寖鍥寸殑澶у皬 鈮 992px 鏃讹紝 .container 鐨勬渶澶у搴 涓 970px锛屽嵆锛屾棤璁 娴忚鍣ㄦ斁鍒板澶э紝鍙瀹冧笉灏戜簬 992px 锛.container 鐨勫搴﹀缁堜负 970px銆傚綋 娴忚鍣ㄥ彲瑙嗚寖鍥 灏忎簬 992px 鏃讹紝.container 涓殑璁剧疆鏃犳晥銆傝繖閲.container 涓紝搴旇杩樻湁...
绛旓細鍚庝唬閫夋嫨鍣( E F )鏄夋嫨 E 鍏冪礌鐨勬墍鏈夊悗浠 F 鍏冪礌锛屼笉绠 F 鍏冪礌鏄 E 鍏冪礌鐨勫瓙鍏冪礌銆佸瓩鍏冪礌鎴栬呮洿娣卞眰鐨勫叧绯伙紝閮戒細琚変腑銆傝娉 瀛愰夋嫨鍣( E>F )鏄夋嫨 E 鍏冪礌鐨勬墍鏈夊瓙鍚庝唬 F 鍏冪礌锛屾敞鎰 F 鍏冪礌浠呬粎鏄 E 鍏冪礌鐨勫瓙鍏冪礌鑰屽凡銆傝娉 鍏勫紵閫夋嫨鍣( E~F )鏄 CSS3 鏂板閫夋嫨鍣锛屼唬琛 E 鍜...
绛旓細1銆佹爣绛鹃夋嫨鍣紝涔熺О涓哄厓绱犻夋嫨鍣銆傛爣绛鹃夋嫨鍣ㄧ殑鍩烘湰褰㈠紡濡備笅锛歵agName{property:value}锛屽叾涓璽agName鏄爣绛惧悕绉帮紝property鏄痗ss鐨勫睘鎬с2銆佺被閫夋嫨鍣ㄣ傜被閫夋嫨鍣ㄧ敤鏉ヤ负涓绯诲垪鏍囩瀹氫箟鐩稿悓鐨勫憟鐜版柟寮忥紝甯哥敤鐨勮娉曟槸 .classValue{property:value}銆傚叾涓璫lassValue鏄被閫夋嫨鍣ㄧ殑鍚嶇О锛岃繖鏄敱css缂栧啓鑰呰嚜宸卞懡鍚嶃(...
绛旓細閫夋嫨鍣锛圫electors锛CSS3澧炲姞浜嗘洿澶氱殑CSS閫夋嫨鍣紝鍙互瀹炵幇鏇寸畝鍗曚絾鏄洿寮哄ぇ鐨勫姛鑳斤紝姣斿:nth-child()绛夈傚叾瀹冩ā鍧楋細锛圤ther modules锛塵edia queries:鎰熻鍙獟浣撻夋嫨姣旇緝鍚堥傦紝鍙互涓虹綉椤典腑涓嶅悓鐨勫璞¤缃笉鍚岀殑娴忚璁惧銆傛瘮濡傚彲浠ヤ负鏌愪竴鍧楀垎鍒缃睆骞曟祻瑙堟牱寮忓拰鎵嬫満娴忚鏍峰紡锛屼互鍓嶅垯鍙兘璁剧疆鏁翠釜缃戦〉銆俶ulti-...
