CSS3新选择器怎么用

CSS3 引入了许多新的选择器，它们可以帮助你更精确地定位和样式化元素。以下是一些常用的 CSS3 新选择器及其用法：

1. 属性选择器：根据元素的属性及其值来选择元素。

   • [attribute]：选择具有指定属性的元素。
   • [attribute=value]：选择属性值等于指定值的元素。
   • [attribute~=value]：选择属性值包含指定词汇的元素。
   • [attribute|=value]：选择属性值以指定值开头的元素。
   • [attribute^=value]：选择属性值以指定值开头的元素。
   • [attribute$=value]：选择属性值以指定值结尾的元素。

   示例：

   /* 选择具有data-type属性的元素 */
   [data-type] {
     background-color: yellow;
   }
   
   /* 选择data-type属性值为"button"的元素 */
   [data-type="button"] {
     background-color: blue;
   }
   

2. 结构伪类选择器：根据文档树中的元素关系来选择元素。

   • :nth-child(n)：选择父元素的子元素中第 n 个元素。
   • :nth-last-child(n)：选择父元素的子元素中倒数第 n 个元素。
   • :first-child：选择父元素的第一个子元素。
   • :last-child：选择父元素的最后一个子元素。
   • :nth-of-type(n)：选择父元素的同类型子元素中第 n 个元素。
   • :nth-last-of-type(n)：选择父元素的同类型子元素中倒数第 n 个元素。
   • :first-of-type：选择父元素的第一个同类型子元素。
   • :last-of-type：选择父元素的最后一个同类型子元素。
   • :only-child：选择父元素的唯一子元素。
   • :only-of-type：选择父元素的唯一同类型子元素。

   示例：

   /* 选择所有列表项中的第一个和最后一个元素 */
   li:first-child,
   li:last-child {
     font-weight: bold;
   }
   
   /* 选择所有列表项中的偶数元素 */
   li:nth-child(even) {
     background-color: lightgray;
   }
   

3. UI 元素状态伪类选择器：根据元素的状态来选择元素。

   • :hover：当鼠标悬停在元素上时选择元素。
   • :focus：当元素获得焦点时选择元素。
   • :active：当元素被激活（例如鼠标按下）时选择元素。
   • :disabled：当元素被禁用时选择元素。
   • :enabled：当元素可用时选择元素。

   示例：

   /* 当鼠标悬停在按钮上时，改变按钮背景颜色 */
   button:hover {
     background-color: green;
   }
   
   /* 当输入框获得焦点时，边框变为红色 */
   input:focus {
     border: 2px solid red;
   }
   

这些只是 CSS3 新选择器的一部分，更多选择器和用法可以查阅相关文档和教程。