CSS样式定义、选择器、伪类

type

status

date

slug

summary

样式定义

Sass定义样式变量

:class形式赋值类名

:style形式行内样式

通过JavaScript获取标签节点，定义样式

CSS选择器

元素选择器

通配符选择器：* { } 选中页面中所有的元素

标签名选择器：元素名 { } 选中页面中所有的指定标签

类名选择器：.class { } .加class类名的选择器

id选择器：#id { } 选中具有指定id的元素(不建议用id写样式)

分组选择器：选择器1，选择器2，....,选择器n { } 几个选择器选中的元素共用一套样式

关系选择器

子代选择器：父元素 > 子元素{ }

后代选择器：祖先元素后代元素{ }

相邻选择器：元素a + 相邻元素b{ } + 选中某个元素之后的相邻下一个元素

兄弟选择器：元素a ~ 相邻元素b{ } ~ 选中某个元素之后的其他的兄弟元素

父级选择器&向前兄弟选择器：:has()

延申案例

验证按钮中是否存在图标

子菜单附加下拉箭头

:has() 与 :not() 结合

除我之外的所有选择器

打开弹窗时锁定滚动条

数量查询

结构选择器

选中第一个子元素：:first-child :first-of-type

选中第n个元素：:nth-child(n) :nth-of-type(n)

选中最后一个子元素：:last-child :last-of-type

否定伪类：:not(div) 选取不符合括号内选择器的所有元素

伪元素选择器

伪元素选择器可以利用css创建标签元素，而不需要HTML标签，简化HTML结构

动态伪类

:hover 当鼠标悬停在元素上时的样式

:active 当元素被用户激活（如点击）时的样式

:focus 当元素获得焦点（如输入框被点击）时的样式

:focus-within 元素自身或者它的某个后代匹配 :focus 伪类

与之类似：父级获取焦点，子级做出样式更改

::selection 表示使用鼠标或其他选择设备选中的部分

表单元素状态伪类选择器

:empty 判断数据是否为空

:enabled和:disabled 用于表单元素，表示元素是否可用

:checked 用于单选框或复选框，表示元素是否被选中

::placeholder 用于定义<input>或<textarea>元素中的占位文本

::first-line 表示第一行（根据屏幕大小来决定显示多少字）

::first-letter 表示第一个字母

::before与::after

在元素内部的前面/后面插入内容，必须配合 content 属性联合使用