相关疑难解决方法(0)

我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.

我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素？

我选择在此实例中使用弹性框,因为列表项高度将是动态%.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

我正在看Twitter的bootstrap框架,我确实有一个非常小的问题.

我将看到以下部分,以便将盒子模型设置为border-box.

*, *::after, *::before { box-sizing: border-box; }

但是如果你看一下CSS规范的*目标是所有元素,那么为什么选择使用*::after和*::before选择器呢？

对我来说,这似乎已经过时了,因为*选择器已经标记了所有元素.

据我了解，:before并:after在指定目标之前或之后插入内容。我不太确定这个 CSS 片段的目的是什么？

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

有一堆伪元素和类:

伪元素:

:: after,:: before,:: first-letter,:: first-line,:: selection,:: backdrop

伪类:

:active,:checked,:default,:dir(),: disabled,:empty,:enabled,:first,:first-child,:first-of-type,:fullscreen,:focus,:hover,:indeterminate, :in-range,:invalid,:lang(),:last-child,:last-of-type,:left,:link,:not(),:nth-​​child(),:nth-​​last-child( ),:nth-​​last-of-type(),:nth-​​of-type(),: only-child,:only-of-type,:optional,:out-of-range,:read-only,: read-write,:required,:right,:root,:scope,:target,:valid,:visited

还有其他像:: - webkit-input-placeholder,:: - moz-placeholder等等.我不知道它们是什么元素.但我认为它们是伪元素,因为它有双冒号.

有一个星号选择器*来选择DOM-Tree内的所有元素.

现在,我很想知道为什么没有单个选择器来选择所有伪元素和DOM-Tree之外的伪类,即使在css3或css4中也是如此？

*pseudo{
  color: red;
}