正确使用类选择器的方法及总结：

在HTML页面中，我们可能会遇到许多具有不同样式的元素。有时，我们希望为某些特定元素设置相同的样式。为了实现这一目标，我们需要使用选择器来从HTML页面中查找这些元素。选择器为样式规则指定了一个作用范围，使得我们可以针对特定的元素进行样式设置。

常见的CSS选择器分为以下几类：

1. 标签选择器：通过标签名来选择元素。例如，下面的代码将所有的`

`标签设置字体颜色为红色：

```css

p {

color: red;

}

```

在这个例子中，`p`是标签选择器，它选择了所有的`

`标签，并将它们的字体颜色设置为红色。

以下是重构后的HTML和CSS代码：

```html

```

主要更改如下：

1. 将样式规则移动到单独的`.red-text`和`.yellow-text`类中，以避免与内联样式冲突。

2. 将所有带有颜色属性的元素添加相应的类名(如`span`, `p`, `li`和`div`)。

以下是您提供的段落的内容重构：

id选择器是一种通过元素的ID值来选择元素的方法。在CSS中，可以使用#符号来指定元素的ID。例如，如果您想要将一个元素的字体颜色设置为红色，您可以使用以下代码：

```css

#i1 { color: red; }

```

这将选择id值为i1的元素，并将其字体颜色设置为红色。希望这可以帮到您。如果您有任何其他问题，请随时问我。

```html

```

类选择器是一种CSS选择器，用于选择具有指定类名的元素。类选择器的语法如下：

```

[class=value]

```

其中，`class`表示要匹配的类属性名称，`value`表示要匹配的类属性值。例如，如果要选择所有拥有类名为\"my-class\"的元素，可以使用以下代码：

```css

.my-class {

/* 这里是要应用的样式 */

}

```

此外，还可以使用通配符来选择多个具有相同类名的元素。例如，如果要选择所有拥有类名为\"my-class\"的元素，无论其有多少个字符，都可以使用以下代码：

```css

[class=\"my-class\"] {

/* 这里是要应用的样式 */

}

```

解析：根据需求，需要修改HTML代码中的类选择器，使其能够正确显示绿色字体且带有下划线。

代码：

```html

```

```html

```