CSS 选择器属性指南：id，class 和属性选择器

CSS（层叠样式表）是用来描述网页上的元素如何被渲染和布局的一种语言。在 CSS 中，选择器用来选择具体的 HTML 元素，然后应用样式规则。

本文将重点介绍三种常见的选择器属性：id，class 和属性选择器，并提供具体的代码示例。

id 选择器用于选择具有特定 id 属性的元素，id 属性需要在 HTML 中唯一。在 CSS 中，id 选择器的语法是在选择器名字前加上 # 符号。下面是一个例子：

<div id="header">这是网页的页眉</div>

#header {  background-color: blue;  color: white;}

上面的代码表示一个 id 为 “header” 的 div 元素，它的背景颜色为蓝色，文字颜色为白色。

class 选择器用于选择具有特定 class 属性的元素，一个元素可以有多个 class 属性，并且多个元素可以共享同一个 class 属性。在 CSS 中，class 选择器的语法是在选择器名字前加上 . 符号。下面是一个例子：

<p class="highlight">这是一个高亮的段落</p>

.highlight {  background-color: yellow;  font-weight: bold;}

上面的代码表示一个 class 为 “highlight” 的 p 元素，它的背景颜色为**，文字加粗。

属性选择器用于选择具有特定属性的元素，可以根据属性值来进行选择。在 CSS 中，属性选择器的语法有多种形式。下面是几个例子：

选择具有特定属性的元素：

<a href="#">这是一个链接</a>

a[href] {  color: blue;}

上面的代码表示选择所有具有 href 属性的 a 元素，将它们的文字颜色设置为蓝色。

选择具有特定属性和属性值的元素：

<input type="text" value="请输入用户名">

input[type="text"] {  width: 200px;}

上面的代码表示选择所有 type 属性为 “text” 的 input 元素，将它们的宽度设置为 200px。

选择具有特定属性值开头的元素：

<img src="images/logo.png" alt="Logo"><img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {  border: 1px solid gray;}

上面的代码表示选择所有 src 属性值以 “images/” 开头的 img 元素，给它们添加一个灰色的边框。