[css] 第4天 CSS选择器有哪些？哪些属性可以继承？ #11

haizhilin2013 · 2019-04-19T21:07:01Z

第4天 CSS选择器有哪些？哪些属性可以继承？

yxkhaha · 2019-04-20T14:12:21Z

选择器

通配符
id
class
标签
后代选择器
子选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器

可以继承的属性

font-size
font-weight
font-style
font-family
color

hbl045 · 2019-05-05T12:54:07Z

属性继承好像只要有inherit属性都可以继承，详情自查

tiyunchen · 2019-05-28T00:54:27Z

text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写direction：规定文本的书写方向

AricZhu · 2019-06-18T01:45:56Z

能继承的属性：

字体系列

font-size
font-weight
font-family
font-style
...

文本系列

text-align
text-indent
text-shadow
line-height
color
...

其他

visibility
cursor
...

poporeki · 2019-07-04T14:35:56Z

选择器
id选择器 #header
class选择器 .container
伪类选择器 ::after
属性选择器 [type='input']
兄弟选择器 +
后代选择器 >
通配符 *
继承
这个还真没记过
font-size
font-family
text-align
color

Lianfeiru · 2019-07-30T05:56:04Z

https://blog.csdn.net/sjinsa/article/details/70768483这个比较全面

wsb260 · 2019-07-31T01:19:42Z

选择器:

通配符,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

weizhanzhan · 2019-09-09T08:22:20Z

选择器

id
class
通配符 *
后代 >
兄弟 +
相同的父元素中位于某元素之后的某些元素 ~
伪类 ::hover ....
伪元素 ::before ...
属性 [type='input']

继承

font-size
font-family
color
text-align
cursor

censek · 2019-09-27T02:55:23Z

选择器	例子	例子描述	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

css有哪些属性可以继承？

rennzhang · 2020-03-11T09:44:51Z

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

blueRoach · 2020-05-18T08:09:14Z

CSS选择器：
通配符
元素选择器
class选择器
id选择器
属性选择器
伪类

可继承属性：
font-
text-
visibility

giggleCYT · 2020-05-29T07:15:35Z

选择器
通配符、id、class、元素选择器、子代选择器、兄弟选择器、属性选择器、伪类、伪元素
可继承属性
color、font-（size、style、family...）、text-(transform、align...)、list-style-（type、position...）

huoyuhao · 2021-01-28T11:43:46Z

选择器	示例
通配符	*
标签选择器	span
class选择器	.container
id选择器	#app
属性选择器	[type='input']
后代选择器	空格
子选择器	>
一般兄弟组合器	~ (同一个父节点，后一个节点在前一个节点后面的任意位置)
紧邻兄弟选择器	+（同一个父节点，一个元素紧跟在前一个之后）
伪元素选择器	:hover
伪类选择器	::after

GodEnd · 2021-03-11T05:04:03Z

id 标签子代后代通配符伪类兄弟属性 class选择器

mono2048 · 2021-05-21T00:44:54Z

选择器:

通配符,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

amikly · 2021-10-22T10:10:45Z

基本选择器

通用选择器（Universal selector）

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
语法：* ns|* *|*
例子：* 将匹配文档的所有元素。

元素选择器（Type selector）

按照给定的节点名称，选择所有匹配的元素。
语法：elementname
例子：input 匹配任何 `` 元素。

类选择器（Class selector）

按照给定的 class 属性的值，选择所有匹配的元素。
语法：.classname
例子：.index 匹配任何 class 属性中含有 "index" 类的元素。

ID 选择器（ID selector）

按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
语法：#idname
例子：#toc 匹配 ID 为 "toc" 的元素。

属性选择器（Attribute selector）

按照给定的属性，选择所有匹配的元素。
语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。

分组选择器

选择器列表（Selector list）

, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
示例：div, span 会同时匹配 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/span) 元素和 [ 元素。

伪选择器

伪类

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子：a:visited 匹配所有曾被访问过的 `` 元素。

伪元素

:: 伪选择器用于表示无法用 HTML 语义表达的实体。
例子：p::first-line 匹配所有 `` 元素的第一行。

组合器

后代组合器（Descendant combinator）

（空格）组合器选择前一个元素的后代节点。
语法：A B
例子：div span 匹配所有位于任意 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div) 元素之内的 [ 元素。

直接子代组合器（Child combinator）

> 组合器选择前一个元素的直接子代的节点。
语法：A > B
例子：ul > li 匹配直接嵌套在 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) 元素内的所有 [ 元素。

一般兄弟组合器（General sibling combinator）

~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
语法：A ~ B
例子：p ~ span 匹配同一父元素下，](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) 元素后的所有 [ 元素。

紧邻兄弟组合器（Adjacent sibling combinator）

+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
语法：A + B
例子：h2 + p 会匹配所有紧邻在 (en-US) 元素后的 `` 元素。

列组合器（Column combinator）

|| 组合器选择属于某个表格行的节点。
语法： A || B
例子： col || td 会匹配所有作用域内的 `](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td) 元素。

可继承的属性

字体系列属性

font	组合字体
font-family	规定元素的字体系列
font-weight	设置字体的粗细
font-size	设置字体的尺寸
font-style	定义字体的风格
font-variant	设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch	允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust	为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

文本系列属性

text-indent	文本缩进
text-align	文本水平对齐
line-height	行高
word-spacing	增加或减少单词间的空白（即字间隔）
letter-spacing	增加或减少字符间的空白（字符间距）
text-transform	控制文本大小写
direction	规定文本的书写方向
color	文本颜色

元素可见性
visibility 规定元素是否可见
表格布局属性

caption-side	规定表格标题的放置方式
border-collapse	为表格设置合并边框模型
border-spacing	设置相邻单元格的边框间的距离（仅用于“边框分离”模式）
empty-cells	设置是否显示表格中的空单元格（仅用于“分离边框”模式）
table-layout	显示表格单元格、行、列的算法规则

列表属性

list-style-type

list-style-type	设置列表项标记的类型
list-style-image	使用图像来替换列表项的标记
list-style-position	设置在何处放置列表项标记
list-style	在一个声明中设置所有的列表属性

list-style-image

list-style-type	设置列表项标记的类型
list-style-image	使用图像来替换列表项的标记
list-style-position	设置在何处放置列表项标记
list-style	在一个声明中设置所有的列表属性

list-style-position

list-style-type	设置列表项标记的类型
list-style-image	使用图像来替换列表项的标记
list-style-position	设置在何处放置列表项标记
list-style	在一个声明中设置所有的列表属性

list-style

list-style-type	设置列表项标记的类型
list-style-image	使用图像来替换列表项的标记
list-style-position	设置在何处放置列表项标记
list-style	在一个声明中设置所有的列表属性

生成内容属性

quotes	设置嵌套引用（embedded quotation）的引号类型

光标属性

cursor	规定要显示的光标的类型（形状）

页面样式属性

page	检索或指定显示对象容器时使用的页面类型
page-break-inside	设置元素内部的 page-breaking 行为
orphans	设置或返回一个元素必须在页面底部的可见行的最小数量（用于打印或打印预览）

声音样式属性

speak	规定内容是否将以声音形式呈现
speak-punctuation	规定如何念出标点符号
speak-numeral	规定如何念出数字
speak-header	指定如何处理表格标题。应该在每个单元格之前朗读标题，还是仅在标题与前一个单元格不同的单元格之前念出标题。
speech-rate	规定说话的速度
volume	规定说话的音量
voice-family	规定语音的语音家族
pitch	规定说话的声音
pitch-range	规定语音的变化（单调还是动听的声音？）
stress	规定语音中的“压力”
richness	指定语音的丰富程度。（声音丰富还是稀薄？）
azimuth	设置声音的来源
elevation	设置声音的来源

July107 · 2021-11-01T11:40:59Z

id选择器
类选择器
标签选择器
后代选择器
相邻兄弟选择器
伪类元素选择器
属性选择器
群组选择器
伪元素选择器
层次选择器
伪类选择器

可以继承的属性：

文字属性：字体大小、字体粗细、字体风格、字体尺寸
文本属性：文本缩进，行高，文本水平对齐、文本书写方向、文本颜色
表格属性：定位表格标题的位置、合并表格边框样式，表格边框的消失，表格的宽度由什么决定
列表属性：文字前面的小点点样式、小点点的位置
光标属性：箭头可以变成需要的形状

继承属性需要注意的几个特殊地方：

a 标签的颜色不能被继承
h1~h6 标签的字体也大小不能被继承

tk12138 · 2021-11-05T12:12:19Z

CSS选择器：id选择器，类选择器，标签选择器，后代选择器，伪类选择器，属性选择器，通配符选择器
可继承的样式：font-size, font-family, color, ul, li, dl,dd,dt
不可继承样式：border, padding, margin, width, height

yxllovewq · 2022-03-07T08:33:24Z

总结：
选择器：id选择器、类选择器、伪类选择器、属性选择器、元素选择器、伪元素选择器、通配符选择器、后代选择器、子选择器、通用兄弟选择器、相邻兄弟选择器等。
可被继承的属性：font-、text-、line-height、color等。

kankan-web · 2022-05-12T03:55:37Z

css选择器：（优先级权重）
1.id选择器:100
2.类选择器:10
3.属性选择器:10
4.伪类选择器:10
5.伪元素选择器:1
6.标签选择器:1
7.兄弟选择器:0
8.子类选择器:0
9.子孙选择器:0
10.通配符选择器:0
哪些属性可以继承：
1.字体系列:font-size、font-family、font-wwight
2.文本系列:text-index、text-align、line-height
3.元素可见:visibility
4.光标属性:cursor

xiaoxiaozhiya · 2022-05-28T01:48:48Z

选择器：

属性选择器：

a[title] 带有属性title的a元素
a[title="标题"] 属性值是标题的a元素

兄弟选择器和后代选择器有什么区别

A B 选择A的子元素中值所有的B，包括子元素和孙级元素（子选择器）
A>B 选择A中的子元素的兄弟级元素B（兄弟选择器）

伪类选择器 :focus 选择获得焦点的input元素

www-wanglong · 2022-06-18T07:33:30Z

1. css选择器

简单选择器
id、class、名称
组合选择器（根据它们之间的特定关系来选取元素）
后代选择器（空格）、字选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（～）
伪类选择器（根据特定状态选取元素）
a:active、a:hover、first-child、...
伪元素选择器（选取元素的一部分并设置样式）
::after、::before...
属性选择器（选取带有特定属性或属性值的HTML元素）

2. 可以继承的属性

font-size
font-weight
font-style
font-family
color

WangXi01 · 2022-07-12T09:20:27Z

id,class,子代，后代，类，伪类，兄弟，属性
有inherit属性都可以继承

Iambecauseyouare · 2023-02-11T02:22:35Z

id选择器
class选择器
标签选择器
后代选择器
子选择器
相邻同胞选择器
群组选择器
伪类选择器(css3)
伪元素选择器
属性选择器(css3)
层次选择器(css3)
可继承属性：
字体：
font
font-family
font-weight
font-size
font-style
font-variant
文本：
text-indent
text-align
line-height
word-spacing
letter-spacing
text-transform
direction
color
元素可见性：
visibility
表格布局：
caption-side
border-collapse
border-spacing
empty-cells
table-layout
列表
list-style-tyep
list-type-position
list-style
引用
quotes
光标
cursor

lili-0923 · 2024-02-02T03:07:25Z

元素选择器：通过元素的名称来选择元素。
类选择器：通过元素的 class 属性来选择元素。
ID选择器：通过元素的 id 属性来选择元素。
属性选择器：通过元素的属性来选择元素。
伪类选择器：通过元素的状态或位置来选择元素。
伪元素选择器：用于在元素的某个位置插入额外的内容。
后代选择器：用于选择某个元素的后代元素。
相邻兄弟选择器：用于选择某个元素的下一个相邻元素。
通用选择器：选择所有元素，使用 * 符号。
可继承的属性
– font-family
– font-size
– font-weight
– line-height
– color
– text-align
– visibility
– cursor

pengsir120 · 2024-09-04T07:49:55Z

标签选择器
类选择器
伪类选择器
id选择器
属性选择器

可继承属性：
字体大小
字体粗细
字体颜色

xiaotangaichihuluobo · 2024-09-19T16:20:22Z

Hello

This is a paragraph.

This is a nested paragraph.

Item 1
Item 2

Link

p { color: blue; }
.my-class { font-size: 20px; }
#my-id { background-color: yellow; }
div p { color: green; }
ul > li { list-style-type: square; }
a:hover { text-decoration: underline; }
input[type="text"] { border: 1px solid black; }

xiaotangaichihuluobo · 2024-09-19T16:25:20Z

<h1 id="my-id">Hello</h1>
<p class="my-class">This is a paragraph.</p>
<div>
    <p>This is a nested paragraph.</p>
</div>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<a href="#">Link</a>
<input type="text" placeholder="Type here">      
    p { color: blue; }    标签选择器
    .my-class { font-size: 20px; }  类名选择器
    #my-id { background-color: yellow; }  ID选择器
    div p { color: green; }   后代选择器
    ul > li { list-style-type: square; }   子选择器：选择所有 <ul> 的直接子 <li> 元素
    a:hover { text-decoration: underline; }    伪类选择器 
    input[type="text"] { border: 1px solid black; } 属性选择器
   h1 + p 相邻兄弟选择器
    h1~p  通用兄弟选择器

haizhilin2013 added the css css label Apr 19, 2019

zivenday mentioned this issue Aug 8, 2019

CSS选择器有哪些？哪些属性可以继承？ zivenday/learning#11

Open

haizhilin2013 mentioned this issue Mar 30, 2021

[css] 第715天 css的高级选择器有哪些？ #3756

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第4天 CSS选择器有哪些？哪些属性可以继承？ #11

[css] 第4天 CSS选择器有哪些？哪些属性可以继承？ #11

haizhilin2013 commented Apr 19, 2019

yxkhaha commented Apr 20, 2019

hbl045 commented May 5, 2019

tiyunchen commented May 28, 2019

AricZhu commented Jun 18, 2019

poporeki commented Jul 4, 2019

Lianfeiru commented Jul 30, 2019

wsb260 commented Jul 31, 2019

weizhanzhan commented Sep 9, 2019

censek commented Sep 27, 2019

rennzhang commented Mar 11, 2020

blueRoach commented May 18, 2020

giggleCYT commented May 29, 2020

huoyuhao commented Jan 28, 2021

GodEnd commented Mar 11, 2021

mono2048 commented May 21, 2021

amikly commented Oct 22, 2021

July107 commented Nov 1, 2021

tk12138 commented Nov 5, 2021

yxllovewq commented Mar 7, 2022

kankan-web commented May 12, 2022

xiaoxiaozhiya commented May 28, 2022

www-wanglong commented Jun 18, 2022

WangXi01 commented Jul 12, 2022

Iambecauseyouare commented Feb 11, 2023

lili-0923 commented Feb 2, 2024

pengsir120 commented Sep 4, 2024

xiaotangaichihuluobo commented Sep 19, 2024

xiaotangaichihuluobo commented Sep 19, 2024

[css] 第4天 CSS选择器有哪些？哪些属性可以继承？ #11

[css] 第4天 CSS选择器有哪些？哪些属性可以继承？ #11

Comments

haizhilin2013 commented Apr 19, 2019

yxkhaha commented Apr 20, 2019

选择器

可以继承的属性

hbl045 commented May 5, 2019

tiyunchen commented May 28, 2019

AricZhu commented Jun 18, 2019

字体系列

文本系列

其他

poporeki commented Jul 4, 2019

Lianfeiru commented Jul 30, 2019

wsb260 commented Jul 31, 2019

选择器:

可继承的属性:

weizhanzhan commented Sep 9, 2019

选择器

继承

censek commented Sep 27, 2019

rennzhang commented Mar 11, 2020

CSS 的选择器

那些属性可以继承

1. 所有元素都可以继承

2. 内联元素可以继承

3. 块级元素可以继承

4. 列表元素可以继承

5. 表格元素嗯昆虫继承

6. 不可继承的元素

blueRoach commented May 18, 2020

giggleCYT commented May 29, 2020

huoyuhao commented Jan 28, 2021

GodEnd commented Mar 11, 2021

mono2048 commented May 21, 2021

amikly commented Oct 22, 2021

基本选择器

分组选择器

伪选择器

组合器

可继承的属性

July107 commented Nov 1, 2021

tk12138 commented Nov 5, 2021

yxllovewq commented Mar 7, 2022

kankan-web commented May 12, 2022

xiaoxiaozhiya commented May 28, 2022

选择器：

www-wanglong commented Jun 18, 2022

1. css选择器

2. 可以继承的属性

WangXi01 commented Jul 12, 2022

Iambecauseyouare commented Feb 11, 2023

lili-0923 commented Feb 2, 2024

pengsir120 commented Sep 4, 2024

xiaotangaichihuluobo commented Sep 19, 2024

Hello

xiaotangaichihuluobo commented Sep 19, 2024