{"id":238,"date":"2008-09-04T16:38:07","date_gmt":"2008-09-04T16:38:07","guid":{"rendered":"http:\/\/www.ddcat.net\/blog2009\/?p=238"},"modified":"2008-09-04T16:38:07","modified_gmt":"2008-09-04T16:38:07","slug":"47-css-3%e6%96%b0%e5%a2%9e%e9%80%89%e6%8b%a9%e5%99%a8%e5%89%8d%e7%9e%bb1","status":"publish","type":"post","link":"http:\/\/www.ddcat.net\/blog\/index.php\/2008\/09\/04\/47-css-3%e6%96%b0%e5%a2%9e%e9%80%89%e6%8b%a9%e5%99%a8%e5%89%8d%e7%9e%bb1\/","title":{"rendered":"CSS 3\u9009\u65b0\u589e\u62e9\u5668[1]\uff1a\u66f4\u591a\u7684\u5c5e\u6027\u9009\u62e9\u5668"},"content":{"rendered":"
\u524d\u8a00\uff1aGoogle\u7684Chrome\u5bf9\u4e8e\u5b66\u4e60\u6700\u65b0\u7684CSS\u9009\u62e9\u5668\u7684\u4eba\u6765\u8bf4\u662f\u4e00\u4e2a\u597d\u6d88\u606f\uff0c\u56e0\u4e3a\u5b83\u652f\u6301CSS3\u7684\u65b0\u9009\u62e9\u5668\uff0c\u6240\u4ee5\u672c\u732b\u4e5f\u628a\u4e66\u91cc\u9762\u6ca1\u6709\u5c55\u5f00\u4ecb\u7ecd\u7684\u90e8\u5206\uff0c\u91cd\u65b0\u5145\u5b9e\u4e86\u4e00\u4e0b\u3002\u5f53\u7136\uff0c\u4e66\u5df2\u7ecf\u4e0b\u5370\u5382\u65e0\u6cd5\u4fee\u6539\u4e86\uff0c\u4f46\u662f\u6765\u8fd9\u91cc\u770b\u7684\u4eba\u4eec\u53ef\u4ee5\u5148\u7779\u4e3a\u5feb\u4e86\u3002\u76ee\u524d\u652f\u6301\u8fd93\u79cd\u5339\u914d\u65b9\u5f0f\u7684\u5c5e\u6027\u9009\u62e9\u5668\u7684\u6d4f\u89c8\u5668\u6709\uff1aIE 7.0\u3001Firefox 2.0\u3001Opera 9.2\u3001Safari\u7b49\u3002\u73b0\u5728\u8fd8\u6709Google\u7684Chrome\u3002<\/div>\n

CSS 3\u5728CSS 2\u652f\u6301\u7684\u9009\u62e9\u5668\u7684\u57fa\u7840\u4e0a\uff0c\u53c8\u589e\u52a0\u4e86\u591a\u79cd\u529f\u80fd\u5f3a\u5927\u800c\u4e14\u975e\u5e38\u5b9e\u7528\u7684\u9009\u62e9\u5668\uff0c\u5728\u672c\u8282\u5185\u5c06\u5bf9\u8fd9\u4e9b\u9009\u5219\u5668\u4f5c\u7b80\u5355\u4ecb\u7ecd\u3002<\/p>\n

<\/p>\n

\u63d0\u793a\uff1a\u8bfb\u8005\u53ef\u4ee5\u8bbf\u95eeW3C\u7684\u5b98\u65b9\u7f51\u7ad9http:\/\/www.w3.org\/\uff08\u82f1\u6587\uff09\u4e86\u89e3\u66f4\u591a\u5173\u4e8eCSS3\u7684\u4fe1\u606f\u3002<\/div>\n

4.7.1 \u66f4\u591a\u7684\u5c5e\u6027\u9009\u62e9\u5668<\/h3>\n

\u867d\u7136\u5230\u672c\u4e66\u5b8c\u7a3f\u4e4b\u65e5\uff0cCSS 3\u8fd8\u672a\u6b63\u5f0f\u516c\u5e03\uff0c\u4f46\u662f\u5176\u90e8\u5206\u5185\u5bb9\u5df2\u7ecf\u88ab\u4e00\u4e9b\u6d4f\u89c8\u5668\u91c7\u7eb3\u5e76\u652f\u6301\uff0c\u4f8b\u5982\u5b50\u5b57\u7b26\u4e32\u5339\u914d\u7684\u5c5e\u6027\u9009\u62e9\u5668\u7b49\u3002<\/p>\n

CSS 3\u5bf9\u5c5e\u6027\u9009\u62e9\u5668\u7684\u53c8\u589e\u52a0\u4e863\u79cd\u5b50\u5b57\u7b26\u4e32\u7684\u5339\u914d\u65b9\u5f0f\uff1a
\n1) E[att ^=<\/strong> “val”]
\n\u5339\u914d\u6240\u6709E\u5143\u7d20\u4e2datt\u5c5e\u6027\u7684\u503c\u4ee5\u201cval\u201d\u5f00\u59cb\u7684\u6240\u6709\u5143\u7d20\u3002
\n2) E[att $=<\/strong> “val”]
\n\u5339\u914d\u6240\u6709E\u5143\u7d20\u4e2datt\u5c5e\u6027\u7684\u503c\u4ee5\u201cval\u201d\u7ed3\u675f\u7684\u6240\u6709\u5143\u7d20\u3002
\n3) E[att *=<\/strong> \u201dval\u201d]<\/p>\n

