CSS选择器练习之餐厅练习

源代码链接：

https://pan.baidu.com/s/1cDehMieTufSbZRBR6sqVYQ 提取码：x0pz

下载后直接双击餐厅练习中的index.html文件，然后就一关一关做就好

答案都以代码段形式给出~

W3C关于CSS选择器的说明：CSS 伪类

关卡操作说明：

1.直接选择所有的plate元素

plate

2.直接选择所有的bento元素

bento

3.利用id选择器 选择id为fancy的plate元素

/* 
            id选择器
                作用：根据元素的id属性选中一个元素
                语法: #id值
                例如：#box{} #red{}

                
*/

#fancy

4.利用子元素选择器 选择plate父元素中的apple元素

/*法一*/
 
/* 
        子元素选择器
            作用：选中指定父元素的指定子元素
            语法：父元素 > 子元素
 */

plate > apple

/*法二*/

 /*
        后代元素选择器
            作用：选中指定元素内的指定后代元素
            语法：祖先 后代
 */

plate apple

5.利用复合选择器 选择id为fancy的plate元素中的pickle元素

#fancy > pickle

6.利用类选择器 选择class属性为small的apple元素

/* 
类选择器
        作用：根据元素的class属性值选中一组元素
        语法：.class属性值 
*/

.small

7.利用复合选择器 选择class为small的orange元素

orange.small

8.利用复合选择器 选择bento父元素中的class为small的orange子元素

bento > orange.small

9.利用并集选择器 选择所有的bento和plate元素

/* 
            选择器分组（也可以叫并集选择器）
                作用：同时选择多个选择器对应的元素
                语法：选择器1，选择器2，选择器3{}
*/

bento,plate

10.选择所有的元素

/* 通配选择器
        作用：选中页面中的所有元素
        语法：*

*/

*

11.选择plate父元素中的所有子元素

plate *

12.选择所有位于plate元素旁边的apple元素

代码中实际上就是要选择这两个元素：

 可以看到，这两个元素是 plate的下一个元素 利用关系选择器

/* 
            选择下一个兄弟(只会找到紧挨着的那一个 only one ) 
                语法：前一个+下一个
      
*/

plate + apple

13.利用关系选择器 选择bento元素右边所有的pickle元素

 /*
 选择下面所有的兄弟元素
                语法：兄 ~ 弟
 */

bento ~ pickle

14.利用子元素选择器 选择直接位于plate父元素中的apple元素

注意 这里就不能用 plate apple（后代元素选择器）

只可以用

plate > apple

15.利用伪类选择器 选择plate父元素中的第一个orange子元素

/* 
        伪类（不存在的类，特殊的类）
            -伪类用来描述一个元素的特殊状态
             比如，第一个子元素、被点击的元素、鼠标移入的元素...
            -伪类一般情况下都是使用：开头
             :first-child 第一个子元素
             :last-child 最后一个子元素
             :nth-child() 选中第n个子元素
                    特殊值：
                        n 第n个 n的范围是0到正无穷（从0~正无穷都选上）
                        2n 或者 even 表示选中偶数位的元素
                        2n+1 或者 odd 表示选中奇数位的元素

                    以上这些伪类是根据所有的子元素（类型可能不同）进行排序


                :first-of-type
                :last-of-type
                :nth-of-type()
                    -这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

*/

plate > orange:first-child

plate orange:first-child

两种都可以

16.利用伪类选择器和并集选择器 选择plate父元素中的 the apple and the pickle 子元素

/*

语法 span:only-child 
作用 selects the <span> elements that are the only child of some other element.

*/

plate apple:only-child,plate pickle:only-child

 17.利用伪类选择器和并集选择器 选择the small apple 和最后一个 pickle 元素

#fancy apple.small,pickle:last-child

18.利用伪类选择器 选择the 3rd plate元素 

plate:nth-child(3)

19.利用伪类选择器 

选择所有元素中的倒数第四个元素，该元素是bento元素

:nth-last-child(n)
定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处

:nth-last-of-type(n)
选择器匹配同类型中的倒数第n个同级兄弟元素

bento:nth-last-child(4)

 20.利用伪类选择器 

选择所有元素中的正数第一个元素，该元素是apple元素

apple：first-child

21. 利用伪类选择器 选择所有的位于偶数次序的plate元素

plate:nth-child(even)

22. 利用伪类选择器 从第三个开始，每第二个plate选择一个plate元素（就是选第3,5,7,9...2n+1个）plate元素

语法 :nth-of-type(An+B)
作用 从第B个元素开始 每隔A个元素选取一次 （同一类型的）

plate:nth-of-type(2n+3)

 23.利用伪类选择器 选择最中间的plate元素里面的apple元素

语法 :only-of-type
示例 p:only-of-type
作用 选择作为其父的唯一 <p> 元素的每个 <p> 元素。

 注意一下这里选定的是p元素！！！

apple.small:only-of-type
/* 即选择唯一一个class属性为small的apple元素 */

 24.利用伪类选择器 选择第二个apple元素和第二个orange元素（第二个正好是最后一个元素）

又因为它们的class都是small

.small:last-of-type

25.选择空的bento

bento:empty

26.选择class为big的apple

.apple:not(.small) 

/*使用not*/