CSS之选择器、优先级、继承

CSS选择器用于指定CSS样式应用的HTML标签，可以基于标签名、类名、ID等进行选择。

1. 基础选择器：

   • 标签选择器（Element selector）：直接使用HTML标签名作为选择器。
   • 类选择器（Class selector）：使用.前缀。
   • ID选择器（ID selector）：使用#前缀。

/* 标签选择器 */
p { color: blue; }
 
/* 类选择器 */
.center { text-align: center; }
 
/* ID选择器 */
#header { background-color: yellow; }

2. 组合选择器：

   • 分组选择器（Grouping selector）：用逗号分隔多个选择器，同样规则适用于所有选择器。
   • 子选择器（Child selector）：使用>表示直接子元素。
   • 后代选择器（Descendant selector）：使用空格表示所有后代元素。

/* 分组选择器 */
h1, h2, h3 { color: green; }
 
/* 子选择器 */
ul > li { list-style-type: square; }
 
/* 后代选择器 */
div a { text-decoration: none; }

3. 优先级：

   • 内联样式（Inline style）：直接在HTML元素的style属性中指定，优先级最高。
   • ID选择器（ID selectors）> 类选择器（Class selectors）> 标签选择器（Element selectors）> 通用选择器（Universal selectors）。
   • 后代选择器中，层级越深，优先级越低。
   • 如果优先级相同，后定义的样式会覆盖先定义的样式。

4. 继承：

   • CSS中，某些属性是可以继承的，比如color和font-family。
   • 子元素没有明确指定这些属性时，会继承父元素的属性值。

/* 当没有为p标签指定color时，它将继承body的color属性 */
body { color: red; }
p { } /* 这里不指定color，将继承body的red */

以上是CSS选择器、优先级和继承的基本概念和示例。