CSS 伪类 :default

:default 伪类匹配一组关联元素中的默认元素,例如一组默认选中的按钮中的单选按钮,即使用户选择了不同的值。

该伪类只能用于 <button>、<input>(当 type="checkbox" 或者 type="radio")和 <option> 元素。

语法

:default {
  css declarations;
}

用于 <input> 标签的 :default 选择器示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:default {
        box-shadow: 0 0 2px 2px #1c87c9;
      }
      .example {
        margin: 20px auto;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>:default selector example</h2>
    <div class="example">
      <p>Do you like coffee?</p>
      <input type="radio" name="radios" id="ex1" checked>
      <label for="ex1">Yes</label>
      <br/>
      <input type="radio" name="radios" id="ex2">
      <label for="ex2">No</label>
    </div>
  </body>
</html>

用于带有 type 属性的 <input> 标签的 :default 选择器示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 700px;
      }
      input[type=submit] {
        padding: .6em 1em;
        font-size: 1em;
        width: 100px;
        margin-bottom: 1em;
      }
      input[type=submit]:default {
        border: 4px dotted #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:default selector example</h2>
    <div class="example">
      <form action="#">
        <input type="submit" value="Yes">
        <input type="submit" value="No">
      </form>
    </div>
  </body>
</html>
日期:2020-06-02 22:14:28 来源:oir作者:oir