{"id":240,"date":"2008-09-08T13:22:32","date_gmt":"2008-09-08T13:22:32","guid":{"rendered":"http:\/\/www.ddcat.net\/blog2009\/?p=240"},"modified":"2008-09-08T13:22:32","modified_gmt":"2008-09-08T13:22:32","slug":"47-css3%e6%96%b0%e9%80%89%e6%8b%a9%e5%99%a8%ef%bc%9a%e7%bb%93%e6%9e%84%e4%bc%aa%e7%b1%bb%ef%bc%88structural-pseudo-classes%ef%bc%891","status":"publish","type":"post","link":"http:\/\/www.ddcat.net\/blog\/index.php\/2008\/09\/08\/47-css3%e6%96%b0%e9%80%89%e6%8b%a9%e5%99%a8%ef%bc%9a%e7%bb%93%e6%9e%84%e4%bc%aa%e7%b1%bb%ef%bc%88structural-pseudo-classes%ef%bc%891\/","title":{"rendered":"CSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(1)"},"content":{"rendered":"<h3>4.7.3 \u7ed3\u6784\u4f2a\u7c7b\uff08Structural pseudo-classes\uff09<\/h3>\n<p>CSS 3\u589e\u52a0\u4e86\u5927\u91cf\u7684\u7ed3\u6784\u4f2a\u7c7b\uff0c\u5229\u7528\u6587\u6863\u7ed3\u6784\u6811\u6765\u5b9e\u73b0\u8868\u73b0\uff0c\u4ece\u800c\u53ef\u4ee5\u51cf\u5c11\u9875\u9762\u5185class\u5c5e\u6027\u548cID\u5c5e\u6027\u7684\u5b9a\u4e49\uff0c\u4f7f\u5f97\u6587\u6863\u66f4\u52a0\u7b80\u6d01\u3002<\/p>\n<div class=\"note\">\u63d0\u793a\uff1a\u4ee5\u4e0b\u793a\u4f8b\uff0c\u8bf7\u4f7f\u7528Google Chrome\u3001Firefox 3.5+\u3001Safari 3.1+\u6216\u8005Opera 9.63+\u67e5\u770b\u3002<\/div>\n<p><!--more--><\/p>\n<h4>1. E:root<\/h4>\n<p>\u5339\u914d\u6587\u6863\u7684\u6839\u5143\u7d20\u3002\u5728(X)HTML\u4e2d\uff0c\u6839\u5143\u7d20\u5c31\u662f&lt;html&gt;\u5143\u7d20\u3002\u4f8b\u5982\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">:root { border: 1px solid blue; }<\/pre>\n<\/div>\n<p>\u5728(X)HTML\u6587\u6863\u4e2d\uff0c\u5176\u6548\u679c\u7b49\u540c\u4e8e\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">html { border: 1px solid blue; }<\/pre>\n<\/div>\n<h4>2. E:nth-child(n)<\/h4>\n<p>\u5339\u914d\u6240\u6709\u5728\u5176\u7236\u5143\u7d20\u4e2d\u6392\u7b2cn\u4e2a\u7684E\u5143\u7d20\u3002n\u53ef\u4ee5\u662f\u6570\u5b57\/\u5173\u952e\u5b57\/\u516c\u5f0f\uff0c\u4f8b\u5982\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">tr:nth-child(3) { \u2026\u2026 }     \/* \u5339\u914d\u6240\u6709\u8868\u683c\u91cc\u9762\u6392\u7b2c3\u7684\u884c&lt;tr&gt; *\/\ntr:nth-child(2n+1) { \u2026\u2026 }  \/* 2n+1\uff0c\u516c\u5f0f\uff0c\u5339\u914d\u6240\u6709\u5947\u6570\u884c *\/\ntr:nth-child(odd) { \u2026\u2026 }   \/* odd\uff1a\u5173\u952e\u5b57\uff0c\u5339\u914d\u6240\u6709\u5947\u6570\u884c *\/\ntr:nth-child(2n) { \u2026\u2026 }    \/* 2n\uff1a\u5339\u914d\u6240\u6709\u5076\u6570\u884c*\/\ntr:nth-child(even) { \u2026\u2026 }  \/* even\uff1a\u5173\u952e\u5b57\uff0c\u5339\u914d\u6240\u6709\u5076\u6570\u884cli *\/<\/pre>\n<\/div>\n<div class=\"note\">\u6ce8\u610f\uff1a\u5143\u7d20\u7684\u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20\u7d22\u5f15\u4e3a\u201c1\u201d\u3002<\/div>\n<p><a class=\"c_link\" href=\"\/web\/css\/selectors\/selector-nth-child.html\" target=\"_blank\" rel=\"noopener noreferrer\">&#8212;&#8212;\u67e5\u770b\u793a\u4f8b\u6587\u4ef6&#8212;&#8212;<\/a><\/p>\n<p>\u5229\u7528\u8fd9\u4e2a\u4f2a\u7c7b\uff0c\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u5b9e\u73b0\u53cc\u80cc\u666f\u8272\u751a\u81f3\u591a\u80cc\u666f\u8272\u8868\u683c\u7b49\u6548\u679c\u3002<br \/>\n\u4f8b\u5982\u6709xhtml\u5982\u4e0b\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"html\">&lt;ol id=\"sample1\"&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n&lt;\/ol&gt;<\/pre>\n<\/div>\n<p>CSS\u5982\u4e0b\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">#sample1 li:nth-child(even) {  \/* #sample1\u7684<strong>\u5b50\u5143\u7d20<\/strong>\u4e2d\u6392\u5e8f\u4e3a\u5947\u6570\u7684li *\/\nbackground:#FF9;  \/* \u4e5f\u53ef\u4ee5\u8bbe\u5b9afloat\u3001margin\u3001border\u7b49\u5c5e\u6027 *\/\n}\n#sample1 li:nth-child(odd) {\nbackground:#FC3;\n}<\/pre>\n<\/div>\n<p>\u5176\u663e\u793a\u5982\u56fe4-41\u6240\u793a\u3002<\/p>\n<div style=\"width: 360px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4-41 E:nth-child(n)\u7684\u5e94\u75281\" src=\"\/web\/css\/selectors\/041.gif\" alt=\"\u56fe4-41\" width=\"350\" height=\"290\" \/><p class=\"wp-caption-text\">\u56fe4-41 E:nth-child(n)\u7684\u5e94\u75281<\/p><\/div>\n<p style=\"text-align: center;\">\n<p>\u4e5f\u53ef\u4ee5\u5b9e\u73b0\u4e09\u8272\u751a\u81f3\u591a\u8272\u7684\u80cc\u666f\u3002\u4f8b\u5982\u4e0b\u5217\u4ee3\u7801\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">#sample2 li:nth-child(3n+1) {\nbackground:#F90;\n}\n#sample2 li:nth-child(3n+2) {\nbackground:#Fc3;\n}\n#sample2 li:nth-child(3n) {\nbackground:#FF9;\n}<\/pre>\n<pre class=\"html\">&lt;ol id=\"sample2\"&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  \u2026\u2026\n&lt;\/ol&gt;<\/pre>\n<\/div>\n<p>\u5176\u663e\u793a\u5982\u56fe4-42\u6240\u793a\u3002<\/p>\n<div style=\"width: 354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4-42 E:nth-child(n)\u7684\u5e94\u75282\" src=\"\/web\/css\/selectors\/042.gif\" alt=\"\u56fe4-42\" width=\"344\" height=\"338\" \/><p class=\"wp-caption-text\">\u56fe4-42 E:nth-child(n)\u7684\u5e94\u75282<\/p><\/div>\n<p style=\"text-align: center;\">\n<p>\u6b64\u65f6\u9700\u6ce8\u610f\u7684\u662f\uff0c3n+1\u8868\u793a\u7684\u662f3\u884c\u5faa\u73af\u5185\u7684\u7b2c1\u884c\uff0c\u800c3n\u5219\u662f\u7b2c3\u884c\u3002<\/p>\n<p>\u540c\u65f6\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u67d0\u4e00\u4e2a\u7279\u5b9a\u7684\u5b50\u5143\u7d20\uff0c\u4f8b\u5982\u4e0b\u5217\u4ee3\u7801\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">#sample3 li:nth-child(1) {\ncolor:#F00;\n}\n#sample3 li:nth-child(2) {\ncolor:#F60;\n}\n#sample3 li:nth-child(3) {\ncolor:#FC0;\n}<\/pre>\n<pre class=\"html\">&lt;h4&gt;\u524d3\u540d\u4e0d\u540c\u663e\u793a\u7684\u6392\u884c\u699c&lt;\/h4&gt;\n&lt;ol id=\"sample3\"&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  &lt;li&gt;\u5217\u8868\u9879\u54e6\u5217\u8868\u9879&lt;\/li&gt;\n  \u2026\u2026\n&lt;\/ol&gt;<\/pre>\n<\/div>\n<p>\u5206\u522b\u6307\u5b9a\u4e86\u7b2c1\u30012\u30013\u4e2ali\u7684\u524d\u666f\u989c\u8272color\uff0c\u5176\u663e\u793a\u5982\u56fe4-43\u6240\u793a\u3002<\/p>\n<div style=\"width: 253px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4-43 E:nth-child(n)\u7684\u5e94\u75283\" src=\"\/web\/css\/selectors\/043.gif\" alt=\"\u56fe4-43\" width=\"243\" height=\"340\" \/><p class=\"wp-caption-text\">\u56fe4-43 E:nth-child(n)\u7684\u5e94\u75283<\/p><\/div>\n<p style=\"text-align: center;\">\n<p>\u4e5f\u53ef\u4ee5\u4e3a\u540c\u4e00\u5217\u7684\u5355\u5143\u683ctd\u6307\u5b9a\u76f8\u540c\u7684\u80cc\u666f\u8272\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"css\">#sample4 td:nth-child(3n+1) {\nbackground:#FCC;\n}\n#sample4 td:nth-child(3n+2) {\nbackground:#F99;\n}\n#sample4 td:nth-child(3n+3) {\nbackground:#C6F;\n}<\/pre>\n<pre class=\"html\">&lt;table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"sample4\"&gt;\n  &lt;tr&gt;\n    &lt;td&gt;1-1&lt;\/td&gt;\n    &lt;td&gt;1-2&lt;\/td&gt;\n    &lt;td&gt;1-3&lt;\/td&gt;\n  &lt;\/tr&gt;\n  \u2026\u2026\n&lt;\/table&gt;<\/pre>\n<\/div>\n<p>\u5176\u663e\u793a\u5982\u56fe4-44\u6240\u793a\u3002<\/p>\n<div style=\"width: 366px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4-44 E:nth-child(n)\u7684\u5e94\u75284\" src=\"\/web\/css\/selectors\/044.gif\" alt=\"\u56fe4-44\" width=\"356\" height=\"303\" \/><p class=\"wp-caption-text\">\u56fe4-44 E:nth-child(n)\u7684\u5e94\u75284<\/p><\/div>\n<p style=\"text-align: center;\">\n<p>\u4f46\u662f\uff0c\u9700\u8981\u7279\u522b\u6ce8\u610f\u7684\u662f\uff0c\u7236\u5143\u7d20\u5185\u6240\u6709\u7684\u5b50\u5143\u7d20\u90fd\u53c2\u4e0e\u6392\u5e8f\uff0c\u800c\u65e0\u8bba\u5143\u7d20\u7684\u7c7b\u578b\u662f\u4ec0\u4e48\uff0c\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u5b50\u5143\u7d20\u7684\u7c7b\u578b\u90fd\u662f\u5355\u4e00\u7684\uff08li\u6216\u8005td\uff09\uff0c\u800c\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u5b50\u5143\u7d20\u7684\u7c7b\u578b\u4e0d\u518d\u5355\u4e00\uff08\u5305\u62ecdt\u548cdd\uff09\uff1a<\/p>\n<div class=\"code\">\n<pre class=\"html\">&lt;dl id=\"sample5\"&gt;\n  &lt;dt&gt;dt 1\uff0c\u603b\u6392\u884c1&lt;\/dt&gt;\n  &lt;dd&gt;dd 1\uff0c\u603b\u6392\u884c2&lt;\/dd&gt;\n  &lt;dt&gt;dt 2\uff0c\u603b\u6392\u884c3&lt;\/dt&gt;\n  &lt;dd&gt;dd 2\uff0c\u603b\u6392\u884c4&lt;\/dd&gt;\n  &lt;dd&gt;dd 3\uff0c\u603b\u6392\u884c5&lt;\/dd&gt;\n  &lt;dt&gt;dt 3\uff0c\u603b\u6392\u884c6&lt;\/dt&gt;\n  &lt;dt&gt;dt 4\uff0c\u603b\u6392\u884c7&lt;\/dt&gt;\n  &lt;dd&gt;dd 4\uff0c\u603b\u6392\u884c8&lt;\/dd&gt;\n&lt;\/dl&gt;<\/pre>\n<\/div>\n<p>\u5982\u679c\u8bbe\u5b9a\u5982\u4e0b\u7684CSS\uff0c\u90a3\u4e48\u5176\u663e\u793a\u7684\u6548\u679c\u5219\u5982\u56fe4-45\u6240\u793a\u3002<\/p>\n<div class=\"code\">\n<pre class=\"css\">#sample5 dt {\nfont-weight:bolder;\n}\n#sample5 dt:nth-child(odd){\nbackground:#6CF;\n}<\/pre>\n<\/div>\n<div style=\"width: 354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"\u56fe4-45 E:nth-child(n)\u5305\u62ec\u7236\u5143\u7d20\u5185\u6240\u6709\u7c7b\u578b\u7684\u5b50\u5143\u7d20\" src=\"\/web\/css\/selectors\/045.gif\" alt=\"\u56fe4-45\" width=\"344\" height=\"383\" \/><p class=\"wp-caption-text\">\u56fe4-45 E:nth-child(n)\u5305\u62ec\u7236\u5143\u7d20\u5185\u6240\u6709\u7c7b\u578b\u7684\u5b50\u5143\u7d20<\/p><\/div>\n<p>\u7531\u56fe4-45\u8bfb\u8005\u53ef\u4ee5\u53d1\u73b0\uff0c\u5224\u65addt\u662f\u5426\u4e3a\u5947\u6570\u7684\u6761\u4ef6\u662f\u5176\u5728\u5b50\u5143\u7d20\u5185\u603b\u6392\u5e8f\uff0c\u800c\u4e0d\u662fdt\u5143\u7d20\u5355\u72ec\u6392\u5e8f\u3002<\/p>\n<p><a class=\"c_link\" href=\"\/web\/css\/selectors\/selector-nth-child.html\" target=\"_blank\" rel=\"noopener noreferrer\">&#8212;&#8212;\u67e5\u770b\u793a\u4f8b\u6587\u4ef6&#8212;&#8212;<\/a><\/p>\n<ul>\n<li><a title=\"\u5355\u51fb\u67e5\u770b\u300aCSS 3\u9009\u65b0\u589e\u62e9\u5668[1]\uff1a\u66f4\u591a\u7684\u5c5e\u6027\u9009\u62e9\u5668\u300b\" href=\"http:\/\/www.ddcat.net\/blog\/?p=238\">CSS 3\u9009\u65b0\u589e\u62e9\u5668[1]\uff1a\u66f4\u591a\u7684\u5c5e\u6027\u9009\u62e9\u5668<\/a><\/li>\n<li><a title=\"\u5355\u51fb\u67e5\u770b\u300aCSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(1)\u300b\" href=\"http:\/\/www.ddcat.net\/blog\/?p=240\">CSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(1)<\/a><\/li>\n<li><a title=\"\u5355\u51fb\u67e5\u770b\u300aCSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(2)\u300b\" href=\"http:\/\/www.ddcat.net\/blog\/?p=1026\">CSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(2)<\/a><\/li>\n<li><a title=\"\u5355\u51fb\u67e5\u770b\u300aCSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(3)\u300b\" href=\"http:\/\/www.ddcat.net\/blog\/?p=1038\">CSS3\u65b0\u589e\u9009\u62e9\u5668[2]\uff1a\u7ed3\u6784\u4f2a\u7c7b(3)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS 3\u589e\u52a0\u4e86\u5927\u91cf\u7684\u7ed3\u6784\u4f2a\u7c7b\uff0c\u5229\u7528\u6587\u6863\u7ed3\u6784\u6811\u6765\u5b9e\u73b0\u8868\u73b0\uff0c\u4ece\u800c\u53ef\u4ee5\u51cf\u5c11\u9875\u9762\u5185class\u5c5e\u6027\u548cID\u5c5e\u6027\u7684\u5b9a\u4e49\uff0c\u4f7f\u5f97\u6587\u6863\u66f4\u52a0\u7b80\u6d01\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,2],"tags":[66,286,344,45],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-web-css","category-web","tag-selector","tag-286","tag-344","tag-css3"],"_links":{"self":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":0,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ddcat.net\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}