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