-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ff10dde
commit 7fecf35
Showing
4 changed files
with
185 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
----------------------------- | ||
伪元素 | ||
----------------------------- | ||
::-moz-color-swatch | ||
::-moz-focus-inner | ||
::-moz-list-bullet | ||
::-moz-list-number | ||
::-moz-meter-bar | ||
::-moz-progress-bar | ||
::-moz-range-progress | ||
::-moz-range-thumb | ||
::-moz-range-track | ||
::-webkit-inner-spin-button | ||
::-webkit-meter-bar | ||
::-webkit-meter-even-less-good-value | ||
::-webkit-meter-inner-element | ||
::-webkit-meter-optimum-value | ||
::-webkit-meter-suboptimum-value | ||
::-webkit-progress-bar | ||
::-webkit-progress-inner-element | ||
::-webkit-progress-value | ||
::-webkit-scrollbar | ||
::-webkit-search-cancel-button | ||
::-webkit-search-results-button | ||
::-webkit-slider-runnable-track | ||
::-webkit-slider-thumb | ||
::after | ||
::backdrop | ||
::before | ||
::cue (:cue) | ||
::details-content | ||
::file-selector-button | ||
::first-letter | ||
::first-line (:first-line) | ||
::grammar-error | ||
::highlight() | ||
::marker | ||
::part() | ||
::placeholder | ||
::selection | ||
::slotted() | ||
::spelling-error | ||
::target-text | ||
::view-transition | ||
::view-transition-group | ||
::view-transition-image-pair | ||
::view-transition-new | ||
::view-transition-old |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
------------------------------ | ||
Pseudo-classes | ||
------------------------------ | ||
|
||
-moz-brokenNon-standardDeprecated | ||
:-moz-drag-overNon-standard | ||
:-moz-first-nodeExperimentalNon-standard | ||
:-moz-handler-blockedNon-standard | ||
:-moz-handler-crashedNon-standard | ||
:-moz-handler-disabledNon-standard | ||
:-moz-last-nodeExperimentalNon-standard | ||
:-moz-loadingNon-standard | ||
:-moz-locale-dir(ltr)Non-standard | ||
:-moz-locale-dir(rtl)Non-standard | ||
:-moz-only-whitespaceNon-standard | ||
:-moz-submit-invalidNon-standard | ||
:-moz-suppressedNon-standard | ||
:-moz-user-disabledNon-standard | ||
:-moz-window-inactiveNon-standard | ||
:active | ||
:any-link | ||
:autofill | ||
:blankExperimental | ||
:buffering | ||
:checked | ||
:currentExperimental | ||
:default | ||
:defined | ||
:dir() | ||
:disabled | ||
:empty | ||
:enabled | ||
:first | ||
:first-child | ||
:first-of-type | ||
:focus | ||
:focus-visible | ||
:focus-within | ||
* 表示当元素或其任意后代元素被聚焦时,将匹配该元素。 | ||
* 换言之,它表示 :focus 伪类匹配到该元素自身或它的后代时,该伪类生效。(这也包括 shadow 树中的后代元素。) | ||
|
||
:fullscreen | ||
:future | ||
:has-slottedExperimental | ||
:has() | ||
* 函数式伪类 :has() 表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素。 | ||
* 这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。 | ||
|
||
:host | ||
:host-context() | ||
:host() | ||
:hover | ||
:in-range | ||
:indeterminate | ||
:invalid | ||
:is() | ||
:lang() | ||
:last-child | ||
:last-of-type | ||
:left | ||
:link | ||
:local-linkExperimental | ||
:modal | ||
:muted | ||
:not() | ||
:nth-child() | ||
:nth-last-child() | ||
:nth-last-of-type() | ||
:nth-of-type() | ||
:only-child | ||
:only-of-type | ||
:openExperimental | ||
:optional | ||
:out-of-range | ||
:past | ||
:paused | ||
:picture-in-picture | ||
:placeholder-shown | ||
:playing | ||
:popover-open | ||
:read-only | ||
:read-write | ||
:required | ||
:right | ||
:root | ||
:scope | ||
:seeking | ||
:stalled | ||
:state() | ||
:target | ||
:target-withinExperimental | ||
:user-invalid | ||
:user-valid | ||
:valid | ||
:visited | ||
:volume-locked | ||
:where() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
|
||
|
||
<template> | ||
<div class="container"> | ||
<div class="item" v-for="i of 66">{{ i }}</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
</script> | ||
|
||
|
||
<style scoped> | ||
|
||
.container { | ||
width: 800px; | ||
height: 800px; | ||
background-color: skyblue; | ||
display: flex; | ||
align-content: start; | ||
flex-wrap: wrap; | ||
|
||
} | ||
.item { | ||
/* 每行多少个 */ | ||
--n: 12; | ||
/* 每个多宽 */ | ||
--w: 40px; | ||
/* 计算出左右 margin */ | ||
--gap: calc((100% - var(--w) * var(--n)) / var(--n) / 2); | ||
|
||
margin: 10px var(--gap); | ||
|
||
width: var(--w); | ||
height: 40px; | ||
background-color: gray; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters