CSS 选择符、属性继承、优先级算法以及CSS3新增伪类_

江小菜

、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色 a元素除外

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation

发表于 2019-08-01 08:38:00 回复(0)

hahani

CSS 选择符：

1.id选择器(# myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a: hover, li:nth-child)

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;

2.载入样式以最后载入的定位为准;

3.!important > id > class > tag

4.important 比内联优先级高，但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。

p:last-of-type 选择属于其父元素的最后 元素的每个 元素。

p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

发表于 2015-07-27 12:16:02 回复(0)

呼啦婷婷

css选择符： id选择器：#id名 clss选择器：.class类名标签选择器：eg：p、div 通配符选择器：* 并集选择器：, eg：div,p 交集选择器: . eg: div.p 后代选择器：li a 子选择器： ul>li 属性选择器：a[attr] || a[attr="val"] || a[^attr] || a[$attr] 属性继承：以font- color- text- line- 开头的css属性可以实现属性继承不可以继承的属性有： border、padding、margin、width、height 优先级算法：标签选择器的权重&&全选择器：1 类选择器、伪类选择器的权重：10 id选择器的权重：100 行内样式选择器的样式：1000 !important ==》权重为无穷大∞ 补充：优先级就近原则，同权重情况下样式定义最近者为准 css3的新增伪类有：结构伪类选择器： p:first-child p:last-child p:nth-child(n) --------------- p:first-of-type p:last-of-type p:nth-of-type(n) 伪元素选择器： ::before ::after 补充： :enabled ==> disabled控制表单控件的禁用状态 :checked ===>单选框或复选框被选中

发表于 2021-03-29 22:02:46 回复(0)

山鬼～

选择器：ID，类，标签，子代，后代，交集，并集，伪类等可继承的：font-size，font-family，color，text-indent

编辑于 2020-12-26 11:21:08 回复(0)

牛客好运好运🙏

CSS选择符：

1.id选择器(# myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a: hover, li:nth-child)

可继承的属性：

font-size；font-family；color；text-indent

不可继承的样式：

Width；height；padding；border；margin；display

优先级算法：

1、优先级就近原则，同权重情况下以样式定义最近者为准

2、载入样式以最后载入的为准

3、！important>id>class>tag

4、！important比内联样式优先级高，但是内联样式比id优先级高。

CSS新增伪类举例：

p: first-of-type 选择属于父元素的首个元素的每个元素

p: last-of-type 选择属于父元素的最后的元素的每个元素

p: only-of-type 选择属于父元素的的唯一的元素的每个元素

p: only-child 选择属于父元素的唯一子元素的每个元素

p: nth-child(n) 选择属于父元素的第n 个子元素的每个元素

:enabled 控制表单控件的可用状态

:disabled 控制表单控件的禁用状态

:checked 单选框或者复选框被选中

发表于 2020-10-18 19:48:24 回复(0)

努力赚钱的小曾

标签选择通用选择伪类选择属性选择等

发表于 2020-08-29 15:47:37 回复(0)

东东dong

CSS选择符：ｉｄ选择器，类选择器，标签选择器，相邻选择器，子选择器，后代选择器，通配符选择器，属性选择器，伪类选择器

发表于 2020-07-24 15:32:36 回复(0)

ciao-right

css 选择器有 id 类通配符标签名属性选择期相邻选择期后代选择器可继承的属性 fontsize fontfamily color

发表于 2020-06-17 15:05:30 回复(0)

Jenny69

Id，类、标签，属性选择器，伪类选择器，子选择器，后代选择器，通配符 优先级 important > 内联> id >class >标签

编辑于 2020-05-31 22:37:31 回复(0)

milie

可继承 font size font family color不可继承 width height 等等id选择器类选择器标签选择器相邻选择器子选择器后代选择器属性选择器伪选择器

inportmant is class 标签

:checked :enable first of child last of type

编辑于 2020-05-13 11:24:45 回复(0)

蒲公英想养花

CSS选择符：

1、标签选择器 2、类选择器 3、id选择器 4、元素选择器 5、相邻选择器 6、子类选择器 7、后代选择器 8、通配符选择器 9、伪类选择器

发表于 2020-04-20 10:17:03 回复(0)

牛客525029625号

选择符：id，class，标签，通配符等，继承🈶️font size，不能继承border等，：first of type

编辑于 2020-03-14 08:11:29 回复(0)

前三甲

CSS选择符: 根据权重来比较：内联样式> id 选择器 &quot;&gt;&quot;class 选择器=属性选择器=伪类选择器 &quot;&gt;&quot;标签选择器=伪元素选择器高级选择器: 子代div &quot;&gt;&quot;p ，兄弟div +p, div~p, 分组(并集)div, p 继承的属性：文字的属性：font 系列 line-height, 文本属性:text-indent letter -spacing 优先级：计算id 选择器的个数，多的优先级高，如果相同，再计算class 选择器，属性选择器，和伪类选择器的个数，多的优先级高，如果相同，再比较下一个。如果最终个数都相同，按照就近原则伪类选择器: nth -of -type. 和nth -child 的区别是前者需要比较类型，后者比较结构 p: nth -type -of 得到相同p 元素的第一个，也就是p 元素前面可以还有h 1元素等 p: nth -child 只能是第一个，结构上的第一

编辑于 2020-03-01 19:28:46 回复(0)

明白人明白事

css选择器，id class，标签，属性，伪类选择器，

优先级 important 内联，内联，大于id大于class

可继承的有字体相关的，不可继承的有大小，内外间距等

发表于 2019-10-11 19:11:43 回复(0)

奔跑的鸡丝

1. 补充一个选择符 div ~ p 选择位于div之后的，同级的所有p结点。

它与div + p的区别是，后者只选择与div相邻的一个结点

2. div p与div>p区别：前者选择所有后代，后者只选择直接后代

3. only-of-type和only-child区别：前者表示该类型的孩子只有一个，也有可能有其他类型的孩子；后者表示只有这一个孩子，没有其他孩子

编辑于 2019-09-19 09:47:01 回复(0)

许世流年201711051007842

https://www.cnblogs.com/thinkingthigh/p/9662404.html 不可继承的：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-bidi 所有元素可继承：visibility和cursor 内联元素可继承：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 块状元素可继承：text-indent和text-align 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image 表格元素可继承：border-collapse

发表于 2019-05-13 07:19:22 回复(0)

一切随风吧

！imprtant>内联样式>id>class
权重相同按就近原则

发表于 2016-12-02 23:26:31 回复(0)

牛客7832525号

宽和行高可以继承，高不可以继承！

发表于 2016-11-13 00:17:21 回复(0)

zhufree

CSS选择器的优先级

基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
eg.
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
内联样式的优先级比上面都要高，相当于1000（参考css权威指南）；!important优先级最高，高于上面一切。* 选择器最低，低于一切。

发表于 2016-03-22 16:27:19 回复(0)

小白萌萌哒

CSS选择符有：

id选择符

类选择符

标签选择符
后代选择符

相邻选择符

子选择符

通配符选择器

属性选择器

伪类选择器

可以继承的属性：

1.border

2.padding

3.margin

4.width

5.height

不可继承的样式：

border

padding

margin

width

margin

优先级算法

！important>id>class>tag

优先级符合就近原则，同权重下，以最近的为准。

载入样式，以最后载入样式为准

！important>内联>id

CSS3新增的伪类有:

first-of-child

first-of-type

发表于 2015-08-26 20:44:22 回复(1)

CSS 选择符、属性继承、优先级算法以及CSS3新增伪类

CSS选择器的优先级

问题信息

热门推荐

相关试题