{"id":1083,"date":"2019-09-26T17:26:24","date_gmt":"2019-09-26T09:26:24","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1083"},"modified":"2022-03-18T17:35:16","modified_gmt":"2022-03-18T09:35:16","slug":"css-table","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/26\/css-table\/","title":{"rendered":"CSS Table \u8868\u683c"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">border-collapse<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n  border-collapse: collapse;\n}\n\ntable, th, td {\n  border: 1px solid black;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">nth-child<\/h2>\n\n\n\n<p>nth-child(an+b)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">even \u5076\u6578\u884c<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">tr:nth-child(even){\n    background-color:#000000;\n    }<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">odd \u55ae\u6578\u884c<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">tr:nth-child(odd){\n    background-color:#000000;\n    }<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">(n) <strong>An+B<\/strong> \u6307\u5b9a\u5143\u7d20<\/h2>\n\n\n\n<p>An + B\u81ea\u5b9a\u7fa9\u6578\u5b57\uff1a<br>A=\u5143\u7d20\u6578<br>B=\u81f3\u7b2cn\u500b\u5143\u7d20<br>n=\u5f9e0\u958b\u59cb<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u7bc4\u4f8b\u8aaa\u660e<\/h4>\n\n\n\n<p><strong>nth-child(2n+1)<\/strong> = nth-child(odd)<br><strong>nth-child(2n)<\/strong> = nth-child(even)<br><strong>nth-child(7) <\/strong>= \u8868\u793a\u7b2c7\u5143\u7d20<br><strong>nth-child(5n)<\/strong> = \u8868\u793a\u7b2c5\u5143\u7d20\uff0c5[= 5\u00d71]\uff0c10 [= 5\u00d72]\uff0c15 [= 5\u00d73]\u2026<br><strong>nth-child(n+7)<\/strong> = \u8868\u793a\u7b2c7\u5143\u7d20\u53ca\u4ee5\u4e0b\u6240\u6709\u5143\u7d20\uff0c7 [=0+7], 8 [=1+7], 9 [=2+7]&#8230;<br><strong>nth-child(-n+3)<\/strong> = \u8868\u793a\u524d3\u500b\u5143\u7d20 [=-0+3, -1+3, -2+3]\u2026<br><strong>nth-child(3n+4)<\/strong> = \u8868\u793a\u7b2c4\u5143\u7d20 [=(3\u00d70)+4], 7 [=(3\u00d71)+4], 10 [=(3\u00d72)+4], 13 [=(3\u00d73)+4]\u2026<br><strong>p:nth-child(n)<\/strong> = \u6bcf\u500b&lt;p&gt;\u5143\u7d20<br><strong>p:nth-child(1) or p:nth-child(0n+1)<\/strong> = \u8868\u793a\u7b2c1\u500b\u5143\u7d20\uff0c= first-child<br><strong>p:nth-child(n+8):nth-child(-n+15)<\/strong> = \u8868\u793a\u7b2c8\u5230\u7b2c15\u5143\u7d20<br><br>first-child \u7b2c\u4e00\u500b\u7269\u4ef6\u6a23\u5f0f\u8a2d\u5b9a<br>last-child \u6700\u5f8c\u4e00\u500b\u7269\u4ef6\u6a23\u5f0f\u8a2d\u5b9a<\/p>\n\n\n\n<p>PS.IE8\u4ee5\u4e0a\u652f\u63f4<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">tr:nth-child(1){\n    background-color:#69C;\n    }<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">nth-of-type()<\/h2>\n\n\n\n<p>:nth-of-type(&lt;nth>)<br>where <br>&lt;nth>= &lt;an-plus-b>| even | odd<br><br><strong>\u7bc4\u4f8b\u61c9\u7528<\/strong><br>\u53c3\u8003\uff1ahttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-of-type<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Odd paragraphs *\/\np:nth-of-type(2n+1) {\n  color: red;\n}\n\n\/* Even paragraphs *\/\np:nth-of-type(2n) {\n  color: blue;\n}\n\n\/* First paragraph *\/\np:nth-of-type(1) {\n  font-weight: bold;\n}\n\n\/* This has no effect, as the .fancy class is only on the 4th p element, not the 1st *\/\np.fancy:nth-of-type(1) {\n  text-decoration: underline;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div>\n  &lt;div>\u7121\u6548\u679c\u5957\u7528&lt;\/div>\n  &lt;p>\u6211\u662fp:nth-of-type(1)\u7d50\u679c&lt;\/p>\n  &lt;p>\u6211\u662fp:nth-of-type(2n)\u7d50\u679c&lt;\/p>\n  &lt;div>\u7121\u6548\u679c\u5957\u7528&lt;\/div>\n  &lt;p>\u6211\u662fp:nth-of-type(2n+1)\u7d50\u679c&lt;\/p>\n  &lt;p class=\"fancy\">\u7121\u6548\u679c\u5957\u7528\uff0cp.fancy:nth-of-type(1)\u70ba\u7b2c1\u500bp\u5143\u7d20\uff0c\u672c.fancy\u5143\u7d20\u70ba\u7b2c4\u500bp\u5143\u7d20=p.fancy:nth-of-type(4)&lt;\/p>\n&lt;\/div><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>border-collapse nth-child nth-child(an+b) even \u5076\u6578\u884c odd &#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1083","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":54,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":6983,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1083\/revisions\/6983"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}