CSS类入门指南

• :链接表示用户尚未访问的链接。
• :参观指示用户以前访问过的链接。
• :徘徊显示用户光标位于其上的链接。
• :主动标记一个被按下的链接。

让我们看一个例子。说你想仅从某些链接中删除下划线在所有国家。这意味着，无论用户是否访问了该链接，或悬停在它上面，或积极地按下它，下划线将不会出现在这些特定的链接下面。

在这种情况下，只需向要删除下划线的链接添加class属性。然后使用类选择器和四个各自的伪类添加四个规则集。在每个声明块中，将text-decoration属性设置为“none”。

HTML:

HTML站点的链接
默认情况下，下划线将出现在每一种状态下的链接:当鼠标悬停，点击，访问，或没有。你可以用CSS删除它

这是一个未格式化的链接出现在一个段落中

这是一个格式化的链接，出现在一个段落

CSS:

{.no-underline:链接
文字修饰:没有;
}

.no-underline:访问{
文字修饰:没有;
}

.no-underline:{徘徊
文字修饰:没有;
}

{.no-underline:活跃
文字修饰:没有;
}

结果:

图片来源

用伪类样式化按钮

伪类可以用于样式化所有类型的选择器。除了文本链接，您还可以格式化按钮。

与.buttonCSS类，你可以为不同的状态样式按钮外观::链接,:参观,:徘徊,:主动。

ID选择器

ID选择器的工作方式很像类选择器，只是更加严格。使用此方法，您可以为每个页面的单个元素提供惟一的ID，从而不可能重用样式。

使用ID选择器涉及id属性在您想要选择的HTML元素上。相应的选择器以井号(#)开始，而不是句号(.)。

要被选中，元素的id属性必须与选择器中定义的值匹配。

此外，id属性为URL片段(如页面锚点)提供了目标——因此它们应该是惟一的。片段帮助你向用户介绍网页的特定部分-片段看起来像一个ID选择器放置在URL的结尾。

源

ID选择器很少是开发人员的最爱。为页面上的每个元素分配唯一的ID是非常耗时的，如果要对多个元素进行样式化，那么CSS看起来会很笨拙。

此外，该方法使您的网站的url依赖于CSS样式。一个小失误，比如在编辑URL后忘记更新样式表，可能会破坏部分或整个网站。

CSS特异性

在某些情况下，不同的CSS选择器有不同的权重。当两个或多个规则在同一个元素上发生冲突时，应用更具体的规则CSS特异性是关于。特定的浏览器规则对样式声明的排序决定了元素的最终外观。

这就是ID选择器发挥作用的地方。因为它们是如此的具体，几乎任何其他类型的选择器都会对它们不利。另一方面，通用选择器(*)由于特异性较低，每次都会丢失。

以下是不同的选择器在层次结构中的排名:

1. 内联CSS:内联CSS作为样式属性出现在HTML元素的开始标记中。因为这种CSS最接近HTML，所以它具有最高级别的专一性。
2. ID选择器:ID对于页面元素是唯一的，因此非常特定。
3. 类选择器、属性选择器和伪类选择器:这三种选择器类型具有相同的特殊性。如果所有这三种类型都应用于同一个HTML元素，那么样式表中最新出现的那一种将应用并覆盖其余的。
4. 类型选择器:这些选择具有给定节点名和语法的所有HTML元素元素。这些是元素名和伪元素。

开始使用CSS类

CSS类可以帮助你更快更容易地定制网页上的元素。使用CSS类选择器允许您设置规则来格式化HTML元素的整个类、类中的特定元素或跨多个类的单个元素。当你设计你的网站的时候，你可以想多有创意就多有创意，但是记住，你的目标是改进你的网站用户体验(UX)。