CSS Selectors选择器 #flight.Archives001

Title/CSS选择器完全指南 #flight.Archives002

序 : 这是flight.Archives 梦开始的地方, 作者我熬夜肝出来了这篇文章... 保证这是最简洁高效的 CSS Selectors 教程

Note : 暂时没有能够选择父元素、父元素的同级元素，或父元素的同级元素的子元素的选择器或者组合器

Tag/基本选择器 (Basic selectors)

选择器	语法	作用
通用选择器(Universal selector)	*	选择所有元素
元素选择器(Type selector)	elementname	选择所有元素
类选择器(Class selector)	.classname	选择所有 class 属性中含有 "classname" 的元素
ID 选择器(ID selector)	#idname	选择所有 id="idname" 的元素
属性选择器(Attribute selector)	`[attr]` `[attr=value]` `[attr~=value]` `[attr\|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`	选择拥有对应属性的元素

Tag/分组选择器 (Grouping selectors)

选择器	语法	作用
选择器列表(Selector list)	SelectorA, SelectorB	同时选择SelectorA和SelectorB选中的内容

Tag/组合器 (Combinators)

选择器	语法	作用
后代组合器(Descendant combinator)	SelectorA SelectorB(两者间空格)	选择SelectorA选中元素的所有后代节点
直接子代组合器(Child combinator)	SelectorA > SelectorB	选择SelectorA选中元素的直接子代的节点
一般兄弟组合器(General sibling combinator)	SelectorA ~ SelectorB	选择SelectorA选中元素之后的兄弟元素
紧邻兄弟组合器(Adjacent sibling combinator)	SelectorA + SelectorB	选择SelectorA选中元素紧随其后的兄弟元素
列组合器(Column combinator)(Experimental)	SelectorA \|\| SelectorB	选择SelectorA选中列元素中的元素

Tag/伪选择器(Pseudo)

选择器	语法	作用
伪类(Pseudo classes)	:status	选择状态与给定相同的元素
伪元素(Pseudo elements)	::Pseudo_elements	选择元素的指定伪元素

->> Details

基本选择器 - 属性选择器(Attribute Selectors)

语法	作用
`[attr]`	选择所有带有attr属性的元素
`[attr=value]`	选择 attr 属性值为 value 的元素
`[attr~=value]`	选择 attr 属性值包含以空格分隔的 value 的元素
`[attr\|=value]`	选择 attr 属性值以 value 或 value- 为前缀("-"为连字符，Unicode 编码为 U+002D)开头典型的应用场景是用来匹配语言简写代码(如 zh-CN，zh-TW 可以用 zh 作为 value)
`[attr^=value]`	选择 attr 属性值以 value 开头的元素
`[attr$=value]`	选择 attr 属性值以 value 结尾的元素
`[attr*=value]`	选择 attr 属性值包含 value 的元素
`[attr operator value i]`	在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I)，可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)
`[attr operator value s]`	(Experimental)在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S)，可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)

伪选择器 - 伪类选择器

Reference Link https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

语法	作用
`:active`	选择正在活动链接
`:after` (`::after`)	在元素之后插入内容, `content` 属性定义了插入的内容
`:before` (`::before`)	在元素之前插入内容, `content` 属性定义了插入的内容
`:checked`	选择所有选中的表单元素
`:disabled`	选择所有禁用的表单元素
`:empty`	选择所有没有子元素的元素
`:enabled`	选择所有启用的表单元素
`:first-of-type`	选择其父级元素的第一个特定类型子元素
`:first-letter` (`::first-letter`)	选择元素的第一个字母
`:first-line` (`::first-line`)	选择元素的第一行
`:first-child`	选择其父元素的第一个子元素
`:focus`	选择元素输入后具有焦点
`:hover`	把鼠标放在链接上的状态
`:in-range`	选择元素指定范围内的值
`:invalid`	选择所有无效的元素
`:lang( <language-code> )`	为选择指定语言的元素
`:last-child`	选择其父元素的最后一个子元素
`:last-of-type`	选择元素其父级元素是特定类型的最后一个子元素
`:link`	选择所有未访问链接
`:not(selector)`	选择所有选定元素以外的元素
`:nth-child(an+b)`	选择元素所有兄弟元素的第 `an+b` 个元素, `a` , `b` 为常数
`:nth-last-child(an+b)`	选择元素所有兄弟元素倒数的第 `an+b` 个子元素
`:nth-last-of-type(an+b)`	选择其父级元素的倒数第 `an+b` 个特定类型子元素
`:nth-of-type(an+b)`	选择其父级元素的第一个特定类型子元素
`:only-of-type`	选择其父元素仅有的一个特定类型元素
`:only-child`	选择其父元素仅有的一个子元素
`:optional`	选择没有"required"的元素属性
`:out-of-range`	选择指定范围以外的值的元素属性
`:read-only`	选择只读属性的元素属性
`:read-write`	选择没有只读属性的元素属性
`:required`	选择有"required"属性指定的元素属性
`:root`	选择文档的根元素
`:target`	选择唯一的一个 `id` 与当前URL片段匹配的元素
`:valid`	选择所有有效值的属性
`:visited`	选择所有访问过的链接

