前端笔记(2)

一.代码：
（1）css样式

    
    
    
    

    


    
    
先天下之忧而忧，后天下之乐而乐
      

(2)css语法

    
        
        
        
    
    
        
离离原上草，一岁一枯荣
    

(3)开发工具

    
    
    
    
    
    
    


    
    
    
这是一个非常漂亮的网页
    
    
故人西辞黄鹤楼
    
烟花三月下扬州
    
孤帆远影碧空尽
    
唯有长江天际流

(4)块和内联

    
    
    


    

    
我是一个span


    我是一个超链接

    
        

            我是一个div
        
    
    

        我是一个div
    

    
我是一个p标签
    
我是一个p标签

    


    我是一个span
    我是一个span

    我是一段文字

(5)常用的选择器

    
    
    


    
赠汪伦
    
李白乘舟将欲行
    
忽闻岸上踏歌声
    
桃花潭水深千尺
    
    
不及汪伦送我情
    
李白乘舟将欲行
    
李白乘舟将欲行
    
李白乘舟将欲行

    
忽闻岸上踏歌声
    忽闻岸上踏歌声

(6)子元素和后代选择器

    
    
    


    
    

        我是div标签中的span
        
我是p标签中的span
    
    

        我是body标签中的span
    

(7)伪类选择器

    
    
    


    访问过的链接
    


    没访问过的链接

    
我是一个段落

    
    

(8)伪元素

    
    
    


    

                子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？」
        『2』有子曰：「其为人也孝弟，而好犯上者，鲜矣；不好犯上，而好作乱者，未之有也。君子务本，
        本立而道生。孝弟也者，其为仁之本与！」
        『3』子曰：「巧言令色，鲜矣仁！」
        『4』曾子曰：「吾日三省吾身—为人谋而不忠乎？与朋友交而不信乎？传不习乎？」
        『5』子曰：「道千乘之国，敬事而信，节用而爱人，使民以时。」
        『6』子曰：「弟子，入则孝，出则弟，谨而信，凡爱众，而亲仁。行有馀力，则以学文。」

    
        
    

(9)属性选择器

    
    
    


    
    
我是一个段落
    
我是一个段落
    
我是一个段落
    
我是一个段落
    
我是一个段落

(10)子元素选择器

    
    
    


    我是span
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    我是span
    

(11)兄弟元素选择器

    
    
    


    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    我是一个span
    
我是div
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签

(12)否定伪类

    
    
    


    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签

(13)样式的继承

    
    
    


    
    

        

             我是p标签中的文字
             我是span中的文字
        
    
    我是p元素外的span

(14)选择器的优先级

    
    
    


    

        我是一个段落
        我是p标签中的span
    

(15)a的伪类

    
    
    


    访问过的链接
    

    未访问过的链接

二：餐厅选择器练习
代码如下：

1.plate  元素选择器直接选择

2.bento 元素选择器直接选择

3.plate#fancy 交集选择器

4. plate apple 后代元素选择器

5.plate#fancy pickle 交集选择器和后代选择器的结合

6.div > apple.small,div > plate apple.small 父代选择器与交集选择器的结合

7.bento orange.small,plate orange.small 后代元素选择器与交集选择器的结合

8.bento orange.small 后代元素选择器

9.plate,bento 元素选择器

10.*通配选择器

11.plate *  plate orange.small, plate pickle, plate apple 通配选择器或交集选择器

12.plate + apple  后一个兄弟元素选择器

13.div > pickle.small,div > pickle.small + pickle  子代元素选择器，交集选择器，后一个兄弟元素


14.plate:nth-child(2) apple 子元素选择器，后代元素选择器的综合使用

15.plate:nth-of-type(2) :first-child  子元素选择器的嵌套使用

16.plate:first-of-type apple, plate:first-of-type + plate pickle.small  子元素选择器，后代元素选择器，后一个后代元素选择器的综合使用

17.plate#fancy apple.small, pickle.small  交集选择器，后代选择器的联合使用

18.plate:nth-of-type(3)  子元素选择器

19.bento:first-of-type  子元素选择器

20.apple:first-of-type 子元素选择器

21.plate:nth-of-type(even) 子元素选择器

22.plate:nth-of-type(3),plate:nth-of-type(5) 子元素选择器

23.plate:nth-of-type(2) apple.small  子元素选择器，后代元素选择器的综合使用

24.orange.small:nth-of-type(2),apple.small:nth-of-type(2)
orange.small:last-of-type,apple.small:last-of-type   子元素选择器


25.bento:not(bento:nth-of-type(2)) 子元素选择器，否定伪类选择器的联合使用

26.plate:nth-of-type(2) apple,div > :nth-child(3) #方法逻辑合理 plate:nth-of-type(2) apple,div > apple div > plate:nth-of-type(2) apple,div > apple 子元素选择器，后代元素选择器，子代元素选择器器

结束：

88.png