CSS中点(.)后的3行

在CSS中，使用点(.)来选择一个类。点后面的3行可以是CSS规则，这些规则定义了如何在HTML文档中应用样式。

1. 属性选择器

属性选择器可以基于元素的属性值选择元素，并使CSS仅适用于匹配选择器的元素。下面是一些属性选择器的示例：

/*选择所有含有“class”属性，并且属性值包含“myClass”的元素*/
[class*="myClass"]{
   color: red;
}

/*选择所有href属性的值以“.pdf”结尾的链接*/
a[href$=".pdf"]{
   color: blue;
}

以上代码将会使所有包含“myClass”的元素变为红色，而所有链接后缀为“.pdf”的链接变为蓝色。

2. 子选择器

子选择器用于选择一个元素的子元素。它们只选择命中元素的子代，而不是所有后代元素。

/*选择所有紧随在<div>元素后的<p>元素*/
div > p {
   font-size: 16px;
}

上述代码将会使所有直接子元素是“div”的“p”元素字体大小为16px。

3. 群组选择器

群组选择器可以将多个选择器组合在一起，以逗号分隔。这使得可以一次应用多个样式，而不必为每个选择器单独定义一组样式。

/*选择所有类名为"highlight"或"selected"的元素*/
.highlight, .selected {
   background-color: yellow;
   color: black;
}

以上代码将会使所有类名为“highlight”或“selected”的元素背景色为黄色，文字颜色为黑色。

总之，这三行代码可以引发CSS的强大功能。属性选择器、子选择器和群组选择器的组合可以让开发者更轻松地编写具有表现力的CSS代码。