什么是 CSS 中的上下文选择器？

在本文中，我们将了解 CSS 中的上下文选择器并借助代码示例了解声明语法。
上下文选择器被定义为考虑应用样式的上下文的选择器。简而言之，只有当元素在指定的上下文中时，指定的样式才会应用于元素。上下文可以定义为文档不同部分之间的父/子关系或祖先/后代关系。上下文选择器由两个或多个由空格分隔的简单选择器组成。类，任何类型，ID 选择器都被认为是一个简单的选择器。

后代：它匹配包含在另一个元素中的所有元素。

句法：

div {color: red}
p {color: red;}

对于任何特定的 HTML 元素，我们可以应用设置该元素样式所需的通用 CSS 属性。下面的代码示例将说明应用上下文选择器的方法。

示例：在此，有一个父 div 标签及其两个子 p 标签。父

标签和父

标签在程序执行时将元素变为红色。

HTML

 

    
 
    

 

    

         
Geeks For Geeks
 
         
A Computer Science portal for geeks.
 
    
     
     
What are Contextual Selectors in CSS?
 

 

输出：

但是假设你只需要把那个段落变成 div 下的绿色，而不是 div 外面的另一个。您希望

和

标记在整个文档中都保持红色，但对于

标记内的元素，您需要将

标记变为绿色。你怎么能做到这一点？

好吧，上下文选择器的真正重要性来了。

句法：

div p{color: green;}

示例 2：在此示例中，

标记内的任何

标记都将使其变为绿色（而不是像前面指定的语法那样变为红色）。在这里，

标签只会在

标签的上下文中变为绿色。在所有其他情况下它将是红色的。

HTML

 

    
    

 

    

         
Geeks For Geeks
 
         
A Computer Science portal for geeks.
 
    
 
     
What are Contextual Selectors in CSS?
 

 

输出：

从上面的示例中，我们已经看到，只有当元素在指定的上下文中时，上下文选择器才会应用于元素的样式。

你好极客！现在不要停止学习。通过初学者网页设计掌握所有重要的竞争性编程概念| HTML 课程。