从零开始HTML＃021——5分钟-id

标签

#021_Ent_Id

今天我们将学习一个叫 id 的属性，这是一个非常方便的属性，可以让我们简单标记、或者指定某一个元素、对象或者标签，从而针对这些目标进行简单的样式编辑，就像上节课我们学习的 class 属性一样。

简单的开始

首先，我们需要一个简单的 HTML 文档，文档里面有一个 ul 元素，这个是我们等下要用到的。

请大家准备好 body 部分的代码

head 部分除了 title 以外，其他代码可以去掉，没有多大的影响的。我们这次的主要目的是，将【签到】两个字，区别于其他的文字。

我们可以使用 link 链接一个外联 css 来实现这个任务，当然，在这种简单的小项目下，我们可以转用小小的内联样式表来完成这个操作，因为他们实际是一样的，你可以将外联和内联样式表的内容相互调换或者整合。

指定元素

我们之前学到的样式处理，还不能针对某一个元素进行样式定义，只能做到

之前课程里学到的样式设置

那么如何指定其中某一个元素进行样式设置呢？这里有几个简单的方法

id 和 class

我们在需要设置特殊样式的元素中加入 id / class 属性，如果需要对某个特别的元素进行设置，则需要用到

去命名一个元素，而需要多多个特别的元素进行样式设置，则需要用到上节课的

对需要设置特别样式的元素进行分类或者识别。

方法一效果图

子类选择

记得我们以前学过的父子关系嘛？在这里我们也可以利用这个，来选定元素设置样式。

子类选择器

#select li:nth-child(4) { 样式设置 }

这条将会对 id = select 的 ul 元素下的第四个 li 元素进行特殊的样式设置，如果在样式表设置的时候，没有加入 #select ，那么所有 list 类型的第四个 li 元素都会响应这个样式表的 grey 设置。

ul:first-of-type li:nth-child(1) { 样式设置 }

同样的，如果没有这条 ul 的 first-of-type 属性，那么所有 list 类型的第一个 li 元素都会响应这个样式表的 green 设置。

方法二效果图

现在我们第一周目的基本知识已经学完了，下回我们将要完成一个简单的、像那么一回事的网页= =