Swift / Math - 缩放时保持原点(Swift/Math - Maintain origin when scaling)

 您可以使用:not([data-type])选择任何不具有属性data-type集的元素，而不管使用的值如何。 
 
 基本工作实例： 
 
 
 
 
 
  
div:not([data-type]) {
  color: red;
}
 
  
<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>
 
 
 
 
 
 
 或者，您可以执行相反的操作并使用[data-type]选择具有data-type属性集的任何内容，而不管其值如何 
 
 工作示例： 
 
 
 
 
 
  
div[data-type] {
  color: red;
}
 
  
<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>
 
 
 
 
 
 
 如果你想要定位一个子div，其父div有data-type属性设置，你可以使用这样的东西： 
 
 
 
 
 
  
div[data-type]>h1 {
  color: red;
}
 
  
<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>
 
 
 
 
 
 这也可以根据您的选择器首选项来调用，以定位没有data-type属性集的父元素的子元素。 
 
 
 
 
 
  
div:not([data-type])>h1 {
  color: red;
}
 
  
<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>
 
 
 
 
 
 
 如果你有更复杂的结构，你可以使用通配符*选择器来构建匹配非常宽泛的模式的选择器。 字母表示元素所在的树的深度， aaa是直接的孩子， bbb是孙子......等等 
 
 基本示例： 
 
 
 
 
 
  
[data-type] * h1,
[data-type] h1 {
  color: red;
}
 
  
<div data-type="type1">
  <h1> aaa</h1>
</div>

<hr>

<div>
  <h1> aaa</h1>
</div>

<hr>

<div id="test" data-type="type1">
  <div>
    <h1> bbb</h1>
    <div>
      <h1> ccc</h1>
    </div>
  </div>
  <h1 class="wow"> aaa</h1>
  <div>
    <h1 class="wow"> bbb</h1>
  </div>
</div>

<hr>

<div id="test">
  <h1 class="wow"> aaa</h1>
  <div>
    <div>
      <h1> ddd</h1>
    </div>
    <h1 class="wow"> ccc</h1>
  </div>
</div>
 
 
 
 

You can use :not([data-type]) to select any element that does not have the attribute data-type set regardless of the values used.
 
Basic working example:
 
 
 
 
 
  
div:not([data-type]) {
  color: red;
}
 
  
<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>
 
 
 
 
 
 
Alternatively, you can do the opposite and use [data-type] to select anything with the data-type attribute set regardless of the value
 
Working example:
 
 
 
 
 
  
div[data-type] {
  color: red;
}
 
  
<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>
 
 
 
 
 
 
If you want to target a child div whose parent div has the data-type attribute set the you can use something like this:
 
 
 
 
 
  
div[data-type]>h1 {
  color: red;
}
 
  
<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>
 
 
 
 
 
This also can be reveresed based on your selector preference to target the child elements of parent elements which do not have the data-type attribute set.
 
 
 
 
 
  
div:not([data-type])>h1 {
  color: red;
}
 
  
<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>
 
 
 
 
 
 
If you have more complex structures you can make use of the wildcard * selector to build selectors that match very broad patterns. The letters represent the depth of the tree on which the element resides with aaa being a direct child and bbb being a grandchild...etc
 
Basic Example:
 
 
 
 
 
  
[data-type] * h1,
[data-type] h1 {
  color: red;
}
 
  
<div data-type="type1">
  <h1> aaa</h1>
</div>

<hr>

<div>
  <h1> aaa</h1>
</div>

<hr>

<div id="test" data-type="type1">
  <div>
    <h1> bbb</h1>
    <div>
      <h1> ccc</h1>
    </div>
  </div>
  <h1 class="wow"> aaa</h1>
  <div>
    <h1 class="wow"> bbb</h1>
  </div>
</div>

<hr>

<div id="test">
  <h1 class="wow"> aaa</h1>
  <div>
    <div>
      <h1> ddd</h1>
    </div>
    <h1 class="wow"> ccc</h1>
  </div>
</div>