CSS复合选择器与标签显示模式

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

CSS复合选择器

• 使用CSS复合选择器目的是为了可以选择更准确更精细的目标元素标签。
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

后代选择器

• 后代选择器又称为包含选择器

• 用来选择元素或元素组的子孙后代

• 写法就是把外层标签or类写在前面，内层标签or类写在后面，中间用空格分隔

  父级 子级{属性:属性值;属性:属性值;}
  

子元素选择器

子元素选择器只能选择作为某元素**子元素(亲儿子，不包含孙子 重孙子之类)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

父级>子级{属性:属性值;属性:属性值;}

交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

标签选择器.类选择器{属性:属性值;属性:属性值;}		//标签选择器和类选择器之间没有空格

• 不建议使用

并集选择器

• 并集选择器（CSS选择器分组）是各个选择器通过","连接而成的，通常用于集体声明，所有选择器都会执行后面样式，逗号可以理解为 和的意思
• 如果某些选择器定义的相同样式，就可以利用并集选择器
• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分

选择器1，选择器2，…… {属性:属性值;属性:属性值;}

链接伪类选择器

• 伪类选择器用 “:” 做前缀，伪类选择器有很多，用于向某些选择器添加特殊的效果。
• 此处为链接伪类选择器
  • a:link /* 未访问的链接 */
  • a:visited /* 已访问的链接 */
  • a:hover /* 鼠标移动到链接上 */
  • a:active /* 选定的链接 */（按下鼠标不松开时）
• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误

伪元素

:first-line 选取文字块首行字符

:first-letter 选取文字块首行首个字符

:selection 选取文档中高亮(反白)的部分

:inactive-selection 选取非活动状态时文档中高亮(反白)的部分

:spelling-error 选取被 UA 标记为拼写错误的文本

:grammar-error 选取被 UA 标记为语法错误的文本

:before 在选中元素中创建一个前置的子节点

:after 在选中元素中创建一个后置的子节点

:marker 选取列表自动生成的项目标记符号 */ *

:placeholder 选取字段的占位符文本(提示信息)

:cue 匹配所选元素中 WebVTT 提示

:backdrop 匹配全屏模式下的背景

标签显示模式

行级元素（inline）

• 上下内边距（padding-top、padding-bottom），上下外边距（margin-top、margin-bottom）都失效
• 高度（height）也失效，取而代之的是行高（line-height）
• 行级标签的两侧可以出现其他的行级标签

块级元素(block-level)

• 自己独占一行

• 高度，宽度、外边距以及内边距都可以控制

• 宽度默认是容器（父级宽度）的100%

• 是一个容器及盒子，里面可以放行内或者块级元素

• 注意：

  • 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
  • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

行内元素(inline-level)

常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置是无效的。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或则其他行内元素。

注意：

• 链接里面不能再放链接。

• 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全

行内块元素（inline-block）

• 在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

• 行内块元素的特点：

  • 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
  • 默认宽度就是它本身内容的宽度。
  • 高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;