伪选择器 - 伪类选择器 - an+b的详细语法

Reference Link
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

0n+3 或简单的 3 匹配第三个元素.
1n+0 或简单的 n 匹配每个元素.（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致.1n 和 1n+0 是一致的，可根据喜好任选其一来使用.）
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序).你可以使用关键字 even 来替换此表达式.
2n+1 匹配位置为 1、3、5、7...的元素. 你可以使用关键字 odd 来替换此表达式.
3n+4 匹配位置为 4、7、10、13...的元素.
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1. 换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素.另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式.

伪选择器 - 伪元素选择器

Reference Link https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

语法	作用
::after (:after)	在元素之后插入内容, `content` 属性定义了插入的内容
::before (:before)	在元素之前插入内容, `content` 属性定义了插入的内容
::first-letter (:first-letter)	选择元素的第一个字符
::first-line (:first-line)	选择元素的第一行
::grammar-error(Experimental)	选择元素被浏览器标识为语法错误的文本段
::marker(Experimental)	选择列表元素的项目符号
::placeholder(Experimental)	选择一个元素的占位符
::selection	选择用户选中的内容
::slotted()	选定被放在 `HTML模板` 中的元素,详见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/::slotted
::spelling-error(Experimental)	选择被浏览器标记为不正确拼写的文本段

参见 - 选择器优先级

Reference Link https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

高优先级选择器定义的样式会覆盖低优先级选择器
!important 选择器 > ID 选择器 > 类选择器 ,属性选择器 和 伪类 > 元素选择器 和 伪元素

->> Reference link

MDN中文文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSSSelectors

MDN 英文文档 https://developer.mozilla.org/en-US/docs/Web/CSS/CSSSelectors

菜鸟教程 https://www.runoob.com/cssref/css-selectors.html

CodingStartUp https://www.bilibili.com/video/BV1et411K7RU

->> Version History

现在版本为V1.1.
详见 Github(@flightmakers)

2021.8.10 : 发布V1.0

2021.8.13 : 更新了Details,修改了一些表述

posted @ 2021-08-10 13:12 designer&creator 阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

Coding Changes the World.
- cnblogs

Stay Focused, Keep Shipping. Build Early, Build Always. Improve yourself, Write solid/simple/stupid code.
- Ruanyf

"人生短暂, 过着过着你就没了, 明白么?"
- Steve Jobs

是设计啊
- ooooomygosh

World is powered by solitude
- V2EX

创作是一件开心的事情，沉浸只是因为纯粹的灵感。我希望自己的生命能够时常充满灵感，而文字就是这些愉快时光曾经存在过的证明。
- Livid

Beautifully Advance
- Livid

不要幻想一切会自然发生，也不要幻想其他人会做。哪怕你是最微不足道的一个小人物或者外行，只要动手做了，世界就会不同。
- Road

在回去的路上, 我不由得陷入了对人生和社会的大思考
我很喜欢的一个vloger 说过
如果你想拍vlog 最简单也是最难的一步
就是想到了 就去做

我们经常会经历这样的事情
某一个瞬间 忽然想要尝试新的事物 或者改变自己
但是最终 都在恐惧和纠结中停滞不前

因为人们往往不知道改变会得到什么
但却明白改变会失去什么

但这其实并不重要
迈出那一步 你会收获什么呢
也许是一张电影票 也许是结识了一位新朋友
但是最重要的是
你成为了更好的自己

我是一位正在改变的新人UP主
我们下期再见.
- 6fcc

via Smartisan Notes

1、只管去做。（Just do it）

2、99%的决策，都可以更改。（99% of decisions aren't permanent）

3、招人要慎重，解雇要快速。（Be slow to hire and quick to fire）

4、工作成效必须有评估。（Measure what you manage）

5、客户比竞争对手更重要。（Competition isn't as important as the customer）

6、95%的创业公司不应该融资。（95% of startups shouldn't raise money）

7、加入创业者团体。（Join a startup peer group）

8、快速增长带来的最大挑战，就是如何让每个员工找到合适自己的位置。（The biggest challenge with growth is keeping everyone aligned）

9、价格战走不远，客户服务才是根本。（Price differentiation doesn't last long but customer service does）

10、成功的最重要因素，就是选对了时机。（Market timing is the most important factor for homeruns）

11、让客户成为你的销售员。（Empower customers to help sell new customers）

12、为你的团队创造最好的工作环境。（Create the best environment you can for your team）

13、与其乱猜答案，不如提出正确的问题。（Asking good questions is more important than guessing the answer）

14、建立各种人际关系，日后会帮到你。（Build relationships before you need them）

15、开始谈判前，就做好不成功的准备。（Always consider the best alternative outcome before beginning a negotiation）

16、在经营外部业务和管理内部运作之间，正确分配时间。（Consciously balance time working in the business vs working on the business）

17、你只有一次机会，得到他人对你的第一印象。（You only get one first impression）

