fe-interview
fe-interview copied to clipboard
haizlin
[css] 第4天 CSS选择器有哪些？哪些属性可以继承？
选择器
- 通配符
- id
- class
- 标签
- 后代选择器
- 子选择器
- 兄弟选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
可以继承的属性
- font-size
- font-weight
- font-style
- font-family
- color
text-indent：文本缩进 text-align：文本水平对齐 text-shadow：设置文本阴影 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） letter-spacing：增加或减少字符间的空白（字符间距） text-transform：控制文本大小写direction：规定文本的书写方向
能继承的属性：
字体系列
font-size font-weight font-family font-style ...
文本系列
text-align text-indent text-shadow line-height color ...
其他
visibility cursor ...
选择器
id选择器 #header
class选择器 .container
伪类选择器 ::after
属性选择器 [type='input']
兄弟选择器 +
后代选择器 >
通配符 *
继承
这个还真没记过
font-size
font-family
text-align
color
选择器:
通配符,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
选择器
- id
- class
- 通配符 *
- 后代 >
- 兄弟 +
- 相同的父元素中位于某元素之后的某些元素 ~
- 伪类 ::hover ....
- 伪元素 ::before ...
- 属性 [type='input']
继承
- font-size
- font-family
- color
- text-align
- cursor
| 选择器 | 例子 | 例子描述 | 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 的选择器
这里不做统计了，可以参考速查文档
那些属性可以继承
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
选择器 通配符、id、class、元素选择器、子代选择器、兄弟选择器、属性选择器、伪类、伪元素 可继承属性 color、font-（size、style、family...）、text-(transform、align...)、list-style-（type、position...）
| 选择器 | 示例 |
|---|---|
| 通配符 | * |
| 标签选择器 | span |
| class选择器 | .container |
| id选择器 | #app |
| 属性选择器 | [type='input'] |
| 后代选择器 | 空格 |
| 子选择器 | > |
| 一般兄弟组合器 | ~ (同一个父节点，后一个节点在前一个节点后面的任意位置) |
| 紧邻兄弟选择器 | +（同一个父节点，一个元素紧跟在前一个之后） |
| 伪元素选择器 | :hover |
| 伪类选择器 | ::after |
选择器:
通配符,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
基本选择器
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
语法：* 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 | 设置声音的来源 |
- id选择器
- 类选择器
- 标签选择器
- 后代选择器
- 相邻兄弟选择器
- 伪类元素选择器
- 属性选择器
- 群组选择器
- 伪元素选择器
- 层次选择器
- 伪类选择器
可以继承的属性：
- 文字属性：字体大小、字体粗细、字体风格、字体尺寸
- 文本属性：文本缩进，行高，文本水平对齐、文本书写方向、文本颜色
- 表格属性：定位表格标题的位置、合并表格边框样式，表格边框的消失，表格的宽度由什么决定
- 列表属性：文字前面的小点点样式、小点点的位置
- 光标属性：箭头可以变成需要的形状
继承属性需要注意的几个特殊地方：
a标签的颜色不能被继承h1~h6标签的字体也大小不能被继承
CSS选择器：id选择器，类选择器，标签选择器，后代选择器，伪类选择器，属性选择器，通配符选择器 可继承的样式：font-size, font-family, color, ul, li, dl,dd,dt 不可继承样式：border, padding, margin, width, height
总结： 选择器：id选择器、类选择器、伪类选择器、属性选择器、元素选择器、伪元素选择器、通配符选择器、后代选择器、子选择器、通用兄弟选择器、相邻兄弟选择器等。 可被继承的属性：font-、text-、line-height、color等。
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
选择器：
属性选择器：
- a[title] 带有属性title的a元素
- a[title="标题"] 属性值是标题的a元素
兄弟选择器和后代选择器有什么区别
- A B 选择A的子元素中值所有的B，包括子元素和孙级元素（子选择器）
- A>B 选择A中的子元素的兄弟级元素B（兄弟选择器）
伪类选择器 :focus 选择获得焦点的input元素
1. css选择器
- 简单选择器 id、class、名称
- 组合选择器（根据它们之间的特定关系来选取元素） 后代选择器（空格）、字选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（～）
- 伪类选择器（根据特定状态选取元素） a:active、a:hover、first-child、...
- 伪元素选择器（选取元素的一部分并设置样式） ::after、::before...
- 属性选择器（ 选取带有特定属性或属性值的HTML元素）
2. 可以继承的属性
- font-size
- font-weight
- font-style
- font-family
- color
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
元素选择器：通过元素的名称来选择元素。 类选择器：通过元素的 class 属性来选择元素。 ID选择器：通过元素的 id 属性来选择元素。 属性选择器：通过元素的属性来选择元素。 伪类选择器：通过元素的状态或位置来选择元素。 伪元素选择器：用于在元素的某个位置插入额外的内容。 后代选择器：用于选择某个元素的后代元素。 相邻兄弟选择器：用于选择某个元素的下一个相邻元素。 通用选择器：选择所有元素，使用 * 符号。 可继承的属性 – font-family – font-size – font-weight – line-height – color – text-align – visibility – cursor
