解释 CSS3 中的术语“伪类”

级联样式表称为CSS是一种样式表语言，用于设计和描述网页的呈现以使其具有吸引力。 CSS 的主要用途是简化使网页可呈现的过程。

CSS 描述了元素在屏幕上呈现的方式。 CSS 将样式应用于网页。更重要的是，CSS 使这种样式独立于 HTML。

CSS主要分为以下3种类型。

• 内部 CSS
• 内联 CSS
• 外部 CSS

语法：CSS 包含样式规则，其中包含选择器和声明块。这些样式规则由浏览器解释。

h1 {
     font-size: 20px;
     background-color: blue;
}

• 选择器：选择器告诉要设置样式的 HTML 元素。在这种情况下，选择器是“h1”元素。
• 声明：每个声明都包含一个 CSS 属性名称和值，以分号分隔。在这种情况下，它的“字体大小”和“背景颜色”。

示例：在此示例中，所有“p”元素内的文本将居中对齐，字体大小为 25 像素，颜色为“绿色”。

HTML

  

    

  

    
GeeksforGeeks

  

输出：

为什么使用 CSS？

• Web 开发基础知识：每个 Web 开发人员都应该知道的基本技能是 HTML 和 CSS。
• 代码的可重用性： CSS 文件可以在我们想要应用一些样式的多个 HTML 页面中重用。
• 有吸引力的网站：为我们的网站添加样式肯定会使它对用户更有吸引力。
• 易于维护的代码：只需在单个 CSS 文件中更改代码。
• 增强用户体验：简单而美观的用户界面可帮助用户轻松浏览网站。

使用 CSS 的限制：

• 由于 CSS、CSS1 到 CSS3 等不同级别的 CSS，Web 浏览器之间的混淆。
• 跨浏览器问题，它在不同浏览器上的工作方式不同。
• 由于其开放的基于文本的系统，因此缺乏安全性。

解释参考 CSS3 的术语“伪类”。

如果我们想定义某个元素的特殊状态，我们必须使用伪类。

什么样的特殊状态？

1. 当鼠标悬停在元素上时设置元素的样式。
2. 为某些类型的链接设置样式，例如已访问和未访问的链接。

要根据现有元素的状态为现有元素添加效果，可以将其与 CSS 选择器结合使用。

句法：

selector : pseudo-class{
         CSS property : value;
}

示例：当鼠标悬停在所有“h1”元素上时，font-size 变为 30px。

h1 : hover{
   font-size:30px;
}

伪类的类别：

1. 语言伪类：它可以根据脚本方向或语言选择元素。示例是 :dir 、 :lang。
2. 用户操作伪类：这些特定于用户交互以应用样式，例如鼠标悬停。示例是：悬停，：焦点。
3. 资源状态伪类：应用于能够处于可以描述为暂停、播放等状态的媒体元素。
4. 结构伪类：它与文档树中元素的位置有关。例子是 :last-child, :nth-child
5. 输入伪类：主要与表单等输入元素相关，可以根据HTML属性选择元素，并声明该字段在交互前后。例子是：checked，：valid。
6. 时间维度伪类：在与具有时间的事物（例如轨道）交互时应用。例子是 :future , :current
7. 位置伪类：它针对当前文档中与链接相关的元素。示例是 :scope 、 :visited 。

示例 1：以下两个示例演示了伪类。 :hover 伪类属于用户操作伪类。它适用于用户使用指针设备与元素交互时，不一定会激活它。当鼠标悬停在“h1”元素上时，文本会加下划线。

HTML

    


    

        Welcome to GeeksforGeeks
    

输出：

示例 2：当单击链接并更改颜色时加载页面。 :visited 伪类属于位置伪类。它应用于用户已经访问过的链接。由于隐私，由此应用的样式非常有限。一旦我们访问“geeksforgeeks.org”网站，链接的颜色就会变为“绿色”。

HTML

  


    

        GeeksforGeeks
    
    
Visit 
       GfG
           offical website here
   

输出：