18、你一开始做的事情，可能不是最终让你成功的事情。（What you start out doing isn't likely where you'll find success）

19、搞对公司文化，一切就会井然有序。（Get the corporate culture right and everything will fall into place）

20、不要去想将来如何退出，这就是最佳退出战略。（The best exit strategy is to not need one）

21、网站最大的敌人，就是浏览器的“后退”按钮。（The biggest enemy of websites is the browser Back button）

22、经常性收入是收入的最好形式。（Recurring revenue is the best form of revenue）

23、不要过河拆桥，世界很小，你会有报应的。（Don't burn any bridges as it is a small world）

24、建立一个针对性很强的品牌，然后围绕它把各方面都做好。（Build a niche brand and curate all aspects of it）

25、创业公司的循环往复，是健康的迹象。（Pivoting and iterating is healthy in a startup）

26、永远要求供货商提供折扣价。（Always ask for a discount）

27、不要以为，天底下只有你想到了这个主意。（Your idea isn't unique）

28、与他人分享创意，会让你得到意料之外的好处。（Sharing your idea with others will lead to benefits you can't predict）

29、越简单越好。（Keep it as simple as possible）

30、人们认同公司，甚于认同产品。（People identify with companies more so than products）

31、花钱请专业人员（律师、会计师等）一次把事情做对，是值得的。（It's worth paying a professional (lawyer, accountant, etc) to do it right the first time）

32、制定一个目标，然后习惯于你得到的决策信息永远在变。（Set goals and adapt to changing information）

33、讲故事是最有力的推销手段。（Storytelling is more powerful than marketing）

34、大多数创业公司，最初为自己的产品定价时，都定得太低。（Most startups initially price their product/service too low）

35、一定要有思考的时间。（Make time to think）

36、关注公司的节奏、统计数据和优先任务。（Focus on rhythm, data, and priorities）

37、不要把你的业务说成全新模式，而要用传统行业的例子描述。（Develop offline analogies to describe your startup）

38、开公司不仅仅是为了钱。（Companies aren't just about profits）

39、即使小小的胜利，也值得庆祝。（Celebrate the small victories）

40、你要扬长避短。（Play to your strengths）

41、不要被用户的意见左右。（Be opinionated about your product when considering customer suggestions）

42、知道自己的特点何在，然后清晰地表达出来。（Know why you're different and clearly articulate it）

43、不要闭门造车。（Don't develop products in a vacuum）

44、与雇员、客户、投资者和社区，保持经常性的沟通。（Regularly communicate with employees, customers, investors, and the community）

45、所有对你至关重要的人，你都要保持良好关系。（Remove friction for all stakeholders）

46、找不到决策依据，人们会自行编造。（Absent information people make up reasons）

47、人的精力有限，同一时间最多只能干三件事。（It is difficult to concentrate on more than three things at any one time）

48、你雇到什么人，决定了一切。（Employees are the most important stakeholder）

49、没有完美无缺的计划。（No plan is perfect）

50、是你“玩”创业，而不是创业“玩”你。（Consume the startup but don't let it consume you）
- David Cummings

（1）你不是做一个比竞争对手“更好”的产品，而是做一个“不同”的产品。

（2）你只提供部分功能，但是很好地满足了用户的需求。

（3）如果新产品的市场反响不好，增加新功能并不能解决问题。你应该重新定位你的产品，想想它能向消费者提供哪些不同的价值。

（4）在产品设计和推广的每一个环节，都突出它的不同定位。
- Survivor

“创业是艰难的，但是一份早9晚5的工作也是艰难的，在某种意义上，甚至比创业还艰难。你自己开公司，你会因为很多事情担惊受怕，但是你不会感到虚度生命，在一家大公司里打工，常常会有这种感觉。而且，创业可能会使得你挣来多得多的钱。”

“眼下，我们觉得有一份工作是正常的生活模式，但是这是最不可靠的历史假象。现在所谓的工业化国家里，仅仅二三代人之前，大多数人都是靠务农为生。如果将来许许多多人改变谋生的方式，这也许会令人感到惊讶，但是如果没有发生这种改变，会令人感到更惊讶。”
- Paulg

如果你很确定，你现在就想做一件事，那么就不要等。对于那些确切知道自己想做什么的人来说，行动的时间永远是现在。
- Survivor

CSS Selectors选择器 #flight.Archives001

Title/CSS选择器完全指南 #flight.Archives002

Tag/基本选择器 (Basic selectors)

Tag/分组选择器 (Grouping selectors)

Tag/组合器 (Combinators)

Tag/伪选择器(Pseudo)

->> Details

基本选择器 - 属性选择器(Attribute Selectors)

伪选择器 - 伪类选择器

伪选择器 - 伪类选择器 - an+b的详细语法

伪选择器 - 伪元素选择器

参见 - 选择器优先级

->> Reference link

->> Version History

公告

最新随笔

我的标签

积分与排名

随笔分类 (2)

随笔档案 (18)

阅读排行榜

评论排行榜

推荐排行榜

最新评论