Comments (25)
选择器
- 通配符
- id
- class
- 标签
- 后代选择器
- 子选择器
- 兄弟选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
可以继承的属性
- font-size
- font-weight
- font-style
- font-family
- color
from fe-interview.
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
from fe-interview.
选择器
id选择器 #header
class选择器 .container
伪类选择器 ::after
属性选择器 [type='input']
兄弟选择器 +
后代选择器 >
通配符 *
继承
这个还真没记过
font-size
font-family
text-align
color
from fe-interview.
属性继承好像只要有inherit属性都可以继承,详情自查
from fe-interview.
基本选择器
选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。
语法:*
ns|*
*|*
例子:*
将匹配文档的所有元素。
按照给定的节点名称,选择所有匹配的元素。
语法:elementname
例子:input
匹配任何 `` 元素。
按照给定的 class
属性的值,选择所有匹配的元素。
语法:.classname
例子:.index
匹配任何 class
属性中含有 "index" 类的元素。
按照 id
属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
语法:#idname
例子:#toc
匹配 ID 为 "toc" 的元素。
按照给定的属性,选择所有匹配的元素。
语法:[attr]
[attr=value]
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
例子:[autoplay]
选择所有具有 autoplay
属性的元素(不论这个属性的值是什么)。
分组选择器
,
是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
语法:A, B
示例:div, span
会同时匹配 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/span) 元素和 [
元素。
伪选择器
:
伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子:a:visited
匹配所有曾被访问过的 `` 元素。
::
伪选择器用于表示无法用 HTML 语义表达的实体。
例子:p::first-line
匹配所有 `` 元素的第一行。
组合器
(空格)组合器选择前一个元素的后代节点。
语法:A B
例子:div span
匹配所有位于任意 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div) 元素之内的 [
元素。
>
组合器选择前一个元素的直接子代的节点。
语法: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) 元素后的 `` 元素。
||
组合器选择属于某个表格行的节点。
语法: 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-image | 使用图像来替换列表项的标记 |
list-style-position | 设置在何处放置列表项标记 |
list-style | 在一个声明中设置所有的列表属性 |
list-style-type | 设置列表项标记的类型 |
---|---|
list-style-image | 使用图像来替换列表项的标记 |
list-style-position | 设置在何处放置列表项标记 |
list-style | 在一个声明中设置所有的列表属性 |
list-style-type | 设置列表项标记的类型 |
---|---|
list-style-image | 使用图像来替换列表项的标记 |
list-style-position | 设置在何处放置列表项标记 |
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 | 设置声音的来源 |
from fe-interview.
能继承的属性:
字体系列
font-size
font-weight
font-family
font-style
...
文本系列
text-align
text-indent
text-shadow
line-height
color
...
其他
visibility
cursor
...
from fe-interview.
CSS选择器:id选择器,类选择器,标签选择器,后代选择器,伪类选择器,属性选择器,通配符选择器
可继承的样式:font-size, font-family, color, ul, li, dl,dd,dt
不可继承样式:border, padding, margin, width, height
from fe-interview.
text-indent:文本缩进
text-align:文本水平对齐
text-shadow:设置文本阴影
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写direction:规定文本的书写方向
from fe-interview.
https://blog.csdn.net/sjinsa/article/details/70768483这个比较全面
from fe-interview.
选择器:
通配符,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
from fe-interview.
选择器
- id
- class
- 通配符 *
- 后代 >
- 兄弟 +
- 相同的父元素中位于某元素之后的某些元素 ~
- 伪类 ::hover ....
- 伪元素 ::before ...
- 属性 [type='input']
继承
- font-size
- font-family
- color
- text-align
- cursor
from fe-interview.
选择器 | 例子 | 例子描述 | 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 |
from fe-interview.
CSS选择器:
通配符
元素选择器
class选择器
id选择器
属性选择器
伪类
可继承属性:
font-
text-
visibility
from fe-interview.
选择器
通配符、id、class、元素选择器、子代选择器、兄弟选择器、属性选择器、伪类、伪元素
可继承属性
color、font-(size、style、family...)、text-(transform、align...)、list-style-(type、position...)
from fe-interview.
选择器 | 示例 |
---|---|
通配符 | * |
标签选择器 | span |
class选择器 | .container |
id选择器 | #app |
属性选择器 | [type='input'] |
后代选择器 | 空格 |
子选择器 | > |
一般兄弟组合器 | ~ (同一个父节点,后一个节点在前一个节点后面的任意位置) |
紧邻兄弟选择器 | +(同一个父节点,一个元素紧跟在前一个之后) |
伪元素选择器 | :hover |
伪类选择器 | ::after |
from fe-interview.
id 标签 子代 后代 通配符 伪类 兄弟 属性 class选择器
from fe-interview.
选择器:
通配符,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
from fe-interview.
- id选择器
- 类选择器
- 标签选择器
- 后代选择器
- 相邻兄弟选择器
- 伪类元素选择器
- 属性选择器
- 群组选择器
- 伪元素选择器
- 层次选择器
- 伪类选择器
可以继承的属性:
- 文字属性:字体大小、字体粗细、字体风格、字体尺寸
- 文本属性:文本缩进,行高,文本水平对齐、文本书写方向、文本颜色
- 表格属性:定位表格标题的位置、合并表格边框样式,表格边框的消失,表格的宽度由什么决定
- 列表属性:文字前面的小点点样式、小点点的位置
- 光标属性:箭头可以变成需要的形状
继承属性需要注意的几个特殊地方:
a
标签的颜色不能被继承h1~h6
标签的字体也大小不能被继承
from fe-interview.
总结:
选择器:id选择器、类选择器、伪类选择器、属性选择器、元素选择器、伪元素选择器、通配符选择器、后代选择器、子选择器、通用兄弟选择器、相邻兄弟选择器等。
可被继承的属性:font-、text-、line-height、color等。
from fe-interview.
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
from fe-interview.
选择器:
属性选择器:
- a[title] 带有属性title的a元素
- a[title="标题"] 属性值是标题的a元素
兄弟选择器和后代选择器有什么区别
- A B 选择A的子元素中值所有的B,包括子元素和孙级元素(子选择器)
- A>B 选择A中的子元素的兄弟级元素B(兄弟选择器)
伪类选择器 :focus 选择获得焦点的input元素
from fe-interview.
1. css选择器
- 简单选择器
id、class、名称 - 组合选择器(根据它们之间的特定关系来选取元素)
后代选择器(空格)、字选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~) - 伪类选择器(根据特定状态选取元素)
a:active、a:hover、first-child、... - 伪元素选择器(选取元素的一部分并设置样式)
::after、::before... - 属性选择器( 选取带有特定属性或属性值的HTML元素)
2. 可以继承的属性
- font-size
- font-weight
- font-style
- font-family
- color
from fe-interview.
id,class,子代,后代,类,伪类,兄弟,属性
有inherit属性都可以继承
from fe-interview.
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
from fe-interview.
元素选择器:通过元素的名称来选择元素。
类选择器:通过元素的 class 属性来选择元素。
ID选择器:通过元素的 id 属性来选择元素。
属性选择器:通过元素的属性来选择元素。
伪类选择器:通过元素的状态或位置来选择元素。
伪元素选择器:用于在元素的某个位置插入额外的内容。
后代选择器:用于选择某个元素的后代元素。
相邻兄弟选择器:用于选择某个元素的下一个相邻元素。
通用选择器:选择所有元素,使用 * 符号。
可继承的属性
– font-family
– font-size
– font-weight
– line-height
– color
– text-align
– visibility
– cursor
from fe-interview.
Related Issues (20)
- [angular] 第1803天 请说说在Angular中什么是服务和依赖注入(DI)?
- [angular] 第1804天 请说说路由和导航在Angular中如何工作的?
- [angular] 第1805天 请说说在Angular中如何实现表单验证?
- [angular] 第1806天 请说说观察者模式和RxJS在Angular中的应用
- [angular] 第1807天 请说说在Angular中的双向数据绑定是如何工作的?
- [angular] 第1808天 请说说在Angular中如何实现国际化(i18n)?
- [angular] 第1809天 如何在Angular中实现懒加载?
- [angular] 第1810天 如何在Angular中实现导航的控制和保护?
- [angular] 第1811天 请说说在Angular中什么是RxJS?
- [angular] 第1812天 请说说在Angular中的ngFor是什么?有哪些用途? HOT 1
- [angular] 第1813天 请说说在Angular中的路由器是什么?
- [angular] 第1814天 请说说在Angular中的ngSwitch是什么?有哪些用途?
- [angular] 第1815天 请说说在Angular中的组件是什么?
- [angular] 第1816天 请说说在Angular中什么是指令?有哪些类型的指令?
- [angular] 第1817天 请说说在Angular中的依赖注入是什么?
- [angular] 第1818天 请说说在Angular中的NgModule是什么?
- [angular] 第1819天 请说说在Angular中的可观察对象是什么?
- [angular] 第1820天 请说说在Angular中的路由器守卫是什么?它有哪些类型?
- [angular] 第1821天 请说说在Angular中的服务是什么?如何创建一个服务?
- [angular] 第1822天 请说说在Angular中的模板语法是什么?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.