css选择器

一、常用的CSS选择器及其示例：

        介绍：CSS选择器是用于匹配HTML或XML文档中特定元素的模式。它们使开发人员能够根据元素的类型、类、ID、属性以及其他属性来选择和修改文档中的元素样式。

1. 标签选择器：
    匹配所有指定标签的元素。例如，p {} 匹配所有的段落元素。示例：

   p { font-size: 14px; }

2. 类选择器：
   匹配具有指定类名的元素。例如，.example {} 匹配所有类名为“example”的元素。示例：

   .example { color: red; }

3. ID选择器：
   匹配具有指定ID的元素。例如，#example {} 匹配ID为“example”的元素。示例：

   #example { background-color: yellow; }

4. 后代选择器：
   匹配某个元素的后代元素。例如，div p {} 匹配所有p元素，这些元素是div元素的后代。
   示例：

   div p { font-weight: bold; }

5. 子元素选择器：
   匹配某个元素的直接子元素。例如，ul>li {} 匹配ul元素下的所有li元素。示例：

   ul>li { list-style: none; }

6. 相邻兄弟选择器：
   匹配某个元素相邻的兄弟元素。例如，h1+p {} 匹配紧随h1元素后的第一个p元素。示例：

   h1 + p { color: blue; }

7. 伪类选择器：
   匹配某个元素的特定状态。例如，a:hover {} 匹配鼠标悬停在链接上的a元素。示例：

   a:hover { text-decoration: underline; }

8. 属性选择器：
   匹配具有指定属性的元素。例如，input[type="text"] {} 匹配所有type属性为"text"的input元素。示例：

   input[type="text"] { border: 1px solid #ccc; }