现在css100天速读

2023-04-05

#阅读 css100 天

day1

div {
  //当--not-set不存在的时候，使用第二个参数作为默认值
  background-color: var(--not-set, #000);
}

day2

<h3>left to right</h3>

<ul>

  <li>One</li>

  <li>Two</li>

  <li>Three</li>

</ul>


<h3>right to left</h3>

// 读取方向，从右边往左开始
<ul dir="rtl">

  <li>One</li>

  <li>Two</li>

  <li>Three</li>

</ul>

day3

button {
  // 无论读取方向如何，这些属性都将始终按照从上到右，从下到左的方向应用
  margin: 20px 40px 10px 100px;
}
.logical {
  margin-inline: 5rem; /* start and end value (= left and right) */
  margin-block: 5rem; /* start and end value (= top and bottom) */
  margin-inline: 1rem 2rem; /* start / end value (= left / right in ltr) */
  margin-block: 3rem 4rem; /* start / end value (= top / bottom in ltr) */
}

day3

1
2
3

div {
  width: min(400px, 200px, 300px);
}

day4

1
2
3

div {
  width: max(400px, 200px, 300px);
}

day5

<form>
  <div class="form-item">
    <label for="name">Name</label><br />
    <input type="text" id="name" required aria-invalid="true" />
  </div>
  <div class="form-item">
    <label for="email">E-Mail</label><br />
    <input type="text" id="email" />
  </div>
</form>

.form-item {
  --color: #000;
  /* The default color is #000 */
  color: var(--color);
}

input {
  /* The default border-color is #000 */
  border: 1px solid var(--color);
}

/* 如果对应元素包含那个属性值，就添加对应属性*/
.form-item:has([aria-invalid="true"]) {
  --color: #f00;
}