语法及选择器

预计阅读时间2 分钟 129 views

1 CSS语法

CSS的语法其实很简单，就像是给HTML元素制定规则一样。基本的CSS规则包括三个部分：

选择器（Selector）：它决定了哪些HTML元素要应用这个样式规则。
声明块（Declaration Block）：大括号{}内包含了一系列的属性和值，用来定义选择器的样式。
属性和值：属性是你要改变的样式特征，值是属性要应用的具体样式。

举个例子，如果你想让所有的<p>标签（段落）文字变成红色，字体大小为16像素，你可以这样写：

p {
  color: red;
  font-size: 16px;
}

2 选择器

CSS提供了多种选择器，可以用来精确地选择和样式化HTML元素。下面是一些常用的选择器类型：

元素选择器：直接使用HTML元素名称作为选择器。

p {
  color: blue;
}

类选择器（Class Selector）：以.开始，用来选择具有特定类的元素。

.highlight {
  background-color: yellow;
}

ID选择器（ID Selector）：以#开始，用来选择具有特定ID的元素。

#navbar {
  border: 1px solid #000;
}

属性选择器：用来选择具有特定属性或属性值的元素。

a[target="_blank"] {
  color: green;
}

伪类选择器：用来定义元素在特定状态下的样式，如:hover、:active、:focus等。

a:hover {
  text-decoration: underline;
}

组合选择器：可以组合使用以上选择器来选择元素。

#navbar ul li a {
  color: white;
}

通配符选择器（Universal Selector）：用*表示，用来选择所有元素。

* {
  margin: 0;
  padding: 0;
}

示例

假设你有一个简单的HTML页面，你想用CSS来美化它：

<!DOCTYPE html>
<html>
<head>
  <title>CSS选择器示例</title>
  <style>
    /* 元素选择器 */
    h1 {
      color: red;
    }

    /* 类选择器 */
    .error {
      color: orange;
      font-weight: bold;
    }

    /* ID选择器 */
    #footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }

    /* 属性选择器 */
    a[email^="example"] {
      color: purple;
    }

    /* 伪类选择器 */
    input:focus {
      border: 1px solid blue;
    }

    /* 组合选择器 */
    nav ul li {
      display: inline;
      margin-right: 10px;
    }

    /* 通配符选择器 */
    * {
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <h1>这是一个标题</h1>
  <p class="error">这是一个错误消息。</p>
  <footer id="footer">
    版权所有 &copy; 2024
  </footer>
  <nav>
    <ul>
      <li><a href="https://www.example.com">首页</a></li>
      <li><a href="https://www.example.com/about">关于我们</a></li>
    </ul>
  </nav>
  <input type="text" placeholder="输入文本...">
</body>
</html>

在这个示例中，我们使用了不同类型的CSS选择器来为页面元素添加样式。h1使用元素选择器，.error使用类选择器，#footer使用ID选择器，a[email^="example"]使用属性选择器，input:focus使用伪类选择器，nav ul li使用组合选择器，*使用通配符选择器。

语法及选择器

1 CSS语法

2 选择器

示例

Leave a Comment 取消回复

内容