Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Apr 19, 2019 · 25 comments
Open
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label Apr 19, 2019
@yxkhaha
Copy link

yxkhaha commented Apr 20, 2019

选择器

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

可以继承的属性

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

@hbl045
Copy link

hbl045 commented May 5, 2019

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

@tiyunchen
Copy link

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

@AricZhu
Copy link

AricZhu commented Jun 18, 2019

能继承的属性:

字体系列

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

文本系列

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

其他

visibility
cursor
...

@poporeki
Copy link

poporeki commented Jul 4, 2019

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

@Lianfeiru
Copy link

@wsb260
Copy link

wsb260 commented Jul 31, 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

@weizhanzhan
Copy link

选择器

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

继承

  • font-size
  • font-family
  • color
  • text-align
  • cursor

@censek
Copy link

censek commented Sep 27, 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

css有哪些属性可以继承?

@rennzhang
Copy link

CSS 的选择器

这里不做统计了,可以参考速查文档


那些属性可以继承

1. 所有元素都可以继承

  • visibilitycursor

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. 不可继承的元素

displaymarginborderpaddingbackgroundheightmin-heightmax- heightwidthmin-widthmax-widthoverflowpositionleftrighttopbottomz-indexfloatcleartable-layoutvertical-alignpage-break-afterpage-bread-before和unicode-bid

@blueRoach
Copy link

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

可继承属性:
font-
text-
visibility

@giggleCYT
Copy link

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

@huoyuhao
Copy link

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

@GodEnd
Copy link

GodEnd commented Mar 11, 2021

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

@mono2048
Copy link

选择器:

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

amikly commented Oct 22, 2021

基本选择器

通用选择器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
Copy link

July107 commented Nov 1, 2021

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

可以继承的属性:

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

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

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

@tk12138
Copy link

tk12138 commented Nov 5, 2021

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

@yxllovewq
Copy link

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

@kankan-web
Copy link

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
Copy link

选择器:

属性选择器:

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

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

  • A B 选择A的子元素中值所有的B,包括子元素和孙级元素(子选择器)
  • A>B 选择A中的子元素的兄弟级元素B(兄弟选择器)

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

@www-wanglong
Copy link

1. css选择器

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

2. 可以继承的属性

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

@WangXi01
Copy link

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

@Iambecauseyouare
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests