选择器
- 并集:对选择器进行分组,被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。
h1,h2,h3,h4,h5,h6{}
- 交集:两种属性同属一个元素
p.name{}
、p#id{}
、.name1.name2{}
- 后代(派生):根据元素在位置上的关系定义样式,使用空格隔开,后代选择器尽量不要超过3个,不必把每个层级都列出,只需要写关键点即可
li strong {}
- 子代:只能选择作为某元素的子元素,只选择子代,往后孙子一代不选择
h1 > strong {}
- 兄弟和相邻兄弟:选择紧接在另一元素后的,并且二者有相同父元素
h1 + p {}
- 属性:对带有指定属性的HTML元素设置样式,权重为10
- 属性选择器:为带有
title
属性的所有元素设置样式,[title] {}
- 属性和值选择器:为
title="name"
的所有元素设置样式,[title=name] {}
- 设置表单的样式:
input[type="text"] {}
- 属性选择器:为带有
- 伪类:
:active
:被激活的元素:focus
:有键盘输入焦点的元素:hover
:鼠标悬停:link
:未被访问的链接:visited
:已被访问的链接:first-child
:元素的第一个子元素:lang
:带有指定lang
属性的元素
- 权重:
div
(1)class/类选择器
(10)id
(100)
- 结构选择器(新增伪类(面试题))
:not
:排除:nth-child(n)
:第几个元素 从1开始设置:nth-child(2n)
:偶数元素 从0开始设置:nth-child(2n+1)
:奇数元素:nth-of-type(n)
:某个元素下同类型的第几个元素:nth-last-child
:倒数第几个元素:first-child->:nth-child(1)
::fisrt-of-type
:第一个同级兄弟元素:last-of-type
:最后一个同级兄弟元素:nth-of-type(n)
:第几个同级兄弟元素:last-child
:最后一个子元素:only-child
:仅有一个子元素:only-of-type
:只有一个同类型的子元素:empty
:空内容:checked
:被选中 主要用在input
表单元素
- 属性选择器
E[attr=val]
:E[attr|=val]
:只能等于val
或只能以val-
开头E[attr*=val]
:包含val
字符串E[attr~=val]
:属性值有多个,其中一个是val
E[attr^=val]
:以val
开头E[attr$=val]
:以val
结尾
- 目标伪类选择器
:target()
:用来匹配URL指向的目标元素(存在URL指向该匹配元素时,样式效果才会生效)
- 伪元素:
:first-line
:匹配首行文本,只能用于块级元素:first-letter
:匹配首字符:before/:after
:DOM元素前后插入额外的内容- 遇到伪元素
before/after
就要加上content=''
display: block;
:独占一行display: inline-block;
:不独占一行
- 遇到伪元素
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。