什么是通用选择器？

Question

我最近发现this“样板”并立即爱上它，主要是因为它简单，非常轻巧，与其他css框架不同，不会影响你的设计。

看一下它的源代码，它提出了一些问题，例如这部分

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }

就像它还不够糟糕，他们使用带有属性的通用选择器，但他们做了两次？

下面几行我看到了这一部分

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }

可以插入我之前提到的规则集中，避免使用双（或三）通用选择器。

这是另一个

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

clearfix实用程序类缺少:after。

查看他们的github页面，最后一次更新大约是7个月前，所以我想他们不会发布任何修补程序。

我不是CSS大师，所以我想问一下我的怀疑是否正确，最后，你能给我一些其他CSS框架的名称，这些框架的工作方式相同，但编写得不是很好吗？

Answer 1

不幸的是，我相信你对你在这里所展示的所有问题的理解有点误导。让我们试着解决这个问题。

什么是通用选择器？

universal selector是星号：（ * ）

通用选择器真的是一个通配符。它将在其上下文中匹配任何元素。通用选择器在嵌套时性能较差，在这些情况下应该避免使用。

您将看到的一个常见用例是全局重置box-sizing。

class ArraySlice
  include Enumerable

  def initialize(ary=[], start=0, length=ary.size - start)
    self.ary, self.start, self.length = ary, start, length
  end

  def [](*args)
    return ArraySlice.new(ary, args.first + start, args.last) if args.size == 2
    return ArraySlice.new(ary, args.first.begin + start, if args.first.exclude_end? then args.first.end - args.first.begin - 1 else args.first.end - args.first.begin end) if args.first.is_a?(Range)
    ary[args.first + start]
  end

  def []=(*args, value)
    return ary[args.first + start, length] = value if args.size == 2
    return ary[Range.new(args.first.begin + start, args.first.end + start, args.first.exclude_end?)] = value if args.first.is_a?(Range)
    ary[args.first + start] = value
  end

  def each(&blk)
    ary[start, length].each(&blk)
  end

  # and so on …

  private

  attr_accessor :ary, :start, :length
end

a = [1, 2, 3]
b = ArraySlice.new(a, 1, 2)
b[0] = 42
a[1] # => 42

选择器分组

前两组不是通用选择器 - 它们只是标签/属性选择器，而且它们非常高效。您会注意到它们无法合并到单个选择器集中，因为第二个大组略有不同：它不是针对<select>个元素。

这是因为<select>元素是愚蠢的，应留给UA来处理。

这个选择器集比前两个更广泛，考虑到你可能希望用这个all types of <input> elements来定位，而不是在之前的分组中。

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

如果你不想混合你的风格，并且重载错误的东西，那么差异很重要。

Clearfix

最后，clearfix。

现在，您通常通过::after伪元素直接在需要它的元素上包含一个微清除。这太棒了。

但是，在此之前，您会看到 clearfix元素。这就是input, textarea, select, fieldset { margin-bottom: 1.5rem; }类的用途，尽管content变得毫无意义。

.u-cf

body > div {
  background-color: #555;
}

.myFloat {
  margin: 10px;
  width: 50px;
  height: 50px;
  float: left;
  
  background-color: #aaa;
}

.u-cf {
  content: '';
  display: table;
  clear: both;
}

关于骷髅的一些问题

1 个答案:

什么是通用选择器？

选择器分组

Clearfix