Fe-interview: [css] 第4天 CSS选择器有哪些？哪些属性可以继承？
第4天 CSS选择器有哪些？哪些属性可以继承？
haizhilin2013
All 12 comments
选择器
- 通配符
- id
- class
- 标签
- 后代选择器
- 子选择器
- 兄弟选择器
- 属性选择器
- 伪类选择器
伪元素选择器
可以继承的属性
font-size
- font-weight
- font-style
- font-family
- color
yxkhaha
on 20 Apr 2019
属性继承好像只要有inherit属性都可以继承，详情自查
hbl045
on 5 May 2019
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写direction：规定文本的书写方向
tiyunchen
on 28 May 2019
能继承的属性：
字体系列
font-size
font-weight
font-family
font-style
...
文本系列
text-align
text-indent
text-shadow
line-height
color
...
其他
visibility
cursor
...
AricZhu
on 18 Jun 2019
选择器
id选择器 #header
class选择器 .container
伪类选择器::after
属性选择器 [type='input']
兄弟选择器 +
后代选择器 >
通配符 *
继承
这个还真没记过
font-size
font-family
text-align
color
poporeki
on 4 Jul 2019
Lianfeiru
on 30 Jul 2019
选择器:
通配符,id,class,标签,后代选择器,子选择器,兄弟选择器,属性选择器,伪类选择器,伪元素选择器
可继承的属性:
字体属性:font-size,font-weight,font-style,font-family
文本属性:text-indent,text-align,line-height,word-spacing,letter-spacing,color,direction,text-transform
元素可见性:visibility,opacity
光标属性:cursor
wsb260
on 31 Jul 2019
选择器
- id
- class
- 通配符 *
- 后代 >
- 兄弟 +
- 相同的父元素中位于某元素之后的某些元素 ~
- 伪类 ::hover ....
- 伪元素 ::before ...
属性 [type='input']
继承
font-size
- font-family
- color
- text-align
- cursor
weizhanzhan
on 9 Sep 2019
选择器 | 例子 | 例子描述 | CSS
-- | -- | -- | --
.class | .intro | 选择 class="intro" 的所有元素。 | 1
id | #firstname | 选择 id="firstname" 的所有元素。 | 1
* | * | 选择所有元素。 | 2
element | p | 选择所有
元素。 | 1
element,element | div,p | 选择所有
元素。 | 1
element element | div p | 选择
元素。 | 1
element>element | div>p | 选择父元素为
元素。 | 2
element+element | div+p | 选择紧接在
元素。 | 2
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2
[attribute\|=value] | [lang\|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2
:link | a:link | 选择所有未被访问的链接。 | 1
:visited | a:visited | 选择所有已被访问的链接。 | 1
:active | a:active | 选择活动链接。 | 1
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1
:focus | input:focus | 选择获得焦点的 input 元素。 | 2
:first-letter | p:first-letter | 选择每个
元素的首字母。 | 1
:first-line | p:first-line | 选择每个
元素的首行。 | 1
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个
元素。 | 2
:before | p:before | 在每个
元素的内容之前插入内容。 | 2
:after | p:after | 在每个
元素的内容之后插入内容。 | 2
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个
元素。 | 2
element1~element2 | p~ul | 选择前面有
元素的每个
- 元素。 | 3
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 元素。 | 3
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素。 | 3
[attribute=value] | a[src="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素。 | 3
:first-of-type | p:first-of-type | 选择属于其父元素的首个
元素的每个
元素。 | 3
:last-of-type | p:last-of-type | 选择属于其父元素的最后
元素的每个
元素。 | 3
:only-of-type | p:only-of-type | 选择属于其父元素唯一的
元素的每个
元素。 | 3
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个
元素。 | 3
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个
元素。 | 3
:nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个
元素的每个
元素。 | 3
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个
元素。 | 3
:root | :root | 选择文档的根元素。 | 3
:empty | p:empty | 选择没有子元素的每个
元素（包括文本节点）。 | 3
:target | #news:target | 选择当前活动的 #news 元素。 | 3
:enabled | input:enabled | 选择每个启用的 元素。 | 3
:disabled | input:disabled | 选择每个禁用的 元素 | 3
:checked | input:checked | 选择每个被选中的 元素。 | 3
:not(selector) | :not(p) | 选择非
元素的每个元素。 | 3
::selection | ::selection | 选择被用户选取的元素部分。 | 3
censek
on 27 Sep 2019
CSS 的选择器
这里不做统计了，可以参考速查文档
那些属性可以继承
1. 所有元素都可以继承
visibility和cursor
2. 内联元素可以继承
letter-spacing：字符之间的间隙word-spacing：单词之间的间隙white-space：换行方式line-height：行高color：颜色font：字体设置font-family：字体名称font-size：字体大小font-style：字体样式font-variant：是否为小型的大写字母font-weight：文本字体的粗细text- decoration：复合属性。文本的装饰。text-transform：文本的大小写direction：文本流的方向
3. 块级元素可以继承
text-indent：文本缩进text-align：文本对齐方式
4. 列表元素可以继承
list-style：复合属性。设置列表项目相关内容list-style-type：列表项所使用的预设标记list-style-position：列表项标记如何根据文本排列list-style-image：列表项标记的图像
5. 表格元素嗯昆虫继承
border-collapse：表格的行和单元格的边是合并还是独立
6. 不可继承的元素
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bid
Renato-Z
on 11 Mar 2020
CSS选择器：
通配符
元素选择器
class选择器
id选择器
属性选择器
伪类
可继承属性：
font-
text-
visibility
blueRoach
on 18 May 2020
选择器
通配符、id、class、元素选择器、子代选择器、兄弟选择器、属性选择器、伪类、伪元素
可继承属性
color、font-（size、style、family...）、text-(transform、align...)、list-style-（type、position...）
giggleCYT
on 29 May 2020
Related issues
haizhilin2013
·
57Comments
haizhilin2013
·
23Comments
haizhilin2013
·
22Comments
haizhilin2013
·
93Comments
haizhilin2013
·
34Comments
Most helpful comment
选择器
id选择器
#headerclass选择器
.container伪类选择器
::after属性选择器
[type='input']兄弟选择器
+后代选择器
>通配符
*继承
这个还真没记过
font-size
font-family
text-align
color