\u5339\u914d\u6240\u6709E\u5143\u7d20\u4e2datt\u5c5e\u6027\u7684\u503c\u4e2d\u5305\u542b\u5b57\u7b26\u4e32\u201cval\u201d\u7684\u6240\u6709\u5143\u7d20\u3002<\/p>\n

\u4f8b\u5982\u6709XHTML\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n

\n
<div class=\"nav-primary\">class=&quot; nav-primary&quot;<\/div>\n<div class=\"content-primary\">class=&quot;content-primary&quot;<\/div>\n<div class=\"content-secondary\">class=&quot;content-secondary&quot;<\/div>\n<div class=\"tertiary-content\">class=&quot;tertiary-content&quot;<\/div>\n<div class=\"nav-secondary\">class=&quot;nav-secondary&quot;<\/div><\/pre>\n<\/div>\n
\u5982\u679c\u5b9a\u4e49\u5982\u4e0bCSS\u89c4\u5219\uff0c\u5176\u663e\u793a\u5982\u56fe4-36\u6240\u793a\u3002<\/p>\n
\n
div[class^=\"nav\"] { background:#ff0; }<\/pre>\n<\/div>\n\u9009\u62e9\u5668\u7684\u5e94\u7528”]\"\"\n
\n
\u6ce8\u610f\uff0c\u6b64\u5904\u7684\u5339\u914d\u4e0e\u201c-\u201d\u65e0\u5173\uff0c\u53ea\u662f\u7b80\u5355\u7684\u5b57\u7b26\u4e32\u5339\u914d\u3002<\/div>\n
\u5982\u679c\u5b9a\u4e49\u5982\u4e0bCSS\u89c4\u5219\uff0c\u5176\u663e\u793a\u5982\u56fe4-37\u6240\u793a\u3002<\/p>\n
\n
div[class$=\"primary\"] { background: #CF9; }<\/pre>\n<\/div>\n
\u9009\u62e9\u5668\u7684\u5e94\u7528”]\"\"\u5982\u679c\u5b9a\u4e49\u5982\u4e0bCSS\u89c4\u5219\uff0c\u5176\u663e\u793a\u5982\u56fe4-38\u6240\u793a\u3002<\/p>\n
\n
div[class*=\"content\"] { background: #0CF; }<\/pre>\n<\/div>\n\u9009\u62e9\u5668\u7684\u5e94\u7528”]\"\"\n
\n
4.7.2 \u666e\u901a\u5144\u5f1f\u9009\u62e9\u5668<\/h3>\n
CSS 2\u5185\u6709\u76f8\u90bb\u9009\u62e9\u5668\uff0c\u53ea\u5339\u914d\u76f8\u90bb\u7684\u5144\u5f1f\u5143\u7d20\uff0c\u800c\u666e\u901a\u5144\u5f1f\u9009\u62e9\u5668\u5219\u53ef\u4ee5\u5339\u914d\u4e0d\u76f8\u90bb\u7684\u5144\u5f1f\u5143\u7d20\uff0c\u5176\u8bed\u6cd5\u5982\u4e0b\uff1a
\nE ~ F { \u2026\u2026 }
\n\u5339\u914d\u6240\u6709F\u5143\u7d20\uff0c\u5982\u679c\u4ed6\u662fE\u7684\u5144\u5f1f\u5143\u7d20\uff0c\u4e14\u5728E\u4e4b\u540e\u51fa\u73b0\u3002
\n\u4f8b\u5982\u6709\u5982\u4e0b\u4ee3\u7801\uff0c\u5176\u5728\u6d4f\u89c8\u5668\u5185\u663e\u793a\u5982\u56fe4-39\u6240\u793a\u3002<\/p>\n
\n
.test ~ p { background: #FC0; }<\/pre>\n
<div>\n  <div>div 1<\/div>\n  <p>p 1<\/p>\n  <div class=\"test\">div 2, class=&quot;test&quot;<\/div>\n  <p>p 2<\/p>\n  <div>div 3\n    <p>div 3 \u5185\u7684p<\/p>\n  <\/div>\n  <p>p 3<\/p>\n<\/div><\/pre>\n<\/div>\n
\"\"
\u56fe4-39 \u666e\u901a\u5144\u5f1f\u9009\u62e9\u5668\u7684\u5e94\u7528<\/p><\/div>\n
\n