CSS基础

选择器

选择器 描述
* 选择所有
element 标签选择器
#id id选择器
.class
.class1.class2 交集选择
.class1 .class2 后代选择
element,element 并集选择
element>element 子一级选择
element1+element2 1之后的首个2元素(同级)
element1~element2 1之后的所有2元素(同级)

后代选择器 空格分隔
选择 子元素 >分隔
选择 下一个同级元素(相邻兄弟选择器) +
选择 同级元素(兄弟选择器) ~

 

选择优先级、权重(大覆盖小,权重相同后覆盖前)

选择器 权重
内联(HTML内) 1000
id 0100
class 伪类 0010
标签 0001
继承 0000

后代选择器(包含选择器)为权重之和

 

常见 伪类(Pseudo-classes)

 

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

 

 

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */



伪类 说明
:first-child 一组兄弟元素中的 第一个元素
:first-of-type 一组兄弟元素中 指定类型 的 第一个元素
:last-child 一组兄弟元素中的最后一个元素(类似 :first-child)
:last-of-type 一组兄弟元素中指定类型的最后一个元素(类似 :first-of-type)
:not() 否定选择括号中填的参数
:nth-child(an+b) 按位置匹配(首位为1)
:nth-child(4) 匹配位置为 4 的元素
:nth-child(2n) 匹配位置为2、4、6、8... 的元素,可以使用 :nth-child(even) 代替
:nth-child(2n+1) 匹配位置为1、3、5、7... 的元素,可以使用 :nth-child(odd) 代替
:nth-child(3n) 匹配位置为 3、6、9... 的元素
:nth-of-type 与 nth-child 相似,不同之处在于它是只匹配特定类型的元素

 

常见 伪元素(pseudo-elements)

伪元素创建了不存在 DOM 树中的元素,并为其添加样式,在其内容后使用 content 添加内容。

伪元素 描述
::after 选中元素的后一个元素
::before 选中元素的前一个元素
::first-letter 文字第一行开始至第一个字母
::first-line 第一行文字
::selection 文档中被用户高亮的部分

伪类、伪元素参考:
CSS 常用伪类和伪元素 - 边玉杰的文章 - 知乎

 

列表样式

 

无序列表

li圆点样式

li {list-style-type:符号名称}

符号名称可用的值为:
none:不使用项目符号。
disc:实心圆。
circle:空心圆。
square:实心方块。
demical:阿拉伯数字。
lower-alpha:小写英文字母。
upper-alpha:大写英文字母。
lower-roman:小写罗马数字。
upper-roman:大写罗马数字。

上一篇:2021-11-14(JZ57 和为S的两个数字)


下一篇:webpack项目配置(未完成)