CSS 学习第二天（样式表的优先级&基本、复合选择器）

最新推荐文章于 2024-03-24 20:11:13 发布

炫彩发福蝶

最新推荐文章于 2024-03-24 20:11:13 发布

阅读量1k

点赞数 21

文章标签： css 学习前端 html

本文链接：https://blog.csdn.net/qq_43300604/article/details/136757825

版权

# 样式表的优先级

行内样式的优先级要高于内部样式的优先级：

<head>
  <meta charset="UTF-8">
  <title>优先级</title>

  <!-- 内部样式 -->
  <style>
    h1 {
      color: red;
    }
  </style>

</head>

<body>

  <!-- 行内样式 -->
  <h1 style="color: green;">欢迎来到崆峒山</h1>

</body>

优先级：行内样式 > 内部样式 = 外部样式（后写的样式会覆盖前面写的样式）（后来者居上）

# 基本选择器

* ：表示选中 <body> 中所有标签添加样式

.[class class] ：在标签中添加 class 类，选中class类添加样式

id、class不能以数字开头；不同标签的id名不能重复使用；一个标签内可以同时拥有id、class

引用标签中的 id 需要用 # [id]

复合选择器：

# 交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3......选择器n { }

注意：

元素选择器配合类型选择器是最常用的，例如：p.rich （标签p，类名rich）
不可能同时出现两个元素选择器，因为一个元素不可能同时是 p元素和span元素。

# 并集选择器（选择器间用英文状态的逗号）

作用：选中多个选择器对应的元素，又称为分组选择器

语法：选择器1，选择器2，选择器3, ...... , 选择器n { }

注意：

并集选择器，一般都竖着写，更清晰的分别标签、类名和id
任何形式的选择器，都可以作为并集选择器的一部分（id、类名、元素等等）

# 后代选择器（选择器之间用空格隔开）

作用：选中指定元素中，符合要求的后代元素。

语法：选择器1 选择器2 选择器3 ...... 选择器n { }

注意：

后代选择器，最终选择的是后代。
儿子、孙子、重孙子，都算是后代。
结构一定要符合HTML的嵌套要求。比如<p>中不能写<h1~h6>。

# 子代选择器（选择器之间用大于号隔开）

作用：选中指定元素中，符合要求的儿子元素。（先写父亲，后写儿子）

语法：选择器1 > 选择器2 > 选择器3 > ...... > 选择器n { }

注意：

子代选择器，最终选的是子代，不是父级。
子、孙子、重孙子......都成为后代，子就是指的儿子！！

# 兄弟选择器

1. 相邻兄弟选择器

相邻兄弟选择器的作用：选定指定元素后，符合条件的相邻兄弟元素。（紧挨着的下一个，不能往上走！！（睡在我下铺的符合条件的第一个兄弟）不符合叉出去）

相邻兄弟选择器的语法：选择器1 + 选择器2 { }

2. 通用兄弟选择器

通用兄弟选择器的作用：选中指定元素后，符合条件的所有兄弟元素。（睡在我下铺的所有兄弟)

通用兄弟选择器的语法：选择器1 ~ 选择器2 { }

注意：

两种兄弟选择器，选择的是不包括自身的下面的兄弟（除了自己以外的兄弟）

# 属性选择器

作用：选中属性值符合一定要求的元素。

语法：

[ 属性名 ] 选中具有某个属性的元素。（只要包含这个元素，全部铺盖）
[ 属性名 ="值" ] 选中包含某个属性，且属性值等于指定值的元素。
[ 属性名^ ="值" ] 选中包含某个属性，且属性值以指定的值开头的元素。
[ 属性名$ ="值" ] 选中包含某个属性，且属性值以指定的值结尾的元素。
[ 属性名* ="值" ] 选择包含某个属性，属性值包含指定值的元素。（只要元素中有这个值）