CSS选择器-餐厅练习
Level 1:A
按类型选择元素
A.png
Level 2:A
按类型选择元素
A2.png
Level 3:ID Selector
选择带有ID的元素
ID_Select.png
Level 4:A B
Descendant Selector(后代选择器)
在另一个元素中选择一个元素
选择A中的所有B，这里B是子代元素，意思是另一个元素中的元素。
后代选择器.png
Level 5:#id A
Combine the Descendant & ID Selectors(组合后代和ID选择器)
您可以将任何选择器与后代选择器组合在一起。
L5.png
Level 6:.classname
Select elements by their class(根据类选择元素)
类选择器选择具有该类属性的所有元素。元素只能有一个ID，但是有很多类。
L6.png
Level 7:A.className
You can combine the class selector with other selectors, like the type selector.(您可以将类选择器与其他选择器(如类型选择器)组合在一起)
Level 8:Put your back into it
L8.png
Level 9:A, B
结合,选择器,……逗号!
由于Shatner技术，这将选择所有A和B元素。您可以这样组合任何选择器，并且可以指定两个以上。
L9.png
Level 10:*
你可以选择一切!
您可以选择所有元素与通用选择器!
Level 11:A *
组合通用选择器
这将选择A中的所有元素。
L11.png
Level 12:A + B
相邻选择器
选择直接跟随另一个元素的元素
这将选择直接跟随a的所有B元素，它们彼此跟随的元素称为兄弟元素。它们在同一水平或深度上。
L12.png
Level 13:A ~ B
选择跟随另一个元素的元素
您可以选择跟随它的元素的所有兄弟元素。这类似于相邻的选择器(A + B)，只是它得到了所有以下元素而不是一个。
L13.png
Level 14:A > B
子选择器
选择元素的直接子元素
您可以选择其他元素的直接子元素。子元素是直接嵌套在另一个元素中的任何元素。
L14.png
Level 15::first-child
选择另一个元素中的第一个子元素
您可以选择第一个子元素。子元素是直接嵌套在另一个元素中的任何元素。您可以将这个伪选择器与其他选择器组合在一起。
L15.png
Level 16::only-child
选择另一个元素中唯一的元素
您可以选择另一个元素中唯一的元素。
L16.png
Level 17::last-child
选择另一个元素中的最后一个元素
您可以使用此选择器选择一个元素，该元素是另一个元素中的最后一个子元素
L17.png
Level 18::nth-child(A)
按另一个元素中的顺序选择一个元素
选择另一个元素中的第n个子元素(例如:1、3、12等)
L18.png
Level 19::nth-last-child(A)
根据元素在另一个元素中的顺序选择一个元素，从后面计数
从父节点的底部选择子节点。这就像第一个孩子，但从后面数!
L19.png
Level 20::first-of-type
选择特定类型的第一个元素
在另一个元素中选择该类型的第一个元素
L20.png
Level 21::nth-of-type(A)
根据另一个元素中的类型和顺序选择特定元素——或该元素的偶数或奇数实例。
L21.png
Level 22::nth-of-type(An+B)
带有公式的类型选择器
类型的第n个公式选择每个第n个元素，从该元素的特定实例开始计数
L22.png
Level 23::only-of-type
唯一类型选择器
选择类型中唯一的元素
在另一个元素中选择其类型的唯一元素
L23.png
Level 24::last-of-type
最后类型选择器
在另一个元素中选择该类型的最后一个元素。记住类型指的是标签的类型，所以p和span是不同的类型
L24.png
Level 25::empty
空的选择器
选择没有子元素的元素
选择不包含任何其他元素的元素
L25.png
Level 26:not(X)
否定伪类
选择所有与否定选择符不匹配的元素
L26.png
网友评论