Get CSS3选择器

1.:nth-of-type(-n+b)

实现效果：选择器匹配属于父元素的特定类型的前b个子元素的每个元素。

2.input[type='text']:focus

实现效果：光标触发文本框时设置样式。

3.*:target *

定义：URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素

4.css中的'~'

例：#slide_1:target ~ .slide
为所有相同的父元素中位于#slide_1:target元素之后的所有.slide元素设置样式

实例练习

实现效果

注：重点利用css3 :target选择器和“~”的使用实现简单的轮播效果，注意代码中的布局以及position和点击按钮左侧的距离的变化。

整体代码

    
    
    
    


    

        

            排名
            网站
            热度
        
        

            1
            百度前端技术学院
            12000
        
        

            2
            百度前端技术学院
            11000
        
        

            3
            百度前端技术学院
            10000
        
        

            4
            百度前端技术学院
            9000
        
        

            5
            百度前端技术学院
            8000
        
        

            6
            百度前端技术学院
            7000
        
        

            7
            百度前端技术学院
            6000
        
        

            6
            百度前端技术学院
            5000
        
        

            4
            百度前端技术学院
            4000
        
        

            3
            百度前端技术学院
            3000
        
    
    
    

        
        
        
        

            
1
            
2
            
3
        
        

            1
            2
            3
        
    

参考文献

css中“~”和“>”是什么意思？
CSS3 :target 选择器

写给自己

与其说自己是沉默寡言不如说是懒惰，懒得交际，懒得总结，认识春哥之前从未写过总结这些东西，学过的东西大多也随之淡忘,现在春哥走了之后也一直在坚持总结，之所以坚持是因为这个习惯真的很好，其实写这一篇之前还在纠结写还是不写，虽然辞藻各方面可能还不够精炼，但是本着日后自己回过头还能够看懂这些，写的也是通俗易懂了。
这里想起一个自己切身的故事，关于好的事情就该坚持，勉强自己也该坚持，我自小不爱吃姜，小时候见父亲稍稍感到感冒征兆喝姜汤一碗干完时，觉得不可思议，那么难吃的东西竟然也能下咽，这一想法一直延续到高中，‘王萍’这一伟人改变了我的想法，一次吃午饭，她吃掉盘子所有配菜——“姜”，我问她：“你喜欢吃姜呀”，她说：“不爱吃，但是它对身体好啊”，听了这句话我一激灵，然后一直铭记着。
对于好的事情该不该勉强自己去做，我时常会纠结一二，这里谨此表达自己拙见。
希望努力着的我们，无论身处何种环境都不被其影响，“时光荏苒，初心不变。”