﻿{"id":1174,"date":"2019-09-26T21:59:30","date_gmt":"2019-09-26T13:59:30","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1174"},"modified":"2021-10-23T21:14:04","modified_gmt":"2021-10-23T13:14:04","slug":"css-counters","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/26\/css-counters\/","title":{"rendered":"CSS Counters \u7de8\u865f"},"content":{"rendered":"\n<p>\u7de8\u865f <br>section1:xxxxxxx<br>section2:xxxxxxx<br>section3:xxxxxxx<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u7de8\u865f\u9806\u5e8f*\/\nbody {\n  counter-reset: section;\n}\n\/* section+\u7de8\u865f+: *\/\nh2::before {\n  counter-increment: section;\n  content: \"Section \" counter(section) \": \";\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;h1>Using CSS Counters:&lt;\/h1>\n&lt;h2>HTML Tutorial&lt;\/h2>\n&lt;h2>CSS Tutorial&lt;\/h2>\n&lt;h2>JavaScript Tutorial&lt;\/h2><\/pre>\n\n\n\n<p>\u7de8\u865f <br>section1-1:xxxxxxx<br>section1-2:xxxxxxx<br>section1-3:xxxxxxx<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u7de8\u865f\u9806\u5e8f*\/\nbody {\n  counter-reset: section;\n}\n\n\/* section+\u7de8\u865f+: *\/\nh1 {\n  counter-reset: subsection;\n}\n\nh1::before {\n  counter-increment: section;\n  content: \"Section \" counter(section) \". \";\n}\n\nh2::before {\n  counter-increment: subsection;\n  content: counter(section) \".\" counter(subsection) \" \";\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;h1>HTML tutorials:&lt;\/h1>\n&lt;h2>HTML Tutorial&lt;\/h2>\n&lt;h2>CSS Tutorial&lt;\/h2>\n\n&lt;h1>Scripting tutorials:&lt;\/h1>\n&lt;h2>JavaScript&lt;\/h2>\n&lt;h2>VBScript&lt;\/h2>\n\n&lt;h1>XML tutorials:&lt;\/h1>\n&lt;h2>XML&lt;\/h2>\n&lt;h2>XSL&lt;\/h2><\/pre>\n\n\n\n<p>\u7de8\u865f ol<br>section1-1:xxxxxxx<br>section1-2:xxxxxxx<br>section1-3:xxxxxxx<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u7de8\u865f\u9806\u5e8f*\/\nol {\n  counter-reset: section;\n  list-style-type: none;\n}\n\n\/* section+\u7de8\u865f+: *\/\nli::before {\n  counter-increment: section;\n  content: counters(section,\".\") \" \";\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;ol>\n  &lt;li>item&lt;\/li>\n  &lt;li>item   \n  &lt;ol>\n    &lt;li>item&lt;\/li>\n    &lt;li>item&lt;\/li>\n    &lt;li>item\n    &lt;ol>\n      &lt;li>item&lt;\/li>\n      &lt;li>item&lt;\/li>\n      &lt;li>item&lt;\/li>\n    &lt;\/ol>\n    &lt;\/li>\n    &lt;li>item&lt;\/li>\n  &lt;\/ol>\n  &lt;\/li>\n  &lt;li>item&lt;\/li>\n  &lt;li>item&lt;\/li>\n&lt;\/ol>\n\n&lt;ol>\n  &lt;li>item&lt;\/li>\n  &lt;li>item&lt;\/li>\n&lt;\/ol><\/pre>\n ","protected":false},"excerpt":{"rendered":"<p>\u7de8\u865f section1:xxxxxxxsection2:xxxxxxxsection3:xxxxxxx \u7de8\u865f &#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-1174","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\/1174","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=1174"}],"version-history":[{"count":9,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1174\/revisions"}],"predecessor-version":[{"id":1184,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1174\/revisions\/1184"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}