2022-04-03

简单总结一周学的css

2 日常总结CSS选择器列表h1类型选择器选择元素的一个类型

.className类选择器以class属性的值来选择元素,可以在一个页面中出现多个

#idNameID选择器以id属性的值来选择元素,在页面中是唯一的，只能出现一次article h2后代选择器选择指定祖先元素内的后代元素

article > h2子元素选择器选择指定父元素内的直接子元素h2 ~ p相邻兄弟选择器选择第一个元素后的兄弟元素,两者拥有相同的父元素

h2 + p子元素选择器选择第一个元素后紧跟的元素,两者拥有相同的父元素a[target]目标属性选择器选择一个存在某属性的元素

a[href="http://google.com/"]属性均等选择器选择一个属性值匹配特定值的元素

a[href*="login"]属性包含选择器选择一个属性值包含特定值的元素

a[href^="https://"]属性开头选择器选择一个属性值以特定值开头的元素

a[href$=".pdf"]属性结尾选择器选择一个属性值以特定值结尾的元素

a[rel~="tag"]属性间隔选择器选择一个属性值被空白分割成多个单词，且其中一个单词匹配给定值的元素

a[lang|="en"]属性连接符选择器选择一个属性值被连接符分割成多个单词，且其中一个单词匹配给定值的元素a:link链接(link)伪类选择一个用户没有访问过的链接

a:visited链接(link)伪类选择一个用户访问过的链接

a:hover行为性伪类选择一个用户将鼠标指针悬浮在上方的元素

a:active行为性伪类选择一个用户使用中的元素

a:focus行为性伪类选择一个拥有用户焦点的元素

input:enabled状态性伪类选择一个处于可编辑状态(默认)下的元素

input:disabled状态性伪类选择一个通过设置disabled属性而处于不可编辑状态下的元素

input:checked状态性伪类选择一个被选中的单选或者复选按钮

input:indeterminate状态性伪类选择一个处于不确定状态下的单选或者复选按钮(可能被选中或者不被选中)

li:first-child结构性伪类选择父元素下的第一个子元素

li:last-child结构性伪类选择父元素下的最后一个子元素

div:only-child结构性伪类如果某个元素是它父元素中惟一的子元素,那么将会被匹配

p:first-of-type结构性伪类选择父元素中同类型的第1个子元素

p:last-of-type结构性伪类选择父元素中同类型的最后一个子元素

img:only-of-type结构性伪类若元素为父元素中同类型的唯一元素，则会被匹配

li:nth-child(n)结构性伪类选中父元素中的第n个元素

li:nth-last-child(3n+2)结构性伪类当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，来计算所有元素

p:nth-of-type(3n)结构性伪类当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，只计算文档树中给定类型的元素

p:nth-last-of-type(2n+1)结构性伪类当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，只计算文档树中给定类型的元素

section:target目标伪类选择URI片段标示符的值指向的元素

div:empty空伪类选择没有任何子元素或者文本的元素

div:not(.awesome)否定伪类选择不匹配某个状态标示符的元素