css中id和class的定义格式、使用技巧及选择

下面来详细讲解“CSS中id和class的定义格式、使用技巧及选择”的攻略。

CSS中定义id和class

在CSS中，我们可以通过id和class来定义样式。

id的定义格式

id的定义格式为 #id，其中id为自定义名称，如：

#myId {
  /* 样式代码 */
}

class的定义格式

class的定义格式为 .class，其中class为自定义名称，如：

.myClass {
  /* 样式代码 */
}

CSS中使用id和class

在HTML中，可以通过以下方法来引用CSS中定义的id和class：

使用id

<div id="myId"></div>

此时上方定义的 #myId 样式会应用到该 <div> 元素上。

使用class

<div class="myClass"></div>

此时上方定义的 .myClass 样式会应用到该 <div> 元素上。当然，一个HTML元素也可以同时拥有多个class，如：

<div class="myClass anotherClass"></div>

此时上述两个class定义的样式都会应用到该 <div> 元素上。

CSS中选择id和class

为HTML元素定义id和class，我们可以在CSS样式中使用它们作为选择器。

id的选择

可以使用 #id 的格式来选择id对应的HTML元素，如：

#myId {
  /* 样式代码 */
}

此选择器用于选择id为 myId 的HTML元素，并应用样式代码。

class的选择

可以使用 .class 的格式来选择class对应的HTML元素，如：

.myClass {
  /* 样式代码 */
}

此选择器用于选择使用class为 myClass 的HTML元素，并应用样式代码。

示例一

下面给出一个使用id定义和应用样式的使用方法示例。

HTML 代码：

<div id="title">Welcome to My Website</div>

CSS 代码：

#title {
  color: #f00;
  font-size: 24px;
}

上述CSS样式将会设置 #title 对应的 HTML 元素内容颜色为红色，文字大小为24px。

示例二

下面给出一个使用class定义和应用样式的使用方法示例。

HTML 代码：

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">About Us</li>
  <li class="menu-item">Contact Us</li>
</ul>

CSS 代码：

.menu-item {
  display: inline-block;
  margin: 5px;
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
}

上述CSS样式将会设置 .menu-item 对应的 HTML 元素的样式，包括元素显示方式、左右边距、内部填充、背景颜色和文字颜色。

以上就是关于CSS中id和class的定义格式、使用技巧及选择的详细攻略，希望对你有所帮助。