From e0888e7b1423e205122612cb37ca13b4e22ef91c Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Thu, 27 Jul 2023 17:50:34 -0700 Subject: [PATCH] zh-cn: Format /web/css using Prettier (part 1) (#14659) --- files/zh-cn/web/css/-moz-image-rect/index.md | 52 +++++++++------- files/zh-cn/web/css/-moz-user-input/index.md | 2 +- .../web/css/-webkit-border-before/index.md | 2 +- .../zh-cn/web/css/-webkit-line-clamp/index.md | 3 +- .../web/css/-webkit-mask-attachment/index.md | 4 +- .../css/-webkit-overflow-scrolling/index.md | 2 +- .../css/-webkit-tap-highlight-color/index.md | 2 +- .../web/css/-webkit-touch-callout/index.md | 14 ++--- files/zh-cn/web/css/@charset/index.md | 13 ++-- .../@counter-style/additive-symbols/index.md | 23 ++++--- files/zh-cn/web/css/@counter-style/index.md | 5 +- files/zh-cn/web/css/@document/index.md | 8 +-- .../web/css/@font-face/font-family/index.md | 4 +- .../web/css/@font-face/font-style/index.md | 4 +- files/zh-cn/web/css/@font-face/index.md | 56 +++++++++-------- files/zh-cn/web/css/@font-face/src/index.md | 27 ++++---- .../web/css/@font-feature-values/index.md | 14 +++-- files/zh-cn/web/css/@import/index.md | 6 +- files/zh-cn/web/css/@keyframes/index.md | 62 ++++++++++++++----- files/zh-cn/web/css/@layer/index.md | 23 +++---- .../-webkit-device-pixel-ratio/index.md | 2 +- .../zh-cn/web/css/@media/any-pointer/index.md | 3 +- .../web/css/@media/aspect-ratio/index.md | 4 +- .../web/css/@media/device-height/index.md | 5 +- files/zh-cn/web/css/@media/index.md | 3 +- .../css/@media/prefers-color-scheme/index.md | 36 ++++++++--- .../@media/prefers-reduced-motion/index.md | 17 ++--- files/zh-cn/web/css/@namespace/index.md | 11 ++-- files/zh-cn/web/css/@page/index.md | 2 +- files/zh-cn/web/css/@property/index.md | 12 ++-- .../zh-cn/web/css/@property/inherits/index.md | 12 ++-- .../web/css/@property/initial-value/index.md | 12 ++-- files/zh-cn/web/css/@property/syntax/index.md | 16 ++--- files/zh-cn/web/css/@supports/index.md | 61 +++++++++++------- .../css/_colon_-moz-only-whitespace/index.md | 4 +- files/zh-cn/web/css/_colon_active/index.md | 30 ++++++--- files/zh-cn/web/css/_colon_any-link/index.md | 2 +- files/zh-cn/web/css/_colon_blank/index.md | 2 +- files/zh-cn/web/css/_colon_checked/index.md | 44 ++++++++++--- files/zh-cn/web/css/_colon_default/index.md | 10 +-- files/zh-cn/web/css/_colon_defined/index.md | 17 ++--- files/zh-cn/web/css/_colon_dir/index.md | 5 +- files/zh-cn/web/css/_colon_disabled/index.md | 14 +++-- files/zh-cn/web/css/_colon_enabled/index.md | 2 +- .../zh-cn/web/css/_colon_first-child/index.md | 2 +- .../web/css/_colon_first-of-type/index.md | 2 +- files/zh-cn/web/css/_colon_first/index.md | 2 +- .../web/css/_colon_focus-visible/index.md | 15 ++--- .../web/css/_colon_focus-within/index.md | 8 +-- files/zh-cn/web/css/_colon_focus/index.md | 2 +- .../zh-cn/web/css/_colon_fullscreen/index.md | 5 +- files/zh-cn/web/css/_colon_has/index.md | 54 ++++++++++------ .../web/css/_colon_host_function/index.md | 31 +++++----- files/zh-cn/web/css/_colon_hover/index.md | 4 +- files/zh-cn/web/css/_colon_in-range/index.md | 2 +- files/zh-cn/web/css/_colon_lang/index.md | 4 +- .../web/css/_colon_last-of-type/index.md | 27 ++++---- files/zh-cn/web/css/_colon_left/index.md | 2 +- files/zh-cn/web/css/_colon_link/index.md | 2 +- files/zh-cn/web/css/_colon_not/index.md | 2 +- files/zh-cn/web/css/_colon_nth-child/index.md | 54 +++++++++------- .../web/css/_colon_nth-last-child/index.md | 18 +++--- .../zh-cn/web/css/_colon_nth-of-type/index.md | 4 +- .../web/css/_colon_only-of-type/index.md | 2 +- files/zh-cn/web/css/_colon_optional/index.md | 2 +- .../web/css/_colon_out-of-range/index.md | 2 +- .../css/_colon_picture-in-picture/index.md | 2 +- .../web/css/_colon_placeholder-shown/index.md | 2 +- files/zh-cn/web/css/_colon_read-only/index.md | 30 ++++++--- .../zh-cn/web/css/_colon_read-write/index.md | 30 ++++++--- files/zh-cn/web/css/_colon_required/index.md | 2 +- files/zh-cn/web/css/_colon_right/index.md | 2 +- files/zh-cn/web/css/_colon_root/index.md | 2 +- files/zh-cn/web/css/_colon_scope/index.md | 34 +++++----- files/zh-cn/web/css/_colon_target/index.md | 25 ++++---- files/zh-cn/web/css/_colon_valid/index.md | 2 +- files/zh-cn/web/css/_colon_where/index.md | 2 +- .../_doublecolon_-moz-progress-bar/index.md | 2 +- .../_doublecolon_-moz-range-progress/index.md | 6 +- .../index.md | 6 +- .../index.md | 4 +- .../index.md | 4 +- .../_doublecolon_-webkit-scrollbar/index.md | 39 ++++++------ .../index.md | 2 +- .../index.md | 22 +++---- .../zh-cn/web/css/_doublecolon_after/index.md | 55 ++++++++-------- .../web/css/_doublecolon_backdrop/index.md | 4 +- .../web/css/_doublecolon_before/index.md | 58 ++++++++++------- files/zh-cn/web/css/_doublecolon_cue/index.md | 2 +- .../index.md | 2 +- .../css/_doublecolon_first-letter/index.md | 5 +- .../web/css/_doublecolon_first-line/index.md | 32 +++++++--- .../css/_doublecolon_grammar-error/index.md | 2 +- .../zh-cn/web/css/_doublecolon_part/index.md | 45 ++++++++------ .../web/css/_doublecolon_placeholder/index.md | 6 +- .../web/css/_doublecolon_selection/index.md | 2 +- .../web/css/_doublecolon_slotted/index.md | 27 ++++---- .../css/_doublecolon_spelling-error/index.md | 2 +- files/zh-cn/web/css/align-content/index.md | 28 ++++----- files/zh-cn/web/css/align-items/index.md | 12 ++-- 100 files changed, 822 insertions(+), 576 deletions(-) diff --git a/files/zh-cn/web/css/-moz-image-rect/index.md b/files/zh-cn/web/css/-moz-image-rect/index.md index 9efac2fdb0d864..e08261377d30f5 100644 --- a/files/zh-cn/web/css/-moz-image-rect/index.md +++ b/files/zh-cn/web/css/-moz-image-rect/index.md @@ -1,5 +1,5 @@ --- -title: '-moz-image-rect' +title: "-moz-image-rect" slug: Web/CSS/-moz-image-rect --- @@ -46,14 +46,14 @@ The container looks like this: ```css #container { - width:267px; - height:272px; - top:100px; - left:100px; - position:absolute; - font-size:16px; - text-shadow:white 0px 0px 6px; - text-align:center; + width: 267px; + height: 272px; + top: 100px; + left: 100px; + position: absolute; + font-size: 16px; + text-shadow: white 0px 0px 6px; + text-align: center; } ``` @@ -62,9 +62,9 @@ Then the four boxes defining the segments of the image are defined. Let's look a ```css #box1 { background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%); - width:133px; - height:136px; - position:absolute; + width: 133px; + height: 136px; + position: absolute; } ``` @@ -73,9 +73,9 @@ This is the top-left corner of the image. It defines a rectangle containing the ```css #box2 { background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%); - width:133px; - height:136px; - position:absolute; + width: 133px; + height: 136px; + position: absolute; } ``` @@ -86,15 +86,15 @@ The other corners follow a similar pattern: ```css #box3 { background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%); - width:133px; - height:136px; - position:absolute; + width: 133px; + height: 136px; + position: absolute; } #box4 { background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%); - width:133px; - height:136px; - position:absolute; + width: 133px; + height: 136px; + position: absolute; } ``` @@ -119,16 +119,20 @@ This code handles the click event when the container receives a mouse click. ```js function rotate() { - var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); + var prevStyle = window + .getComputedStyle(document.getElementById("box4"), null) + .getPropertyValue("background-image"); // Now that we've saved the last one, start rotating - for (var i=1; i<=4; i++) { + for (var i = 1; i <= 4; i++) { var curId = "box" + i; // Shift the background images - var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); + var curStyle = window + .getComputedStyle(document.getElementById(curId), null) + .getPropertyValue("background-image"); document.getElementById(curId).style.backgroundImage = prevStyle; prevStyle = curStyle; } diff --git a/files/zh-cn/web/css/-moz-user-input/index.md b/files/zh-cn/web/css/-moz-user-input/index.md index 7ec80cc6e66ba7..250bb86839dfbb 100644 --- a/files/zh-cn/web/css/-moz-user-input/index.md +++ b/files/zh-cn/web/css/-moz-user-input/index.md @@ -1,5 +1,5 @@ --- -title: '-moz-user-input' +title: "-moz-user-input" slug: Web/CSS/-moz-user-input --- diff --git a/files/zh-cn/web/css/-webkit-border-before/index.md b/files/zh-cn/web/css/-webkit-border-before/index.md index 8d0acd4da4958a..5fb207fe4219dc 100644 --- a/files/zh-cn/web/css/-webkit-border-before/index.md +++ b/files/zh-cn/web/css/-webkit-border-before/index.md @@ -1,5 +1,5 @@ --- -title: '-webkit-border-before' +title: "-webkit-border-before" slug: Web/CSS/-webkit-border-before --- diff --git a/files/zh-cn/web/css/-webkit-line-clamp/index.md b/files/zh-cn/web/css/-webkit-line-clamp/index.md index cfee144e833b97..c12c2db871e1d9 100644 --- a/files/zh-cn/web/css/-webkit-line-clamp/index.md +++ b/files/zh-cn/web/css/-webkit-line-clamp/index.md @@ -54,7 +54,8 @@ slug: Web/CSS/-webkit-line-clamp ```html

- 在此示例中，-webkit-line-clamp 属性设置为 2，即文本在超过两行后将被截断。文本截断处将显示省略号。 + 在此示例中，-webkit-line-clamp 属性设置为 + 2，即文本在超过两行后将被截断。文本截断处将显示省略号。

``` diff --git a/files/zh-cn/web/css/-webkit-mask-attachment/index.md b/files/zh-cn/web/css/-webkit-mask-attachment/index.md index bb49d723db68f2..5b10c1a0b81f9b 100644 --- a/files/zh-cn/web/css/-webkit-mask-attachment/index.md +++ b/files/zh-cn/web/css/-webkit-mask-attachment/index.md @@ -1,5 +1,5 @@ --- -title: '-webkit-mask-attachment' +title: "-webkit-mask-attachment" slug: Web/CSS/-webkit-mask-attachment --- @@ -42,7 +42,7 @@ slug: Web/CSS/-webkit-mask-attachment ```css body { - -webkit-mask-image: url('images/mask.png'); + -webkit-mask-image: url("images/mask.png"); -webkit-mask-attachment: fixed; } ``` diff --git a/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md index a29167951194ac..134486857450ce 100644 --- a/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md +++ b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md @@ -1,5 +1,5 @@ --- -title: '-webkit-overflow-scrolling' +title: "-webkit-overflow-scrolling" slug: Web/CSS/-webkit-overflow-scrolling --- diff --git a/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md index 1f4c67a5cf8db2..e9572181379f2d 100644 --- a/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md +++ b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md @@ -1,5 +1,5 @@ --- -title: '-webkit-tap-highlight-color' +title: "-webkit-tap-highlight-color" slug: Web/CSS/-webkit-tap-highlight-color --- diff --git a/files/zh-cn/web/css/-webkit-touch-callout/index.md b/files/zh-cn/web/css/-webkit-touch-callout/index.md index d9089cbccda10a..c1565508e3de90 100644 --- a/files/zh-cn/web/css/-webkit-touch-callout/index.md +++ b/files/zh-cn/web/css/-webkit-touch-callout/index.md @@ -1,5 +1,5 @@ --- -title: '-webkit-touch-callout' +title: "-webkit-touch-callout" slug: Web/CSS/-webkit-touch-callout --- @@ -17,13 +17,13 @@ slug: Web/CSS/-webkit-touch-callout Formal syntax: default | none ``` -```html --webkit-touch-callout: default /* displays the callout */ --webkit-touch-callout: none /* disables the callout */ +```css +-webkit-touch-callout: default; /* displays the callout */ +-webkit-touch-callout: none; /* disables the callout */ --webkit-touch-callout: initial --webkit-touch-callout: inherit --webkit-touch-callout: unset +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: unset; ``` ### 可能的值 diff --git a/files/zh-cn/web/css/@charset/index.md b/files/zh-cn/web/css/@charset/index.md index e155888a0fa8b9..beba01b9a30799 100644 --- a/files/zh-cn/web/css/@charset/index.md +++ b/files/zh-cn/web/css/@charset/index.md @@ -1,5 +1,5 @@ --- -title: '@charset' +title: "@charset" slug: Web/CSS/@charset --- @@ -33,7 +33,7 @@ slug: Web/CSS/@charset ``` - _charset_ - - : 它是一个 {{cssxref("<string>")}} 表示字符编码被使用。它必须是在被 [IANA-registry](http://www.iana.org/assignments/character-sets) 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 *preferred* 的那个才会被使用。 + - : 它是一个 {{cssxref("<string>")}} 表示字符编码被使用。它必须是在被 [IANA-registry](http://www.iana.org/assignments/character-sets) 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 _preferred_ 的那个才会被使用。 ## 例子 @@ -41,10 +41,13 @@ slug: Web/CSS/@charset @charset "UTF-8"; @charset "utf-8"; /*大小写不敏感*/ /* 设置 css 的编码格式为 Unicode UTF-8 */ +``` + +```css-nolint example-bad @charset 'iso-8859-15'; /* 无效的，使用了错误的引号 */ -@charset "UTF-8"; /* 无效的，多于一个空格 */ - @charset "UTF-8"; /* 无效的，在 at-rule 之前多了一个空格 */ -@charset UTF-8; /* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS {{cssxref("<string>")}} */ +@charset "UTF-8"; /* 无效的，多于一个空格 */ + @charset "UTF-8"; /* 无效的，在 at-rule 之前多了一个空格 */ +@charset UTF-8; /* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS {{cssxref("<string>")}} */ ``` ## 规范 diff --git a/files/zh-cn/web/css/@counter-style/additive-symbols/index.md b/files/zh-cn/web/css/@counter-style/additive-symbols/index.md index 1e4f102a0db9df..8b482aadc4147d 100644 --- a/files/zh-cn/web/css/@counter-style/additive-symbols/index.md +++ b/files/zh-cn/web/css/@counter-style/additive-symbols/index.md @@ -9,8 +9,12 @@ slug: Web/CSS/@counter-style/additive-symbols ```css additive-symbols: 3 "0"; -additive-symbols: 3 "0", 2 "\2E\20"; -additive-symbols: 3 "0", 2 url(symbol.png); +additive-symbols: + 3 "0", + 2 "\2E\20"; +additive-symbols: + 3 "0", + 2 url(symbol.png); ``` 当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 {{cssxref('symbols')}}代替`additive-symbols` @@ -29,11 +33,11 @@ additive-symbols: 3 "0", 2 url(symbol.png); ```html ``` @@ -42,7 +46,10 @@ additive-symbols: 3 "0", 2 url(symbol.png); ```css @counter-style additive-symbols-example { system: additive; - additive-symbols:V 5, IV 4, I 1; + additive-symbols: + V 5, + IV 4, + I 1; } .list { list-style: additive-symbols-example; diff --git a/files/zh-cn/web/css/@counter-style/index.md b/files/zh-cn/web/css/@counter-style/index.md index d82f49fe0705ce..c84cb8ac4daed1 100644 --- a/files/zh-cn/web/css/@counter-style/index.md +++ b/files/zh-cn/web/css/@counter-style/index.md @@ -1,5 +1,5 @@ --- -title: '@counter-style' +title: "@counter-style" slug: Web/CSS/@counter-style --- @@ -61,6 +61,7 @@ slug: Web/CSS/@counter-style ``` - {{cssxref("additive-symbols")}} + - : 尽管 symbols 属性中指定的符号可以被 system 中定义的大部分算法所使用，但是一些 system 属性的值，比如 additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights. - {{cssxref("speak-as")}} @@ -80,7 +81,7 @@ slug: Web/CSS/@counter-style ```css .items { - list-style: circled-alpha; + list-style: circled-alpha; } ``` diff --git a/files/zh-cn/web/css/@document/index.md b/files/zh-cn/web/css/@document/index.md index d22b85c7c0d6dd..cd663c95b63ff6 100644 --- a/files/zh-cn/web/css/@document/index.md +++ b/files/zh-cn/web/css/@document/index.md @@ -1,5 +1,5 @@ --- -title: '@document' +title: "@document" slug: Web/CSS/@document --- @@ -8,7 +8,8 @@ slug: Web/CSS/@document `@document` [CSS](/zh-CN/docs/Web/CSS) [at-rule](/zh-CN/docs/Web/CSS/At-rule) 根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表（UserStyle）而设计的，但也可以在作者定义的样式表上使用。 ```css -@document url("https://www.example.com/") { +@document url("https://www.example.com/") +{ h1 { color: green; } @@ -34,8 +35,7 @@ slug: Web/CSS/@document @document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), - regexp("https:.*") -{ + regexp("https:.*") { /* 该条 CSS 规则会应用在下面的网页： + URL 为"http://www.w3.org/"的页面。 + 任何 URL 以"http://www.w3.org/Style/"开头的网页 diff --git a/files/zh-cn/web/css/@font-face/font-family/index.md b/files/zh-cn/web/css/@font-face/font-family/index.md index cdf23b2731b18d..4b31dc88b161b8 100644 --- a/files/zh-cn/web/css/@font-face/font-family/index.md +++ b/files/zh-cn/web/css/@font-face/font-family/index.md @@ -16,7 +16,7 @@ The **`font-family`** CSS descriptor allows authors to specify the font family f ```css /* values */ font-family: "font family"; -font-family: 'another font family'; +font-family: "another font family"; /* value */ font-family: examplefont; @@ -36,7 +36,7 @@ font-family: examplefont; ```css @font-face { font-family: examplefont; - src: url('examplefont.ttf'); + src: url("examplefont.ttf"); } ``` diff --git a/files/zh-cn/web/css/@font-face/font-style/index.md b/files/zh-cn/web/css/@font-face/font-style/index.md index 5eddd981984ab9..5dfa6ba75b67a9 100644 --- a/files/zh-cn/web/css/@font-face/font-style/index.md +++ b/files/zh-cn/web/css/@font-face/font-style/index.md @@ -43,7 +43,7 @@ As an example, consider the garamond font family, in its normal form, we get the ```css @font-face { font-family: garamond; - src: url('garamond.ttf'); + src: url("garamond.ttf"); } ``` @@ -58,7 +58,7 @@ On the other hand, if a true italicized version of the font family exists, we ca ```css @font-face { font-family: garamond; - src: url('garamond-italic.ttf'); + src: url("garamond-italic.ttf"); font-style: italic; } ``` diff --git a/files/zh-cn/web/css/@font-face/index.md b/files/zh-cn/web/css/@font-face/index.md index 6f65cef8fb9b20..8f9f3e60b35f28 100644 --- a/files/zh-cn/web/css/@font-face/index.md +++ b/files/zh-cn/web/css/@font-face/index.md @@ -1,5 +1,5 @@ --- -title: '@font-face' +title: "@font-face" slug: Web/CSS/@font-face --- @@ -10,8 +10,9 @@ slug: Web/CSS/@font-face ```css @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } ``` @@ -46,20 +47,22 @@ slug: Web/CSS/@font-face ```html - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - + + Web Font Sample + + + + This is Bitstream Vera Serif Bold. + ``` @@ -68,9 +71,8 @@ slug: Web/CSS/@font-face ```css @font-face { font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); font-weight: bold; } ``` @@ -81,15 +83,15 @@ slug: Web/CSS/@font-face ```css @font-face { - font-family: myFirstFont; - src: local("Times New Roman"); - font-weight:normal; + font-family: myFirstFont; + src: local("Times New Roman"); + font-weight: normal; } @font-face { - font-family: myFirstFont; - src: local(Consolas); - font-weight:bold; + font-family: myFirstFont; + src: local(Consolas); + font-weight: bold; } ``` @@ -104,7 +106,7 @@ slug: Web/CSS/@font-face @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + url(MgOpenModernaBold.ttf); font-weight: bold; } } diff --git a/files/zh-cn/web/css/@font-face/src/index.md b/files/zh-cn/web/css/@font-face/src/index.md index c741ea6c2939d8..2bc6b113edf719 100644 --- a/files/zh-cn/web/css/@font-face/src/index.md +++ b/files/zh-cn/web/css/@font-face/src/index.md @@ -18,20 +18,22 @@ slug: Web/CSS/@font-face/src ```css /* values */ src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */ -src: url(path/to/font.woff); /* Relative URL */ -src: url(path/to/font.woff) format("woff"); /* Explicit format */ -src: url('path/to/font.woff'); /* Quoted URL */ -src: url(path/to/svgfont.svg#example); /* Fragment identifying font */ +src: url(path/to/font.woff); /* Relative URL */ +src: url(path/to/font.woff) format("woff"); /* Explicit format */ +src: url("path/to/font.woff"); /* Quoted URL */ +src: url(path/to/svgfont.svg#example); /* Fragment identifying font */ /* values */ -src: local(font); /* Unquoted name */ +src: local(font); /* Unquoted name */ src: local(some font); /* Name containing space */ -src: local("font"); /* Quoted name */ +src: local("font"); /* Quoted name */ /* Multiple items */ -src: local(font), url(path/to/font.svg) format("svg"), - url(path/to/font.woff) format("woff"), - url(path/to/font.otf) format("opentype"); +src: + local(font), + url(path/to/font.svg) format("svg"), + url(path/to/font.woff) format("woff"), + url(path/to/font.otf) format("opentype"); ``` ### Values @@ -61,9 +63,10 @@ src: local(font), url(path/to/font.svg) format("svg"), ```css @font-face { font-family: examplefont; - src: local(Example Font), - url('examplefont.woff') format("woff"), - url('examplefont.otf') format("opentype"); + src: + local(Example Font), + url("examplefont.woff") format("woff"), + url("examplefont.otf") format("opentype"); } ``` diff --git a/files/zh-cn/web/css/@font-feature-values/index.md b/files/zh-cn/web/css/@font-feature-values/index.md index 4772ad6635c61d..dabc560f230b59 100644 --- a/files/zh-cn/web/css/@font-feature-values/index.md +++ b/files/zh-cn/web/css/@font-feature-values/index.md @@ -1,5 +1,5 @@ --- -title: '@font-feature-values' +title: "@font-feature-values" slug: Web/CSS/@font-feature-values --- @@ -10,21 +10,25 @@ slug: Web/CSS/@font-feature-values **`@font-feature-values`** [CSS](/zh-CN/docs/Web/CSS) [at-rule](/zh-CN/docs/Web/CSS/At-rule) 允许作者在{{cssxref("font-variant-alternates")}} 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。 ```css -@font-feature-values Font One { /* How to activate nice-style in Font One */ +@font-feature-values Font One { + /* How to activate nice-style in Font One */ @styleset { nice-style: 12; } } -@font-feature-values Font Two { /* How to activate nice-style in Font Two */ +@font-feature-values Font Two { + /* How to activate nice-style in Font Two */ @styleset { nice-style: 4; } } -… +/* … */ -.nice-look { font-variant-alternates: styleset(nice-style); } /* Independent of the font */ +.nice-look { + font-variant-alternates: styleset(nice-style); +} /* Independent of the font */ ``` The `@font-feature-values` at-rule may be used at the top level of a CSS, but also inside any [CSS conditional-group at-rule](/zh-CN/docs/Web/CSS/At-rule#Conditional_Group_Rules). diff --git a/files/zh-cn/web/css/@import/index.md b/files/zh-cn/web/css/@import/index.md index 9718988e7c6a1d..97dc03633e1d60 100644 --- a/files/zh-cn/web/css/@import/index.md +++ b/files/zh-cn/web/css/@import/index.md @@ -1,5 +1,5 @@ --- -title: '@import' +title: "@import" slug: Web/CSS/@import --- @@ -34,10 +34,10 @@ slug: Web/CSS/@import ```css @import url("fineprint.css") print; @import url("bluish.css") projection, tv; -@import 'custom.css'; +@import "custom.css"; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; -@import url('landscape.css') screen and (orientation:landscape); +@import url("landscape.css") screen and (orientation: landscape); ``` ## 规范 diff --git a/files/zh-cn/web/css/@keyframes/index.md b/files/zh-cn/web/css/@keyframes/index.md index 0f634ba72b7f17..155df2fa0a8fe0 100644 --- a/files/zh-cn/web/css/@keyframes/index.md +++ b/files/zh-cn/web/css/@keyframes/index.md @@ -1,5 +1,5 @@ --- -title: '@keyframes' +title: "@keyframes" slug: Web/CSS/@keyframes --- @@ -43,10 +43,21 @@ JavaScript 可以通过 CSS 对象模型的 {{domxref("CSSKeyframesRule")}} 接 ```css @keyframes identifier { - 0% { top: 0; left: 0; } - 30% { top: 50px; } - 68%, 72% { left: 50px; } - 100% { top: 100px; left: 100%; } + 0% { + top: 0; + left: 0; + } + 30% { + top: 50px; + } + 68%, + 72% { + left: 50px; + } + 100% { + top: 100px; + left: 100%; + } } ``` @@ -58,10 +69,19 @@ JavaScript 可以通过 CSS 对象模型的 {{domxref("CSSKeyframesRule")}} 接 ```css @keyframes identifier { - 0% { top: 0; } - 50% { top: 30px; left: 20px; } - 50% { top: 10px; } - 100% { top: 0; } + 0% { + top: 0; + } + 50% { + top: 30px; + left: 20px; + } + 50% { + top: 10px; + } + 100% { + top: 0; + } } ``` @@ -75,16 +95,26 @@ Firefox 14 开始支持层叠 keyframes。 ```css @keyframes important1 { - from { margin-top: 50px; } - 50% { margin-top: 150px !important; } /* 忽略 */ - to { margin-top: 100px; } + from { + margin-top: 50px; + } + 50% { + margin-top: 150px !important; + } /* 忽略 */ + to { + margin-top: 100px; + } } @keyframes important2 { - from { margin-top: 50px; - margin-bottom: 100px; } - to { margin-top: 150px !important; /* 忽略 */ - margin-bottom: 50px; } + from { + margin-top: 50px; + margin-bottom: 100px; + } + to { + margin-top: 150px !important; /* 忽略 */ + margin-bottom: 50px; + } } ``` diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md index 3349dd66aec4f2..4d87dfda3b18b9 100644 --- a/files/zh-cn/web/css/@layer/index.md +++ b/files/zh-cn/web/css/@layer/index.md @@ -1,5 +1,5 @@ --- -title: '@layer' +title: "@layer" slug: Web/CSS/@layer --- @@ -20,11 +20,11 @@ slug: Web/CSS/@layer ```css @layer utilities { .padding-sm { - padding: .5rem; + padding: 0.5rem; } .padding-lg { - padding: .8rem; + padding: 0.8rem; } } ``` @@ -32,19 +32,19 @@ slug: Web/CSS/@layer 一个级联层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内： ```css -@import(utilities.css) layer(utilities); +@import (utilities.css) layer(utilities); ``` 你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层： ```css -@layer utilities +@layer utilities; ``` 或者，多个命名层也可以被同时定义。例如： ```css -@layer theme, layout, utilities +@layer theme, layout, utilities; ``` 这一做法很有用，因为层最初被指定的顺序决定了它是否有优先级。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。 @@ -62,7 +62,6 @@ slug: Web/CSS/@layer ```css @layer framework { @layer layout { - } } ``` @@ -140,9 +139,11 @@ p { #### HTML ```html -
I am displayed in color: rebeccapurple -because the type layer comes after the base layer. -My green border, font-size, and padding come from the base layer.
+
+ I am displayed in color: rebeccapurple because the + type layer comes after the base layer. My green + border, font-size, and padding come from the base layer. +
``` #### CSS @@ -161,7 +162,7 @@ My green border, font-size, and padding come from the base layer. - + ``` ### CSS diff --git a/files/zh-cn/web/css/@media/aspect-ratio/index.md b/files/zh-cn/web/css/@media/aspect-ratio/index.md index 1c20b07d72137c..d0ad22cda7d082 100644 --- a/files/zh-cn/web/css/@media/aspect-ratio/index.md +++ b/files/zh-cn/web/css/@media/aspect-ratio/index.md @@ -18,7 +18,7 @@ slug: Web/CSS/@media/aspect-ratio ### HTML ```html -
+
Watch this element as you resize your viewport's width and height.
``` @@ -36,7 +36,7 @@ slug: Web/CSS/@media/aspect-ratio /* 最大宽高比 */ @media (max-aspect-ratio: 3/2) { div { - background: #9ff; /* cyan */ + background: #9ff; /* cyan */ } } diff --git a/files/zh-cn/web/css/@media/device-height/index.md b/files/zh-cn/web/css/@media/device-height/index.md index c324eb53a8c7d9..1d9a10fb168e22 100644 --- a/files/zh-cn/web/css/@media/device-height/index.md +++ b/files/zh-cn/web/css/@media/device-height/index.md @@ -16,7 +16,10 @@ slug: Web/CSS/@media/device-height 在高度低于 800px 时加载指定样式 ```html - + ``` ## Specifications diff --git a/files/zh-cn/web/css/@media/index.md b/files/zh-cn/web/css/@media/index.md index e6ecdb53f67e21..bdead41391f178 100644 --- a/files/zh-cn/web/css/@media/index.md +++ b/files/zh-cn/web/css/@media/index.md @@ -1,5 +1,5 @@ --- -title: '@media' +title: "@media" slug: Web/CSS/@media --- @@ -120,6 +120,7 @@ _逻辑操作符_（_logical operator_）`not`、`and`、`only` 和 `or` 可用 - `and` - : 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为 `true`，它还用于将媒体功能与媒体类型结合在一起。 - `not` + - : 用于否定媒体查询，如果不满足这个条件则返回 `true`，否则返回 `false`。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 `not` 运算符，则*还必须*指定媒体类型。 > **备注：** 在 Level 3 中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。 diff --git a/files/zh-cn/web/css/@media/prefers-color-scheme/index.md b/files/zh-cn/web/css/@media/prefers-color-scheme/index.md index 1407600836fc63..7b4a3e0d365dea 100644 --- a/files/zh-cn/web/css/@media/prefers-color-scheme/index.md +++ b/files/zh-cn/web/css/@media/prefers-color-scheme/index.md @@ -31,7 +31,8 @@ slug: Web/CSS/@media/prefers-color-scheme ```html
Day (initial)
Day (changes in light scheme)
-
Day (changes in dark scheme)

+
Day (changes in dark scheme)
+
Night (initial)
Night (changes in light scheme)
@@ -41,20 +42,39 @@ slug: Web/CSS/@media/prefers-color-scheme ### CSS ```css -.day { background: #eee; color: black; } -.night { background: #333; color: white; } +.day { + background: #eee; + color: black; +} +.night { + background: #333; + color: white; +} @media (prefers-color-scheme: dark) { - .day.dark-scheme { background: #333; color: white; } - .night.dark-scheme { background: black; color: #ddd; } + .day.dark-scheme { + background: #333; + color: white; + } + .night.dark-scheme { + background: black; + color: #ddd; + } } @media (prefers-color-scheme: light) { - .day.light-scheme { background: white; color: #555; } - .night.light-scheme { background: #eee; color: black; } + .day.light-scheme { + background: white; + color: #555; + } + .night.light-scheme { + background: #eee; + color: black; + } } -.day, .night { +.day, +.night { display: inline-block; padding: 1em; width: 7em; diff --git a/files/zh-cn/web/css/@media/prefers-reduced-motion/index.md b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.md index 26ce87841a7e3f..581b1cbfe08454 100644 --- a/files/zh-cn/web/css/@media/prefers-reduced-motion/index.md +++ b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.md @@ -56,7 +56,10 @@ slug: Web/CSS/@media/prefers-reduced-motion .animation { background-color: rebeccapurple; color: #fff; - font: 1.2em Helvetica, arial, sans-serif; + font: + 1.2em Helvetica, + arial, + sans-serif; width: 200px; padding: 1em; border-radius: 1em; @@ -76,22 +79,22 @@ slug: Web/CSS/@media/prefers-reduced-motion @keyframes vibrate { 0% { - transform: translate(0); + transform: translate(0); } 20% { - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { - transform: translate(0); + transform: translate(0); } } ``` diff --git a/files/zh-cn/web/css/@namespace/index.md b/files/zh-cn/web/css/@namespace/index.md index e8e23d49291bdc..132c525d3661dc 100644 --- a/files/zh-cn/web/css/@namespace/index.md +++ b/files/zh-cn/web/css/@namespace/index.md @@ -1,5 +1,5 @@ --- -title: '@namespace' +title: "@namespace" slug: Web/CSS/@namespace --- @@ -42,13 +42,16 @@ slug: Web/CSS/@namespace @namespace svg url(http://www.w3.org/2000/svg); /* 匹配所有的 XHTML 元素，因为 XHTML 是默认无前缀命名空间 */ -a {} +a { +} /* 匹配所有的 SVG 元素 */ -svg|a {} +svg|a { +} /* 匹配 XHTML 和 SVG 元素 */ -*|a {} +*|a { +} ``` ## 规范 diff --git a/files/zh-cn/web/css/@page/index.md b/files/zh-cn/web/css/@page/index.md index 6bb65c847a8659..bb9fb14f76f381 100644 --- a/files/zh-cn/web/css/@page/index.md +++ b/files/zh-cn/web/css/@page/index.md @@ -1,5 +1,5 @@ --- -title: '@page' +title: "@page" slug: Web/CSS/@page --- diff --git a/files/zh-cn/web/css/@property/index.md b/files/zh-cn/web/css/@property/index.md index ae954db571bc78..dd943d2021398a 100644 --- a/files/zh-cn/web/css/@property/index.md +++ b/files/zh-cn/web/css/@property/index.md @@ -1,5 +1,5 @@ --- -title: '@property' +title: "@property" slug: Web/CSS/@property --- @@ -13,7 +13,7 @@ slug: Web/CSS/@property ```css @property --property-name { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -33,7 +33,7 @@ slug: Web/CSS/@property ```css @property --my-color { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -43,10 +43,10 @@ slug: Web/CSS/@property ```js window.CSS.registerProperty({ - name: '--my-color', - syntax: '', + name: "--my-color", + syntax: "", inherits: false, - initialValue: '#c0ffee', + initialValue: "#c0ffee", }); ``` diff --git a/files/zh-cn/web/css/@property/inherits/index.md b/files/zh-cn/web/css/@property/inherits/index.md index a7b658041f9e8b..d926698932ac9a 100644 --- a/files/zh-cn/web/css/@property/inherits/index.md +++ b/files/zh-cn/web/css/@property/inherits/index.md @@ -11,13 +11,13 @@ slug: Web/CSS/@property/inherits ```css @property --property-name { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @property --property-name { - syntax: ''; + syntax: ""; inherits: true; initial-value: #c0ffee; } @@ -48,7 +48,7 @@ slug: Web/CSS/@property/inherits ```css @property --my-color { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -58,10 +58,10 @@ slug: Web/CSS/@property/inherits ```js window.CSS.registerProperty({ - name: '--my-color', - syntax: '', + name: "--my-color", + syntax: "", inherits: false, - initialValue: '#c0ffee', + initialValue: "#c0ffee", }); ``` diff --git a/files/zh-cn/web/css/@property/initial-value/index.md b/files/zh-cn/web/css/@property/initial-value/index.md index 912b23f2b45e84..f6291c5ba8f5f4 100644 --- a/files/zh-cn/web/css/@property/initial-value/index.md +++ b/files/zh-cn/web/css/@property/initial-value/index.md @@ -13,13 +13,13 @@ slug: Web/CSS/@property/initial-value ```css @property --property-name { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @property --property-name { - syntax: ''; + syntax: ""; inherits: true; initial-value: #c0ffee; } @@ -47,7 +47,7 @@ slug: Web/CSS/@property/initial-value ```css @property --my-color { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -57,10 +57,10 @@ slug: Web/CSS/@property/initial-value ```js window.CSS.registerProperty({ - name: '--my-color', - syntax: '', + name: "--my-color", + syntax: "", inherits: false, - initialValue: '#c0ffee', + initialValue: "#c0ffee", }); ``` diff --git a/files/zh-cn/web/css/@property/syntax/index.md b/files/zh-cn/web/css/@property/syntax/index.md index 1eb8d016aacbef..1dd6d79467aff9 100644 --- a/files/zh-cn/web/css/@property/syntax/index.md +++ b/files/zh-cn/web/css/@property/syntax/index.md @@ -12,13 +12,13 @@ slug: Web/CSS/@property/syntax 如下是所有的有效 syntax 字符串： ```css -syntax: ''; /* 接收一个颜色值 */ +syntax: ""; /* 接收一个颜色值 */ -syntax: ' | '; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */ +syntax: " | "; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */ -syntax: 'small | medium | large'; /* 接收这些参数值之一作为自定义标识符 */ +syntax: "small | medium | large"; /* 接收这些参数值之一作为自定义标识符 */ -syntax: '*'; /* 任何有效字符 */ +syntax: "*"; /* 任何有效字符 */ ``` ## 取值 @@ -72,7 +72,7 @@ syntax: '*'; /* 任何有效字符 */ ```css @property --my-color { - syntax: ''; + syntax: ""; inherits: false; initial-value: #c0ffee; } @@ -82,10 +82,10 @@ syntax: '*'; /* 任何有效字符 */ ```js window.CSS.registerProperty({ - name: '--my-color', - syntax: '', + name: "--my-color", + syntax: "", inherits: false, - initialValue: '#c0ffee', + initialValue: "#c0ffee", }); ``` diff --git a/files/zh-cn/web/css/@supports/index.md b/files/zh-cn/web/css/@supports/index.md index f28acb0a316920..31591d286d9293 100644 --- a/files/zh-cn/web/css/@supports/index.md +++ b/files/zh-cn/web/css/@supports/index.md @@ -1,5 +1,5 @@ --- -title: '@supports' +title: "@supports" slug: Web/CSS/@supports --- @@ -34,7 +34,8 @@ slug: Web/CSS/@supports 最基本的支持条件就是 CSS 声明，也就是一个 CSS 属性后跟一个值，中间用冒号分开。如果 {{cssxref("transform-origin")}} 的实现语法认为 `5% 5%` 是有效的值，则下面的表达式会返回 true。 ```css -@supports (transform-origin: 5% 5%) {} +@supports (transform-origin: 5% 5%) { +} ``` ### 函数语法 @@ -46,7 +47,8 @@ slug: Web/CSS/@supports 测试浏览器是否支持经过测试的选择器语法。如果浏览器支持[子组合器](/zh-CN/docs/Web/CSS/Child_combinator)，则以下示例返回 true： ```css -@supports selector(A > B) {} +@supports selector(A > B) { +} ``` ### `not` 操作符 @@ -54,14 +56,17 @@ slug: Web/CSS/@supports 将 `not` 操作符放在任何表达式之前就能否定一条表达式。如果 {{CSSxRef("transform-origin")}} 的实现语法认为 `10em 10em 10em` 是**无效**的，则下面的表达式会返回 true。 ```css -@supports not (transform-origin: 10em 10em 10em) {} +@supports not (transform-origin: 10em 10em 10em) { +} ``` 和其他操作符一样，`not` 操作符可以应用在任意复杂度的表达式上。下面的几个例子中都是合法的表达式： ```css -@supports not (not (transform-origin: 2px)) {} -@supports (display: grid) and (not (display: inline-grid)) {} +@supports not (not (transform-origin: 2px)) { +} +@supports (display: grid) and (not (display: inline-grid)) { +} ``` > **备注：** 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。 @@ -71,14 +76,17 @@ slug: Web/CSS/@supports `and` 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式，如果两个原始表达式的值**都为真**，则生成的表达式也为真。在下例中，当且仅当两个原始表达式同时为真时，整个表达式才为真： ```css -@supports (display: table-cell) and (display: list-item) {} +@supports (display: table-cell) and (display: list-item) { +} ``` 可以将多个合取词并置而不需要更多的括号。以下两者都是等效的： ```css -@supports (display: table-cell) and (display: list-item) and (display:run-in) {} -@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} +@supports (display: table-cell) and (display: list-item) and (display: run-in) { +} +@supports (display: table-cell) and ((display: list-item) and (display: run-in)) { +} ``` ### `or` 操作符 @@ -86,17 +94,26 @@ slug: Web/CSS/@supports `or` 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式，如果两个原始表达式的值**有一个或者都**为真，则生成的表达式也为真。在下例中，当两个原始表达式中至少有一个为真时，整个表达式才为真： ```css -@supports (transform-style: preserve) or (-moz-transform-style: preserve) {} +@supports (transform-style: preserve) or (-moz-transform-style: preserve) { +} ``` 可以将多个析取词并置而不需要更多的括号。以下两者都是等效的： ```css @supports (transform-style: preserve) or (-moz-transform-style: preserve) or - (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} + (-o-transform-style: preserve) or (-webkit-transform-style: preserve) { +} -@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or - ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {} +@supports (transform-style: preserve-3d) or + ( + (-moz-transform-style: preserve-3d) or + ( + (-o-transform-style: preserve-3d) or + (-webkit-transform-style: preserve-3d) + ) + ) { +} ``` > **备注：** 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。 @@ -111,9 +128,9 @@ slug: Web/CSS/@supports ```css @supports (animation-name: test) { - … /* 如果支持不带前缀的 animation-name，则下面指定的 CSS 会生效 */ - @keyframes { /* @supports 是一个 CSS 条件组 at-rule，它可以包含其他相关的 at-rules */ - … + /* 如果支持不带前缀的 animation-name，则下面指定的 CSS 会生效 */ + @keyframes { + /* @supports 是一个 CSS 条件组 at-rule，它可以包含其他相关的 at-rules */ } } ``` @@ -123,15 +140,15 @@ slug: Web/CSS/@supports ```css @supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px) ) { - … /* 如果支持不带前缀以及带前缀的 perspective 属性，则下面指定的 CSS 会生效 */ + /* 如果支持不带前缀以及带前缀的 perspective 属性，则下面指定的 CSS 会生效 */ } ``` ### 检测是否不支持指定的 CSS 属性 ```css -@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ - … /* 这里的 CSS 代码用来模拟 text-align-last:justify */ +@supports not ((text-align-last:justify) or (-moz-text-align-last:justify)) { + /* 这里的 CSS 代码用来模拟 text-align-last:justify */ } ``` @@ -152,14 +169,14 @@ slug: Web/CSS/@supports ```css /* 这条 CSS 规则在不支持 is:() 的浏览器中无效 */ :is(ul, ol) > li { - … /* 支持 :is(...) 选择器时，这里的 CSS 生效 */ + /* 支持 :is(...) 选择器时，这里的 CSS 生效 */ } @supports not selector(:is(a, b)) { /* 不支持 :is() 时的备选方案 */ ul > li, ol > li { - … /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */ + /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */ } } @@ -169,7 +186,7 @@ slug: Web/CSS/@supports 只有部分生效 */ :is(:nth-child(1n of ul, ol) a, details > summary) { - … /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时， + /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时， 这里的 CSS 会生效 */ } } diff --git a/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.md b/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.md index e223364382d220..3f365c70bd01c8 100644 --- a/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.md @@ -1,5 +1,5 @@ --- -title: ':blank' +title: ":blank" slug: Web/CSS/:-moz-only-whitespace --- @@ -22,7 +22,7 @@ slug: Web/CSS/:-moz-only-whitespace ### HTML ```html -
+
``` ### CSS diff --git a/files/zh-cn/web/css/_colon_active/index.md b/files/zh-cn/web/css/_colon_active/index.md index e8b933102a8c8b..a07b0570ac3fdd 100644 --- a/files/zh-cn/web/css/_colon_active/index.md +++ b/files/zh-cn/web/css/_colon_active/index.md @@ -1,5 +1,5 @@ --- -title: ':active' +title: ":active" slug: Web/CSS/:active --- @@ -33,7 +33,8 @@ a:active { #### HTML ```html -

This paragraph contains a link: +

+ This paragraph contains a link: This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.

@@ -42,12 +43,27 @@ a:active { #### CSS ```css -a:link { color: blue; } /* 未访问链接 */ -a:visited { color: purple; } /* 已访问链接 */ -a:hover { background: yellow; } /* 用户鼠标悬停 */ -a:active { color: red; } /* 激活链接 */ +a:link { + /* 未访问链接 */ + color: blue; +} +a:visited { + /* 已访问链接 */ + color: purple; +} +a:hover { + /* 用户鼠标悬停 */ + background: yellow; +} +a:active { + /* 激活链接 */ + color: red; +} -p:active { background: #eee; } /* 激活段落 */ +p:active { + /* 激活段落 */ + background: #eee; +} ``` #### 结果 diff --git a/files/zh-cn/web/css/_colon_any-link/index.md b/files/zh-cn/web/css/_colon_any-link/index.md index 3c1c63049d4273..b389c0b29f440a 100644 --- a/files/zh-cn/web/css/_colon_any-link/index.md +++ b/files/zh-cn/web/css/_colon_any-link/index.md @@ -1,5 +1,5 @@ --- -title: ':any-link' +title: ":any-link" slug: Web/CSS/:any-link --- diff --git a/files/zh-cn/web/css/_colon_blank/index.md b/files/zh-cn/web/css/_colon_blank/index.md index 6f6b5399d9914e..f2870f8df24ab1 100644 --- a/files/zh-cn/web/css/_colon_blank/index.md +++ b/files/zh-cn/web/css/_colon_blank/index.md @@ -1,5 +1,5 @@ --- -title: ':blank' +title: ":blank" slug: Web/CSS/:blank original_slug: Web/CSS/:blank空白伪类 --- diff --git a/files/zh-cn/web/css/_colon_checked/index.md b/files/zh-cn/web/css/_colon_checked/index.md index 587a93bee03698..e0612c36a4fb96 100644 --- a/files/zh-cn/web/css/_colon_checked/index.md +++ b/files/zh-cn/web/css/_colon_checked/index.md @@ -1,5 +1,5 @@ --- -title: ':checked' +title: ":checked" slug: Web/CSS/:checked --- @@ -35,15 +35,15 @@ slug: Web/CSS/:checked ```html
- + - +
- +
@@ -99,14 +99,38 @@ option:checked { - + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
Column #1Column #2Column #3
Column #1Column #2Column #3
[cell text][cell text][cell text]
[cell text][cell text][cell text]
[cell text][cell text][cell text]
[cell text][cell text][cell text]
diff --git a/files/zh-cn/web/css/_colon_default/index.md b/files/zh-cn/web/css/_colon_default/index.md index a42bc18111e46b..7a7b945f3ced74 100644 --- a/files/zh-cn/web/css/_colon_default/index.md +++ b/files/zh-cn/web/css/_colon_default/index.md @@ -1,5 +1,5 @@ --- -title: ':default' +title: ":default" slug: Web/CSS/:default --- @@ -27,16 +27,16 @@ input:default { ### HTML ```html - + - + - + - + ``` diff --git a/files/zh-cn/web/css/_colon_defined/index.md b/files/zh-cn/web/css/_colon_defined/index.md index 88d007aea8240d..5c4a28390c5bb8 100644 --- a/files/zh-cn/web/css/_colon_defined/index.md +++ b/files/zh-cn/web/css/_colon_defined/index.md @@ -1,5 +1,5 @@ --- -title: ':defined' +title: ":defined" slug: Web/CSS/:defined --- @@ -30,18 +30,19 @@ simple-custom:defined { 在这个 demo 中我们定义了一个非常简单的自定义元素： ```js -customElements.define('simple-custom', +customElements.define( + "simple-custom", class extends HTMLElement { constructor() { super(); - let divElem = document.createElement('div'); - divElem.textContent = this.getAttribute('text'); + let divElem = document.createElement("div"); + divElem.textContent = this.getAttribute("text"); - let shadowRoot = this.attachShadow({mode: 'open'}) - .appendChild(divElem); - } -}) + let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem); + } + }, +); ``` 然后在文档中插入一个该元素的副本，以及一个标准的 `

` 标签： diff --git a/files/zh-cn/web/css/_colon_dir/index.md b/files/zh-cn/web/css/_colon_dir/index.md index f315de91f9986d..228bbe0f903c01 100644 --- a/files/zh-cn/web/css/_colon_dir/index.md +++ b/files/zh-cn/web/css/_colon_dir/index.md @@ -1,5 +1,5 @@ --- -title: ':dir()' +title: ":dir()" slug: Web/CSS/:dir --- @@ -26,7 +26,8 @@ slug: Web/CSS/:dir ```html

test1 -
test2 +
+ test2
עִבְרִית
diff --git a/files/zh-cn/web/css/_colon_disabled/index.md b/files/zh-cn/web/css/_colon_disabled/index.md index 63fb92b9b3f315..5e22b7854222cd 100644 --- a/files/zh-cn/web/css/_colon_disabled/index.md +++ b/files/zh-cn/web/css/_colon_disabled/index.md @@ -1,5 +1,5 @@ --- -title: ':disabled' +title: ":disabled" slug: Web/CSS/:disabled --- @@ -56,10 +56,14 @@ input[type="text"]:disabled { ```js // 等待页面加载完毕 -document.addEventListener('DOMContentLoaded', function () { - // 将“change”事件监听器附加到复选框 - document.getElementById('billing-checkbox').onchange = toggleBilling; -}, false); +document.addEventListener( + "DOMContentLoaded", + function () { + // 将“change”事件监听器附加到复选框 + document.getElementById("billing-checkbox").onchange = toggleBilling; + }, + false, +); function toggleBilling() { // 选择 billing 文本字段 diff --git a/files/zh-cn/web/css/_colon_enabled/index.md b/files/zh-cn/web/css/_colon_enabled/index.md index d4ce36e608444c..35c0ad0f2acc80 100644 --- a/files/zh-cn/web/css/_colon_enabled/index.md +++ b/files/zh-cn/web/css/_colon_enabled/index.md @@ -1,5 +1,5 @@ --- -title: ':enabled' +title: ":enabled" slug: Web/CSS/:enabled --- diff --git a/files/zh-cn/web/css/_colon_first-child/index.md b/files/zh-cn/web/css/_colon_first-child/index.md index 14a37c5f2e658d..5d8c413a077163 100644 --- a/files/zh-cn/web/css/_colon_first-child/index.md +++ b/files/zh-cn/web/css/_colon_first-child/index.md @@ -1,5 +1,5 @@ --- -title: ':first-child' +title: ":first-child" slug: Web/CSS/:first-child --- diff --git a/files/zh-cn/web/css/_colon_first-of-type/index.md b/files/zh-cn/web/css/_colon_first-of-type/index.md index 48bf168bea359e..97e3bb190dd6d0 100644 --- a/files/zh-cn/web/css/_colon_first-of-type/index.md +++ b/files/zh-cn/web/css/_colon_first-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':first-of-type' +title: ":first-of-type" slug: Web/CSS/:first-of-type --- diff --git a/files/zh-cn/web/css/_colon_first/index.md b/files/zh-cn/web/css/_colon_first/index.md index b55f8d5f16f325..c09a5daae79824 100644 --- a/files/zh-cn/web/css/_colon_first/index.md +++ b/files/zh-cn/web/css/_colon_first/index.md @@ -1,5 +1,5 @@ --- -title: ':first' +title: ":first" slug: Web/CSS/:first --- diff --git a/files/zh-cn/web/css/_colon_focus-visible/index.md b/files/zh-cn/web/css/_colon_focus-visible/index.md index d91ed03c31643b..73cf130c556468 100644 --- a/files/zh-cn/web/css/_colon_focus-visible/index.md +++ b/files/zh-cn/web/css/_colon_focus-visible/index.md @@ -1,5 +1,5 @@ --- -title: ':focus-visible' +title: ":focus-visible" slug: Web/CSS/:focus-visible --- @@ -26,16 +26,17 @@ slug: Web/CSS/:focus-visible 在这个例子中，`:focus-visible` 选择器利用客户端 (UA) 的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘 tab 切换控件有何不同。请注意元素的表现与具有 `:focus` 样式的元素的区别。 ```html -
-
-
-
-
+
+
+
+
+
``` ```css -input, button { +input, +button { margin: 10px; } diff --git a/files/zh-cn/web/css/_colon_focus-within/index.md b/files/zh-cn/web/css/_colon_focus-within/index.md index 23f56b8533ce32..c573e1532d9a08 100644 --- a/files/zh-cn/web/css/_colon_focus-within/index.md +++ b/files/zh-cn/web/css/_colon_focus-within/index.md @@ -1,5 +1,5 @@ --- -title: ':focus-within' +title: ":focus-within" slug: Web/CSS/:focus-within --- @@ -30,10 +30,10 @@ slug: Web/CSS/:focus-within
- -
+ +
- +
``` diff --git a/files/zh-cn/web/css/_colon_focus/index.md b/files/zh-cn/web/css/_colon_focus/index.md index e8d48d7079dde8..d8087f3c8df320 100644 --- a/files/zh-cn/web/css/_colon_focus/index.md +++ b/files/zh-cn/web/css/_colon_focus/index.md @@ -1,5 +1,5 @@ --- -title: ':focus' +title: ":focus" slug: Web/CSS/:focus --- diff --git a/files/zh-cn/web/css/_colon_fullscreen/index.md b/files/zh-cn/web/css/_colon_fullscreen/index.md index 3bd66b5eded55a..f36402dd984d0f 100644 --- a/files/zh-cn/web/css/_colon_fullscreen/index.md +++ b/files/zh-cn/web/css/_colon_fullscreen/index.md @@ -1,5 +1,5 @@ --- -title: ':fullscreen' +title: ":fullscreen" slug: Web/CSS/:fullscreen --- @@ -31,7 +31,8 @@ slug: Web/CSS/:fullscreen

MDN Web 文档演示：:fullscreen 伪类

- 此演示使用 :fullscreen 伪类完全使用 CSS 来实现自动更改用于开启和关闭全屏模式的按钮的样式。 + 此演示使用 :fullscreen 伪类完全使用 CSS + 来实现自动更改用于开启和关闭全屏模式的按钮的样式。

diff --git a/files/zh-cn/web/css/_colon_has/index.md b/files/zh-cn/web/css/_colon_has/index.md index 9d3e07e6f2696c..5d1e478625a7f5 100644 --- a/files/zh-cn/web/css/_colon_has/index.md +++ b/files/zh-cn/web/css/_colon_has/index.md @@ -11,7 +11,9 @@ CSS 函数式[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes) **`:has()`** 表示一 /* Selects an h1 heading with a paragraph element that immediately follows the h1 and applies the style to h1 */ -h1:has(+ p) { margin-bottom: 0; } +h1:has(+ p) { + margin-bottom: 0; +} ``` `:has()` 伪类的[优先级](/zh-CN/docs/Web/CSS/Specificity)计算方法与 {{CSSxRef(":is", ":is()")}} 和 {{CSSxRef(":not", ":not()")}} 相同：以其参数中具体的选择器进行计算。 @@ -40,12 +42,18 @@ h1:has(+ p) { margin-bottom: 0; }

Morning Times

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

Morning Times

Delivering you news every morning

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

``` @@ -54,9 +62,9 @@ h1:has(+ p) { margin-bottom: 0; } ```css hidden section { - display: flex; - align-items: start; - justify-content: space-around; + display: flex; + align-items: start; + justify-content: space-around; } article { @@ -64,19 +72,21 @@ article { width: 40%; } -h1, h2 { +h1, +h2 { font-size: 1.2em; } h2 { - font-size: 1.0em; + font-size: 1em; color: rgb(150, 149, 149); } ``` ```css -h1, h2 { - margin: 0 0 1.0rem 0; +h1, +h2 { + margin: 0 0 1rem 0; } h1:has(+ h2) { @@ -101,13 +111,19 @@ h1:has(+ h2) {

Morning Times

Delivering you news every morning

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

Morning Times

Delivering you news every morning

8:00 am

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

``` @@ -116,9 +132,9 @@ h1:has(+ h2) { ```css hidden section { - display: flex; - align-items: start; - justify-content: space-around; + display: flex; + align-items: start; + justify-content: space-around; } article { @@ -131,7 +147,7 @@ h1 { } h2 { - font-size: 1.0em; + font-size: 1em; color: rgb(150, 149, 149); } @@ -142,8 +158,10 @@ h3 { ``` ```css -h1, h2, h3 { - margin: 0 0 1.0rem 0; +h1, +h2, +h3 { + margin: 0 0 1rem 0; } :is(h1, h2, h3):has(+ :is(h2, h3, h4)) { diff --git a/files/zh-cn/web/css/_colon_host_function/index.md b/files/zh-cn/web/css/_colon_host_function/index.md index 64bbed0dfe156d..0ec3976c55b02a 100644 --- a/files/zh-cn/web/css/_colon_host_function/index.md +++ b/files/zh-cn/web/css/_colon_host_function/index.md @@ -1,5 +1,5 @@ --- -title: ':host()' +title: ":host()" slug: Web/CSS/:host_function original_slug: Web/CSS/:host() --- @@ -14,9 +14,9 @@ original_slug: Web/CSS/:host() ```css /* 选择阴影根元素，仅当它与选择器参数匹配 */ - :host(.special-custom-element) { - font-weight: bold; - } +:host(.special-custom-element) { + font-weight: bold; +} ``` ## 语法 @@ -32,26 +32,29 @@ original_slug: Web/CSS/:host() 在这个例子中，有一个简单的自定义元素 `` 可以用它包裹文本： ```html -

Host selectors example

+

+ Host selectors example +

``` 在元素的构造函数中，创建`style`和`span`元素，填充`span`自定义元素的内容，并`style`使用一些 CSS 规则填充元素： ```js -let style = document.createElement('style'); -let span = document.createElement('span'); +let style = document.createElement("style"); +let span = document.createElement("span"); span.textContent = this.textContent; -const shadowRoot = this.attachShadow({mode: 'open'}); +const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(style); shadowRoot.appendChild(span); -style.textContent = 'span:hover { text-decoration: underline; }' + - ':host-context(h1) { font-style: italic; }' + - ':host-context(h1):after { content: " - no links in headers!" }' + - ':host-context(article, aside) { color: gray; }' + - ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +style.textContent = + "span:hover { text-decoration: underline; }" + + ":host-context(h1) { font-style: italic; }" + + ':host-context(h1):after { content: " - no links in headers!" }' + + ":host-context(article, aside) { color: gray; }" + + ":host(.footer) { color : red; }" + + ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }"; ``` `:host(.footer) { color : red; }` 规则为文档中所有在其上设置了 `footer` 类的`` 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。 diff --git a/files/zh-cn/web/css/_colon_hover/index.md b/files/zh-cn/web/css/_colon_hover/index.md index 791e04bae686a5..7813f9f8c2939e 100644 --- a/files/zh-cn/web/css/_colon_hover/index.md +++ b/files/zh-cn/web/css/_colon_hover/index.md @@ -1,11 +1,11 @@ --- -title: ':hover' +title: ":hover" slug: Web/CSS/:hover --- {{CSSRef}} - **`:hover`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。 +**`:hover`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-hover.html", "tabbed-shorter")}} diff --git a/files/zh-cn/web/css/_colon_in-range/index.md b/files/zh-cn/web/css/_colon_in-range/index.md index 6bf2742f9b3de4..a5b6272057d8aa 100644 --- a/files/zh-cn/web/css/_colon_in-range/index.md +++ b/files/zh-cn/web/css/_colon_in-range/index.md @@ -1,5 +1,5 @@ --- -title: ':in-range' +title: ":in-range" slug: Web/CSS/:in-range --- diff --git a/files/zh-cn/web/css/_colon_lang/index.md b/files/zh-cn/web/css/_colon_lang/index.md index 5798a762bd3f27..86580e5d52b656 100644 --- a/files/zh-cn/web/css/_colon_lang/index.md +++ b/files/zh-cn/web/css/_colon_lang/index.md @@ -48,13 +48,13 @@ slug: Web/CSS/:lang ```css :lang(en) > q { - quotes: "\201C""\201D""\2018""\2019"; + quotes: "\201C" "\201D" "\2018" "\2019"; } :lang(fr) > q { quotes: "« " " »"; } :lang(de) > q { - quotes: "»" "«" "\2039""\203A"; + quotes: "»" "«" "\2039" "\203A"; } ``` diff --git a/files/zh-cn/web/css/_colon_last-of-type/index.md b/files/zh-cn/web/css/_colon_last-of-type/index.md index 5fefa76a424a47..07b9bc1ead1e20 100644 --- a/files/zh-cn/web/css/_colon_last-of-type/index.md +++ b/files/zh-cn/web/css/_colon_last-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':last-of-type' +title: ":last-of-type" slug: Web/CSS/:last-of-type --- @@ -25,22 +25,23 @@ p em:last-of-type { ```html

- 我没有颜色 :(
- 我没有颜色 :(
- 我有颜色 :D
- 我也没有颜色 :(
+ 我没有颜色 :(
+ 我没有颜色 :(
+ 我有颜色 :D
+ 我也没有颜色 :(

- 我没有颜色 :(
- 我有颜色！
- 我没有颜色 :(
- 我有颜色 :D
+ 我没有颜色 :(
+ 我有颜色！
+ 我没有颜色 :(
+ 我有颜色 :D
- 我在子元素里，但没有颜色！
- 我没有颜色
- 我却有颜色！
-
+ 我在子元素里，但没有颜色！
+ 我没有颜色
+ 我却有颜色！

我也没有颜色 :(

``` diff --git a/files/zh-cn/web/css/_colon_left/index.md b/files/zh-cn/web/css/_colon_left/index.md index a8fe23dd12cc4a..2efb7905f122ef 100644 --- a/files/zh-cn/web/css/_colon_left/index.md +++ b/files/zh-cn/web/css/_colon_left/index.md @@ -1,5 +1,5 @@ --- -title: ':left' +title: ":left" slug: Web/CSS/:left --- diff --git a/files/zh-cn/web/css/_colon_link/index.md b/files/zh-cn/web/css/_colon_link/index.md index e3c5deaaa98cca..d06ae0fe13ca5b 100644 --- a/files/zh-cn/web/css/_colon_link/index.md +++ b/files/zh-cn/web/css/_colon_link/index.md @@ -1,5 +1,5 @@ --- -title: ':link' +title: ":link" slug: Web/CSS/:link --- diff --git a/files/zh-cn/web/css/_colon_not/index.md b/files/zh-cn/web/css/_colon_not/index.md index 82768ad1d3c95b..7e9f7d8fb92ee7 100644 --- a/files/zh-cn/web/css/_colon_not/index.md +++ b/files/zh-cn/web/css/_colon_not/index.md @@ -1,5 +1,5 @@ --- -title: ':not()' +title: ":not()" slug: Web/CSS/:not --- diff --git a/files/zh-cn/web/css/_colon_nth-child/index.md b/files/zh-cn/web/css/_colon_nth-child/index.md index f8201cc89e544c..88843c5f9b4bbf 100644 --- a/files/zh-cn/web/css/_colon_nth-child/index.md +++ b/files/zh-cn/web/css/_colon_nth-child/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-child' +title: ":nth-child" slug: Web/CSS/:nth-child --- @@ -45,8 +45,10 @@ slug: Web/CSS/:nth-child #### HTML ```html -

span:nth-child(2n+1), WITHOUT an - <em> among the child elements.

+

+ span:nth-child(2n+1), WITHOUT an <em> among + the child elements. +

Children 1, 3, 5, and 7 are selected.

Span 1! @@ -58,13 +60,17 @@ slug: Web/CSS/:nth-child Span 7!
-
- -

span:nth-child(2n+1), WITH an - <em> among the child elements.

-

Children 1, 5, and 7 are selected.
- 3 is used in the counting because it is a child, but it isn't - selected because it isn't a <span>.

+
+ +

+ span:nth-child(2n+1), WITH an <em> among the + child elements. +

+

+ Children 1, 5, and 7 are selected.
+ 3 is used in the counting because it is a child, but it isn't selected because + it isn't a <span>. +

Span! Span @@ -76,15 +82,19 @@ slug: Web/CSS/:nth-child Span
-
- -

span:nth-of-type(2n+1), WITH an - <em> among the child elements.

-

Children 1, 4, 6, and 8 are selected.
- 3 isn't used in the counting or selected because it is an <em>, - not a <span>, and nth-of-type only selects - children of that type. The <em> is completely skipped - over and ignored.

+
+ +

+ span:nth-of-type(2n+1), WITH an <em> among the + child elements. +

+

+ Children 1, 4, 6, and 8 are selected.
+ 3 isn't used in the counting or selected because it is an + <em>, not a <span>, and + nth-of-type only selects children of that type. The + <em> is completely skipped over and ignored. +

Span! Span @@ -112,9 +122,9 @@ div em { margin-bottom: 3px; } -.first span:nth-child(2n+1), -.second span:nth-child(2n+1), -.third span:nth-of-type(2n+1) { +.first span:nth-child(2n + 1), +.second span:nth-child(2n + 1), +.third span:nth-of-type(2n + 1) { background-color: lime; } ``` diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.md b/files/zh-cn/web/css/_colon_nth-last-child/index.md index 639ca859508e89..fe9d74c1efc718 100644 --- a/files/zh-cn/web/css/_colon_nth-last-child/index.md +++ b/files/zh-cn/web/css/_colon_nth-last-child/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-last-child' +title: ":nth-last-child" slug: Web/CSS/:nth-last-child --- @@ -69,16 +69,16 @@ slug: Web/CSS/:nth-last-child First line - Second line + Second line - Third line + Third line - Fourth line + Fourth line - Fifth line + Fifth line @@ -92,12 +92,12 @@ table { } /* Selects the last three elements */ -tr:nth-last-child(-n+3) { +tr:nth-last-child(-n + 3) { background-color: pink; } /* Selects every element starting from the second to last item */ -tr:nth-last-child(n+2) { +tr:nth-last-child(n + 2) { color: blue; } @@ -138,8 +138,8 @@ tr:nth-last-child(2) { ```css /* If there are at least three list items, style them all */ -li:nth-last-child(n+3), -li:nth-last-child(n+3) ~ li { +li:nth-last-child(n + 3), +li:nth-last-child(n + 3) ~ li { color: red; } ``` diff --git a/files/zh-cn/web/css/_colon_nth-of-type/index.md b/files/zh-cn/web/css/_colon_nth-of-type/index.md index 67bab59ebb6f6e..6423c2c8dd27f0 100644 --- a/files/zh-cn/web/css/_colon_nth-of-type/index.md +++ b/files/zh-cn/web/css/_colon_nth-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-of-type' +title: ":nth-of-type" slug: Web/CSS/:nth-of-type --- @@ -42,7 +42,7 @@ slug: Web/CSS/:nth-of-type ```css /* 奇数段 */ -p:nth-of-type(2n+1) { +p:nth-of-type(2n + 1) { color: red; } diff --git a/files/zh-cn/web/css/_colon_only-of-type/index.md b/files/zh-cn/web/css/_colon_only-of-type/index.md index 4d5f62548eec4f..3fdbbf74d15e10 100644 --- a/files/zh-cn/web/css/_colon_only-of-type/index.md +++ b/files/zh-cn/web/css/_colon_only-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':only-of-type' +title: ":only-of-type" slug: Web/CSS/:only-of-type --- diff --git a/files/zh-cn/web/css/_colon_optional/index.md b/files/zh-cn/web/css/_colon_optional/index.md index a200c64a68dbff..08d0280085bc0b 100644 --- a/files/zh-cn/web/css/_colon_optional/index.md +++ b/files/zh-cn/web/css/_colon_optional/index.md @@ -1,5 +1,5 @@ --- -title: ':optional' +title: ":optional" slug: Web/CSS/:optional --- diff --git a/files/zh-cn/web/css/_colon_out-of-range/index.md b/files/zh-cn/web/css/_colon_out-of-range/index.md index 12a8581231d664..7caeaa1c6375e9 100644 --- a/files/zh-cn/web/css/_colon_out-of-range/index.md +++ b/files/zh-cn/web/css/_colon_out-of-range/index.md @@ -1,5 +1,5 @@ --- -title: ':out-of-range' +title: ":out-of-range" slug: Web/CSS/:out-of-range --- diff --git a/files/zh-cn/web/css/_colon_picture-in-picture/index.md b/files/zh-cn/web/css/_colon_picture-in-picture/index.md index 815651514a7c13..d7c4d2e84e1b22 100644 --- a/files/zh-cn/web/css/_colon_picture-in-picture/index.md +++ b/files/zh-cn/web/css/_colon_picture-in-picture/index.md @@ -1,5 +1,5 @@ --- -title: ':picture-in-picture' +title: ":picture-in-picture" slug: Web/CSS/:picture-in-picture --- diff --git a/files/zh-cn/web/css/_colon_placeholder-shown/index.md b/files/zh-cn/web/css/_colon_placeholder-shown/index.md index 6fdf4bb5c4ebd2..1f14db98074ac5 100644 --- a/files/zh-cn/web/css/_colon_placeholder-shown/index.md +++ b/files/zh-cn/web/css/_colon_placeholder-shown/index.md @@ -26,7 +26,7 @@ slug: Web/CSS/:placeholder-shown #### HTML ```html - + ``` #### CSS diff --git a/files/zh-cn/web/css/_colon_read-only/index.md b/files/zh-cn/web/css/_colon_read-only/index.md index 2c864edd2b5392..fa65bb5f809e8e 100644 --- a/files/zh-cn/web/css/_colon_read-only/index.md +++ b/files/zh-cn/web/css/_colon_read-only/index.md @@ -1,5 +1,5 @@ --- -title: ':read-only' +title: ":read-only" slug: Web/CSS/:read-only --- @@ -31,8 +31,8 @@ input:read-only { ### HTML ```html - - + +

This is a normal paragraph.

You can edit this paragraph!

``` @@ -40,13 +40,25 @@ input:read-only { ### CSS ```css -input { min-width: 25em; } -input:-moz-read-only { background: cyan; } -input:read-only { background: cyan; } +input { + min-width: 25em; +} +input:-moz-read-only { + background: cyan; +} +input:read-only { + background: cyan; +} -p:-moz-read-only { background: lightgray; } -p:read-only { background: lightgray; } -p[contenteditable="true"] { color: blue; } +p:-moz-read-only { + background: lightgray; +} +p:read-only { + background: lightgray; +} +p[contenteditable="true"] { + color: blue; +} ``` ### 结果 diff --git a/files/zh-cn/web/css/_colon_read-write/index.md b/files/zh-cn/web/css/_colon_read-write/index.md index 763770085f2b53..cbaa8179036aa8 100644 --- a/files/zh-cn/web/css/_colon_read-write/index.md +++ b/files/zh-cn/web/css/_colon_read-write/index.md @@ -1,5 +1,5 @@ --- -title: ':read-write' +title: ":read-write" slug: Web/CSS/:read-write --- @@ -31,8 +31,8 @@ input:read-write { ### HTML ```html - - + +

This is a normal paragraph.

You can edit this paragraph!

``` @@ -40,13 +40,25 @@ input:read-write { ### CSS ```css -input { min-width: 25em; } -input:-moz-read-write { background: cyan; } -input:read-write { background: cyan; } +input { + min-width: 25em; +} +input:-moz-read-write { + background: cyan; +} +input:read-write { + background: cyan; +} -p:-moz-read-write { background: lightgray; } -p:read-write { background: lightgray; } -p[contenteditable="true"] { color: blue; } +p:-moz-read-write { + background: lightgray; +} +p:read-write { + background: lightgray; +} +p[contenteditable="true"] { + color: blue; +} ``` ### 结果 diff --git a/files/zh-cn/web/css/_colon_required/index.md b/files/zh-cn/web/css/_colon_required/index.md index 3add5337b39651..5bca0cf3d3e32d 100644 --- a/files/zh-cn/web/css/_colon_required/index.md +++ b/files/zh-cn/web/css/_colon_required/index.md @@ -1,5 +1,5 @@ --- -title: ':required' +title: ":required" slug: Web/CSS/:required --- diff --git a/files/zh-cn/web/css/_colon_right/index.md b/files/zh-cn/web/css/_colon_right/index.md index 4533d97e83b841..c4f2f8576002c8 100644 --- a/files/zh-cn/web/css/_colon_right/index.md +++ b/files/zh-cn/web/css/_colon_right/index.md @@ -1,5 +1,5 @@ --- -title: ':right' +title: ":right" slug: Web/CSS/:right --- diff --git a/files/zh-cn/web/css/_colon_root/index.md b/files/zh-cn/web/css/_colon_root/index.md index a9446cc8ec1c75..ea0121a38cf572 100644 --- a/files/zh-cn/web/css/_colon_root/index.md +++ b/files/zh-cn/web/css/_colon_root/index.md @@ -1,5 +1,5 @@ --- -title: ':root' +title: ":root" slug: Web/CSS/:root --- diff --git a/files/zh-cn/web/css/_colon_scope/index.md b/files/zh-cn/web/css/_colon_scope/index.md index 23c4ca5878ea41..598b9bfc87a16f 100644 --- a/files/zh-cn/web/css/_colon_scope/index.md +++ b/files/zh-cn/web/css/_colon_scope/index.md @@ -1,5 +1,5 @@ --- -title: ':scope' +title: ":scope" slug: Web/CSS/:scope --- @@ -57,29 +57,31 @@ if (paragraph.matches(":scope")) { #### JavaScript ```js -var context = document.getElementById('context'); -var selected = context.querySelectorAll(':scope > div'); - -document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) { - return '#' + element.getAttribute('id'); -}).join(', '); +var context = document.getElementById("context"); +var selected = context.querySelectorAll(":scope > div"); + +document.getElementById("results").innerHTML = Array.prototype.map + .call(selected, function (element) { + return "#" + element.getAttribute("id"); + }) + .join(", "); ``` #### HTML ```html
-
-
-
-
-
-
-
+
+
+
+
+
+
+

- Selected elements ids : - + Selected elements ids : +

``` diff --git a/files/zh-cn/web/css/_colon_target/index.md b/files/zh-cn/web/css/_colon_target/index.md index cea83a42044d04..340af2e6bd4a2e 100644 --- a/files/zh-cn/web/css/_colon_target/index.md +++ b/files/zh-cn/web/css/_colon_target/index.md @@ -1,5 +1,5 @@ --- -title: ':target' +title: ":target" slug: Web/CSS/:target --- @@ -45,9 +45,9 @@ http://www.example.com/index.html#section2 ```html

目录

    -
  1. 跳转到第一个段落！
    2. -
  2. 跳转到第二个段落！
    3. -
  3. 此链接不会跳转，因为目标不存在。
    4. +
  4. 跳转到第一个段落！
    5. +
  5. 跳转到第二个段落！
    6. +
  6. 此链接不会跳转，因为目标不存在。

我的趣味文章

@@ -67,7 +67,7 @@ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; - margin-right: .25em; + margin-right: 0.25em; } /*在目标元素中使用 italic 样式*/ @@ -97,17 +97,20 @@ p:target i { ``` @@ -170,7 +173,7 @@ p:target i { width: 100%; height: 100%; position: fixed; - background-color: rgba(0,0,0,.7); + background-color: rgba(0, 0, 0, 0.7); content: ""; cursor: default; } diff --git a/files/zh-cn/web/css/_colon_valid/index.md b/files/zh-cn/web/css/_colon_valid/index.md index b3816c255b1f9a..f5e971101d2dc4 100644 --- a/files/zh-cn/web/css/_colon_valid/index.md +++ b/files/zh-cn/web/css/_colon_valid/index.md @@ -1,5 +1,5 @@ --- -title: ':valid' +title: ":valid" slug: Web/CSS/:valid --- diff --git a/files/zh-cn/web/css/_colon_where/index.md b/files/zh-cn/web/css/_colon_where/index.md index dc9aeca91dfdfc..dbf73b7b85e063 100644 --- a/files/zh-cn/web/css/_colon_where/index.md +++ b/files/zh-cn/web/css/_colon_where/index.md @@ -1,5 +1,5 @@ --- -title: ':where()' +title: ":where()" slug: Web/CSS/:where --- diff --git a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.md b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.md index 5d440d2d36d591..e836c684145c41 100644 --- a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.md +++ b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.md @@ -1,5 +1,5 @@ --- -title: '::-moz-progress-bar' +title: "::-moz-progress-bar" slug: Web/CSS/::-moz-progress-bar --- diff --git a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md index 5bb82d0f2172b0..cc5c9089442e97 100644 --- a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md +++ b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.md @@ -1,5 +1,5 @@ --- -title: '::-moz-range-progress' +title: "::-moz-range-progress" slug: Web/CSS/::-moz-range-progress --- @@ -18,13 +18,13 @@ The **`::-moz-range-progress`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/do ### HTML ```html - + ``` ### CSS ```css -input[type=range]::-moz-range-progress { +input[type="range"]::-moz-range-progress { background-color: green; height: 1em; } diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md index ba8d86ecf199bf..84127ebed75b03 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-progress-bar' +title: "::-webkit-progress-bar" slug: Web/CSS/::-webkit-progress-bar --- @@ -21,14 +21,14 @@ progress { } ::-webkit-progress-bar { - background-color: orange; + background-color: orange; } ``` ### HTML ```html - + ``` ### 结果 diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md index cbc523c0023318..eed61af3bad8a9 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-progress-inner-element' +title: "::-webkit-progress-inner-element" slug: Web/CSS/::-webkit-progress-inner-element --- @@ -14,7 +14,7 @@ slug: Web/CSS/::-webkit-progress-inner-element ### HTML ```html - + ``` ### CSS diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md index aede3b97e27eb6..dc4602d77c5ab3 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-progress-value' +title: "::-webkit-progress-value" slug: Web/CSS/::-webkit-progress-value --- @@ -14,7 +14,7 @@ slug: Web/CSS/::-webkit-progress-value ### HTML ```html - + ``` ### CSS diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md index ef6e6a200b3bbd..5cedcf10136e21 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md @@ -1,6 +1,6 @@ --- -title: '::-webkit-scrollbar' -slug: 'Web/CSS/::-webkit-scrollbar' +title: "::-webkit-scrollbar" +slug: "Web/CSS/::-webkit-scrollbar" --- {{CSSRef}}{{Non-standard_Header}} @@ -28,7 +28,9 @@ slug: 'Web/CSS/::-webkit-scrollbar' ### CSS ```css -.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { +.visible-scrollbar, +.invisible-scrollbar, +.mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; @@ -57,28 +59,27 @@ slug: 'Web/CSS/::-webkit-scrollbar' ```html
- Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. - Proin at nulla elementum, consectetur ex eget, commodo ante. - Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus - blandit quam turpis, at mollis velit pretium ut. Nunc consequat - efficitur ultrices. Nullam hendrerit posuere est. Nulla libero - sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum - tincidunt accumsan sapien, a fringilla dui semper in. Vivamus - consectetur ipsum a ornare blandit. Aenean tempus at lorem sit - amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, - mattis cursus dolor. Pellentesque id pretium est. Quisque - convallis nisi a diam malesuada mollis. Aliquam at enim ligula. + Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla + elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut + dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis + velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere + est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam. + Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus + consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. + Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. + Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. + Aliquam at enim ligula.
-Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword + Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
-Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
-And pretty tall
-thing with weird scrollbars.
-Who thought scrollbars could be made weeeeird? + Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
+ And pretty tall
+ thing with weird scrollbars.
+ Who thought scrollbars could be made weeeeird?
``` diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.md index f652ab1c6f7d9d..96623fbff88318 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-slider-runnable-track' +title: "::-webkit-slider-runnable-track" slug: Web/CSS/::-webkit-slider-runnable-track --- diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.md index c73e00977d47cf..a385be36ff28ba 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.md +++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-slider-thumb' +title: "::-webkit-slider-thumb" slug: Web/CSS/::-webkit-slider-thumb --- @@ -16,19 +16,19 @@ slug: Web/CSS/::-webkit-slider-thumb 该伪类需要配和 **::-webkit-slider-runnable-track** 使用，否则会没有效果 ```css -input[type=range]::-webkit-slider-thumb{ - -webkit-appearance: none;/*清除默认样式*/ - height:7vw;/*设置滑块高度*/ - width:5vw;/*设置滑块宽度*/ - background:#000;/*设置背景色*/ - border-radius:10vw 10vw;/*加个圆角边*/ - margin-top:-1vw;/*使用 position 的话会导致滑块不滑动，但是绑定的 value 是改变的，所以这里使用 margin-top 去做定位*/ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; /*清除默认样式*/ + height: 7vw; /*设置滑块高度*/ + width: 5vw; /*设置滑块宽度*/ + background: #000; /*设置背景色*/ + border-radius: 10vw 10vw; /*加个圆角边*/ + margin-top: -1vw; /*使用 position 的话会导致滑块不滑动，但是绑定的 value 是改变的，所以这里使用 margin-top 去做定位*/ } -input[type=range]::-webkit-slider-runnable-track{ +input[type="range"]::-webkit-slider-runnable-track { border-radius: 30px; - background:#128; - height:15px; + background: #128; + height: 15px; } ``` diff --git a/files/zh-cn/web/css/_doublecolon_after/index.md b/files/zh-cn/web/css/_doublecolon_after/index.md index 4d3407084289eb..65d7e81383e20c 100644 --- a/files/zh-cn/web/css/_doublecolon_after/index.md +++ b/files/zh-cn/web/css/_doublecolon_after/index.md @@ -1,5 +1,5 @@ --- -title: '::after (:after)' +title: "::after (:after)" slug: Web/CSS/::after --- @@ -28,8 +28,9 @@ CSS[伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素 ```html

这是些无聊的文字

这是不无聊也不有趣的文字

-

在 MDN 上做贡献简单又轻松。 -按右上角的编辑按钮添加新示例或改进旧示例！

+

+ 在 MDN 上做贡献简单又轻松。 按右上角的编辑按钮添加新示例或改进旧示例！ +

``` ```css @@ -58,14 +59,14 @@ CSS[伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素 ```css .ribbon { - background-color: #5BC8F7; + background-color: #5bc8f7; } .ribbon::after { - content: "Look at this orange box."; - background-color: #FFBA10; - border-color: black; - border-style: dotted; + content: "Look at this orange box."; + background-color: #ffba10; + border-color: black; + border-style: dotted; } ``` @@ -78,8 +79,10 @@ CSS[伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素 接下来的示例展示了用`::after`[伪元素](/zh-CN/CSS/Pseudo-elements)，[`attr()`](/zh-CN/docs/CSS/attr)CSS 表达式和一个[自定义数据属性](/zh-CN/HTML/Global_attributes#attr-data-*) `data-descr` 创建一个纯 CSS，词汇表提示工具。在[单独页面](/files/4591/css-only_tooltips.html)看这个例子。 ```html -

这是上面代码的实现
- 我们有一些 文字 有一些 +

+ 这是上面代码的实现
+ 我们有一些 + 文字 有一些 提示。
把鼠标放上去看看。

@@ -87,25 +90,25 @@ CSS[伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素 ```css span[data-descr] { - position: relative; - text-decoration: underline; - color: #00F; - cursor: help; + position: relative; + text-decoration: underline; + color: #00f; + cursor: help; } span[data-descr]:hover::after { - content: attr(data-descr); - position: absolute; - left: 0; - top: 24px; - min-width: 200px; - border: 1px #aaaaaa solid; - border-radius: 10px; - background-color: #ffffcc; - padding: 12px; - color: #000000; - font-size: 14px; - z-index: 1; + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; } ``` diff --git a/files/zh-cn/web/css/_doublecolon_backdrop/index.md b/files/zh-cn/web/css/_doublecolon_backdrop/index.md index 46e59a109e750e..43d92b5446efe7 100644 --- a/files/zh-cn/web/css/_doublecolon_backdrop/index.md +++ b/files/zh-cn/web/css/_doublecolon_backdrop/index.md @@ -1,5 +1,5 @@ --- -title: '::backdrop' +title: "::backdrop" slug: Web/CSS/::backdrop --- @@ -10,7 +10,7 @@ slug: Web/CSS/::backdrop ```css /* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */ dialog::backdrop { - background: rgba(255,0,0,.25); + background: rgba(255, 0, 0, 0.25); } ``` diff --git a/files/zh-cn/web/css/_doublecolon_before/index.md b/files/zh-cn/web/css/_doublecolon_before/index.md index ce540d8067ff44..f3d1d1d34f6faf 100644 --- a/files/zh-cn/web/css/_doublecolon_before/index.md +++ b/files/zh-cn/web/css/_doublecolon_before/index.md @@ -1,5 +1,5 @@ --- -title: '::before (:before)' +title: "::before (:before)" slug: Web/CSS/::before --- @@ -14,7 +14,7 @@ a::before { } ``` -> **备注：** 由 `::before` 和`::after` 生成的伪元素[包含在元素格式框内](https://www.w3.org/TR/CSS2/generate.html#before-after-content)，因此不能应用在[*替换元素上*](/zh-CN/docs/Web/CSS/Replaced_element)，比如 {{htmlelement("img")}} 或 {{htmlelement("br")}} 元素。 +> **备注：** 由 `::before` 和`::after` 生成的伪元素[包含在元素格式框内](https://www.w3.org/TR/CSS2/generate.html#before-after-content)，因此不能应用在[_替换元素上_](/zh-CN/docs/Web/CSS/Replaced_element)，比如 {{htmlelement("img")}} 或 {{htmlelement("br")}} 元素。 ## 语法 @@ -74,14 +74,14 @@ q::after { ```css .ribbon { - background-color: #5BC8F7; + background-color: #5bc8f7; } .ribbon::before { - content: "Look at this orange box."; - background-color: #FFBA10; - border-color: black; - border-style: dotted; + content: "Look at this orange box."; + background-color: #ffba10; + border-color: black; + border-style: dotted; } ``` @@ -119,11 +119,11 @@ li { } li.done { - background: #CCFF99; + background: #ccff99; } li.done::before { - content: ''; + content: ""; position: absolute; border-color: #009933; border-style: solid; @@ -140,15 +140,19 @@ li.done::before { #### JavaScript ```js -var list = document.querySelector('ul'); -list.addEventListener('click', function(ev) { - if( ev.target.tagName === 'LI') { - ev.target.classList.toggle('done'); - } -}, false); +var list = document.querySelector("ul"); +list.addEventListener( + "click", + function (ev) { + if (ev.target.tagName === "LI") { + ev.target.classList.toggle("done"); + } + }, + false, +); ``` -下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的` ::before `伪元素。接下来建立几个待办事项来完成它们吧。 +下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的`::before`伪元素。接下来建立几个待办事项来完成它们吧。 #### 结果 @@ -162,32 +166,38 @@ list.addEventListener('click', function(ev) { ```html
-"Floated Before" should be generated on the left of the -viewport and not allow overflow in this line to flow under it. Likewise -should "Floated After" appear on the right of the viewport and not allow this -line to flow under it. + "Floated Before" should be generated on the left of the viewport and not + allow overflow in this line to flow under it. Likewise should "Floated + After" appear on the right of the viewport and not allow this line to flow + under it.
``` #### CSS ```css -#floatme { float: left; width: 50%; } +#floatme { + float: left; + width: 50%; +} /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */ .example::before { content: "Floated Before"; float: left; - width: 25% + width: 25%; } .example::after { content: "Floated After"; float: right; - width:25% + width: 25%; } /* For styling */ -.example::before, .example::after{ +.example::before, +.example::after { background: yellow; color: red; } diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.md b/files/zh-cn/web/css/_doublecolon_cue/index.md index 8214e95161151b..19c2873ab6f4c0 100644 --- a/files/zh-cn/web/css/_doublecolon_cue/index.md +++ b/files/zh-cn/web/css/_doublecolon_cue/index.md @@ -1,5 +1,5 @@ --- -title: '::cue (:cue)' +title: "::cue (:cue)" slug: Web/CSS/::cue --- diff --git a/files/zh-cn/web/css/_doublecolon_file-selector-button/index.md b/files/zh-cn/web/css/_doublecolon_file-selector-button/index.md index 1dc6ec2470786b..0ac07b66ae35aa 100644 --- a/files/zh-cn/web/css/_doublecolon_file-selector-button/index.md +++ b/files/zh-cn/web/css/_doublecolon_file-selector-button/index.md @@ -1,5 +1,5 @@ --- -title: '::file-selector-button' +title: "::file-selector-button" slug: Web/CSS/::file-selector-button --- diff --git a/files/zh-cn/web/css/_doublecolon_first-letter/index.md b/files/zh-cn/web/css/_doublecolon_first-letter/index.md index 4de3f9dfec6426..a2f83fed8873f6 100644 --- a/files/zh-cn/web/css/_doublecolon_first-letter/index.md +++ b/files/zh-cn/web/css/_doublecolon_first-letter/index.md @@ -1,5 +1,5 @@ --- -title: '::first-letter (:first-letter)' +title: "::first-letter (:first-letter)" slug: Web/CSS/::first-letter --- @@ -47,7 +47,8 @@ p::first-letter { ```css /* 使每段开头的第一个字母变红变大 */ -p::first-letter { /* 使用:first 来兼容 IE8- */ +p::first-letter { + /* 使用:first 来兼容 IE8- */ color: red; font-size: 130%; } diff --git a/files/zh-cn/web/css/_doublecolon_first-line/index.md b/files/zh-cn/web/css/_doublecolon_first-line/index.md index 81987c86ef5fef..484f64cb27984a 100644 --- a/files/zh-cn/web/css/_doublecolon_first-line/index.md +++ b/files/zh-cn/web/css/_doublecolon_first-line/index.md @@ -1,5 +1,5 @@ --- -title: '::first-line (:first-line)' +title: "::first-line (:first-line)" slug: Web/CSS/::first-line --- @@ -42,14 +42,18 @@ slug: Web/CSS/::first-line #### HTML ```html -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, -sed do eiusmod tempor incididunt ut labore.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore. +

``` #### CSS ```css -p::first-line { text-transform: uppercase } +p::first-line { + text-transform: uppercase; +} ``` #### 输出 @@ -63,14 +67,18 @@ p::first-line { text-transform: uppercase } #### HTML ```html -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, -sed do eiusmod tempor incididunt ut labore.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore. +

``` #### CSS ```css -p::first-line { margin-left: 20px } +p::first-line { + margin-left: 20px; +} ``` #### 输出 @@ -84,14 +92,18 @@ p::first-line { margin-left: 20px } #### HTML ```html -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, -sed do eiusmod tempor incididunt ut labore.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore. +

``` #### CSS ```css -p::first-line { text-indent: 20px } +p::first-line { + text-indent: 20px; +} ``` #### 输出 diff --git a/files/zh-cn/web/css/_doublecolon_grammar-error/index.md b/files/zh-cn/web/css/_doublecolon_grammar-error/index.md index 26778bd14d3972..05d7b6e03aed2d 100644 --- a/files/zh-cn/web/css/_doublecolon_grammar-error/index.md +++ b/files/zh-cn/web/css/_doublecolon_grammar-error/index.md @@ -1,5 +1,5 @@ --- -title: '::grammar-error' +title: "::grammar-error" slug: Web/CSS/::grammar-error --- diff --git a/files/zh-cn/web/css/_doublecolon_part/index.md b/files/zh-cn/web/css/_doublecolon_part/index.md index 2d12710f153e42..ebd2e068f7e88b 100644 --- a/files/zh-cn/web/css/_doublecolon_part/index.md +++ b/files/zh-cn/web/css/_doublecolon_part/index.md @@ -1,5 +1,5 @@ --- -title: '::part()' +title: "::part()" slug: Web/CSS/::part --- @@ -23,18 +23,20 @@ custom-element::part(foo) { ```html @@ -74,13 +76,16 @@ tabbed-custom-element::part(active) { ```js let template = document.querySelector("#tabbed-custom-element"); -globalThis.customElements.define(template.id, class extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: "open" }); - this.shadowRoot.appendChild(template.content); - } -}); +globalThis.customElements.define( + template.id, + class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(template.content); + } + }, +); ``` ### 结果 diff --git a/files/zh-cn/web/css/_doublecolon_placeholder/index.md b/files/zh-cn/web/css/_doublecolon_placeholder/index.md index 69977f79671e86..61f9c8c53ee199 100644 --- a/files/zh-cn/web/css/_doublecolon_placeholder/index.md +++ b/files/zh-cn/web/css/_doublecolon_placeholder/index.md @@ -1,5 +1,5 @@ --- -title: '::placeholder' +title: "::placeholder" slug: Web/CSS/::placeholder --- @@ -27,7 +27,7 @@ slug: Web/CSS/::placeholder #### HTML ```html - + ``` #### CSS @@ -49,7 +49,7 @@ input::placeholder { #### HTML ```html - + ``` #### CSS diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.md b/files/zh-cn/web/css/_doublecolon_selection/index.md index 846045d65804ef..a5671296bcef27 100644 --- a/files/zh-cn/web/css/_doublecolon_selection/index.md +++ b/files/zh-cn/web/css/_doublecolon_selection/index.md @@ -1,5 +1,5 @@ --- -title: '::selection' +title: "::selection" slug: Web/CSS/::selection --- diff --git a/files/zh-cn/web/css/_doublecolon_slotted/index.md b/files/zh-cn/web/css/_doublecolon_slotted/index.md index 505bb511a3d621..8b090e24cecd0a 100644 --- a/files/zh-cn/web/css/_doublecolon_slotted/index.md +++ b/files/zh-cn/web/css/_doublecolon_slotted/index.md @@ -1,5 +1,5 @@ --- -title: '::slotted()' +title: "::slotted()" slug: Web/CSS/::slotted --- @@ -47,26 +47,29 @@ slug: Web/CSS/::slotted 自定义元素 `` 的定义如下： ```js -customElements.define('person-details', +customElements.define( + "person-details", class extends HTMLElement { constructor() { super(); - let template = document.getElementById('person-template'); + let template = document.getElementById("person-template"); let templateContent = template.content; - const shadowRoot = this.attachShadow({mode: 'open'}); + const shadowRoot = this.attachShadow({ mode: "open" }); - let style = document.createElement('style'); - style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + - 'h2 { margin: 0 0 10px; }' + - 'ul { margin: 0; }' + - 'p { margin: 10px 0; }' + - '::slotted(*) { color: gray; font-family: sans-serif; } '; + let style = document.createElement("style"); + style.textContent = + "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" + + "h2 { margin: 0 0 10px; }" + + "ul { margin: 0; }" + + "p { margin: 10px 0; }" + + "::slotted(*) { color: gray; font-family: sans-serif; } "; shadowRoot.appendChild(style); shadowRoot.appendChild(templateContent.cloneNode(true)); - } -}) + } + }, +); ``` 为了更好地区分**未被成功填充的插槽**和**成功填充的插槽**, 我们在 CSS 中选择了所有的插槽元素 (`::slotted(*)`), 并填充了不一样的颜色和字体。结果也是如此。 diff --git a/files/zh-cn/web/css/_doublecolon_spelling-error/index.md b/files/zh-cn/web/css/_doublecolon_spelling-error/index.md index 2f34525ab08462..15667a6d7d1b87 100644 --- a/files/zh-cn/web/css/_doublecolon_spelling-error/index.md +++ b/files/zh-cn/web/css/_doublecolon_spelling-error/index.md @@ -1,5 +1,5 @@ --- -title: '::spelling-error' +title: "::spelling-error" slug: Web/CSS/::spelling-error --- diff --git a/files/zh-cn/web/css/align-content/index.md b/files/zh-cn/web/css/align-content/index.md index d03d73bd37dde3..e485720e94c092 100644 --- a/files/zh-cn/web/css/align-content/index.md +++ b/files/zh-cn/web/css/align-content/index.md @@ -16,11 +16,11 @@ slug: Web/CSS/align-content ```css /* 基本位置对齐 */ /*align-content 不采用左右值 */ -align-content: center; /* 将项目放置在中点 */ -align-content: start; /* 最先放置项目 */ -align-content: end; /* 最后放置项目 */ +align-content: center; /* 将项目放置在中点 */ +align-content: start; /* 最先放置项目 */ +align-content: end; /* 最后放置项目 */ align-content: flex-start; /* 从起始点开始放置 flex 元素 */ -align-content: flex-end; /* 从终止点开始放置 flex 元素 */ +align-content: flex-end; /* 从终止点开始放置 flex 元素 */ /* 默认对齐 */ align-content: normal; @@ -34,11 +34,11 @@ align-content: last baseline; align-content: space-between; /* 均匀分布项目 第一项与起始点齐平， 最后一项与终止点齐平 */ -align-content: space-around; /* 均匀分布项目 +align-content: space-around; /* 均匀分布项目 项目在两端有一半大小的空间*/ -align-content: space-evenly; /* 均匀分布项目 +align-content: space-evenly; /* 均匀分布项目 项目周围有相等的空间 */ -align-content: stretch; /* 均匀分布项目 +align-content: stretch; /* 均匀分布项目 拉伸‘自动’ - 大小的项目以充满容器 */ /* 溢出对齐 */ @@ -47,7 +47,7 @@ align-content: unsafe center; /* 全局属性 */ align-content: inherit; /* 继承 */ -align-content: initial; /* 初始值 */ +align-content: initial; /* 初始值 */ align-content: unset; /* 未设置 */ ``` @@ -96,7 +96,7 @@ align-content: unset; /* 未设置 */ ```css #container { - height:200px; + height: 200px; width: 240px; align-content: center; /* Can be changed in the live sample */ background-color: #8c8c8c; @@ -215,15 +215,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.alignContent = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ``` diff --git a/files/zh-cn/web/css/align-items/index.md b/files/zh-cn/web/css/align-items/index.md index 1045e30bb5d62c..7d27945e378988 100644 --- a/files/zh-cn/web/css/align-items/index.md +++ b/files/zh-cn/web/css/align-items/index.md @@ -89,7 +89,7 @@ align-items: unset; ```css #container { - height:200px; + height: 200px; width: 240px; align-items: center; /* Can be changed in the live sample */ background-color: #8c8c8c; @@ -209,15 +209,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.alignItems = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ```