CSS选择器

芝麻凛 2021年08月07日 121次浏览

CSS选择器

基本选择器:
选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。
* 将匹配文档的所有元素。
元素选择器:
按照给定的节点名称,选择所有匹配的元素。
input 匹配任何<input>元素。
类选择器:
按照给定的 class 属性的值,选择所有匹配的元素。
.index 匹配任何 class 属性中含有 "index" 类的元素。
ID选择器:
按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
#toc 匹配 ID 为 "toc" 的元素。
属性选择器:
按照给定的属性,选择所有匹配的元素,[autoplay] 选择所有具有 autoplay 属性的元素(不论这个属性的值是什么)。

分组选择器(Grouping selectors)

选择器列表(Selector list)
, 是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
语法:A, B
示例:div, span 会同时匹配 <span> 元素和 <div> 元素。

组合器(Combinators)

后代组合器(Descendant combinator)
(空格)组合器选择前一个元素的后代节点。
语法:A B
例子:div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。

直接子代组合器(Child combinator)
> 组合器选择前一个元素的直接子代的节点。
语法:A > B
例子:ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。

一般兄弟组合器(General sibling combinator)
~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
语法:A ~ B
例子:p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素。

紧邻兄弟组合器(Adjacent sibling combinator)
+ 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
语法:A + B
例子:h2 + p 会匹配所有紧邻在 <h2> (en-US) 元素后的 <p> 元素。

列组合器(Column combinator)
|| 组合器选择属于某个表格行的节点。
语法: A || B
例子: col || td 会匹配所有 <col> 作用域内的 <td> 元素。

伪选择器(Pseudo)

伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子:a:visited 匹配所有曾被访问过的 <a> 元素。

伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
例子:p::first-line 匹配所有 <p> 元素的第一行。

字体属性总结

字体大小:font-size(数字+px)
字体粗细:font-weight(正常:normal或400,加粗:bold或700)
字体样式:font-style(正常:normal 倾斜:italic)
字体系列:font-family ()
字体连写:font (font:style weight size family)

文本样式

文本缩进:属性名(text-indent)常见属性值(数字+px、数字+em)
文本水平对齐方式:属性名(text-align)常见属性值(left/center/right)
文本修饰:属性名(text-decoration)常见属性值(underline、none(常用来去除a标签的下划线))

水平居中方法总结 text-align: center
text-align: center 能让以下元素水平居中
1.文本
2.span标签、a标签
3.input标签、img标签
注意:如果需要让以上元素水平居中,text-align: center 需要给以上元素的父元素设置。

水平居中方法总结 margin: 0 auto
如果需要让div、p、h(盒子)水平居中 可以通过margin: 0 auto;实现。

注意:
1.如果需要让div、p、h(盒子)水平居中,直接给当前元素本身设置即可。
2.margin: 0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度。

line-height应用:

  1. 让单行文本垂直居中可以设置line-height: 文字父元素高度
  2. 网页精准布局时,会设置line-height: 1 可以取消上线间距(1不带单位表示当前倍数,当前行高就是当前个字的高度)
    行高与font连写:font: style weight size/line-height family

CSS三大特性:
1.继承性
2.层叠性
3.优先级

权重计算:行内,id,类,标签
权重不进位:
12个标签选择器权重为:0,0,0,12
一个类选择器权重为: 0,0,1,0