第45篇 CSS属性选择器

标签：rev   选择器   语法   排序   文本框   style   迭代器   lin   inpu   

1，内置函数复习
    1.1 reduce

        #reduce 从可迭代对象里面不断的取值累加
        from functools import reduce
        li = [1,2,3,4,5,6]
        ret = reduce(lambda x,y:x+y,li)
        print(ret)

        res = reduce(lambda x,y:x+y,range(1,101))
        print(res)

    1.2 sorted
        1.2.1
            按照年龄进行排序

li = [
            {‘name‘:‘gold‘,‘age‘:‘40‘},
            {‘name‘:‘eva-J‘,‘age‘:‘18‘},
            {‘name‘:‘naza‘,‘age‘:‘19‘},
            {‘name‘:‘gaoxin‘,‘age‘:‘20‘},
            {‘name‘:‘yuanju‘,‘age‘:‘50‘},
            ]

            li2 = sorted(li,key=lambda x:x[‘age‘],reverse=True)
            print(li2)

        1.2.2

#去重，并保持原来的次序
            li = [1,4,5,8,2,6,9,12,2,14,4,5,1,2,3]
            #方法一
            li2 = []
            for i in li :
                if i not in li2:
                    li2.append(i)
            print(li2)  # [1, 4, 5, 8, 2, 6, 9, 12, 14, 3]

            #方法二
            li_new = list(set(li))
            li_last = sorted(li_new,key=li.index)#按照li原来的顺序排序
            print(li_last)

    1.3 zip方法得到是一个迭代器，里面的元素的数据类型是元组

        #采用dict强制转化成字典
        keys = [‘name‘,‘age‘,‘salary‘]
        values = [‘andy‘,18,50]
        d= dict(zip(keys,values))
        print(d)#{‘name‘: ‘andy‘, ‘age‘: 18, ‘salary‘: 50}

         #采用list强制转化成列表
        keys = [‘name‘,‘age‘,‘salary‘]
        values = [‘andy‘,18,50]
        ret = zip(keys,values)
        li = list(ret)
        print(li)#[(‘name‘, ‘andy‘), (‘age‘, 18), (‘salary‘, 50)]

        #迭代器逐个取值的

        keys = [‘name‘,‘age‘,‘salary‘]
        values = [‘andy‘,18,50]
        ret = zip(keys,values)
        ret_iter = iter(ret)
        while 1:
            try:print(ret_iter.__next__())
            except StopIteration:
                break

2，正式进入CSS
    1. 定义
        HTML 超文本标记语言
        CSS层叠样式表Cascading Style Sheets
    2. 语法
        标签选择器 {k1:v1,k2:v2}


    3. CSS代码存放的位置
        1. 直接写在标签中的style属性
        2. 在head标签中的style标签内
        3. 写在单独的SCC文本中，通过link标签引用

    4. SCC选择器
        如何在HTML代码中找到相应的标签
        1. 基本选择器
            1. ID标签选择器    -->#p1 {}
            2. 标签选择器      -->div {}
            3. 类选择器        -->.c1 {}
            4. 通用选择器      -->* {}
        2. 组合选择器
            1. 子孙选择器（后代选择器）             -->div p {}
            2. 儿子选择器（紧挨着父标签的子标签）    -->div>p {}
            3. 毗邻选择器（紧挨着的下面的标签）      -->div+p {}
            4. 弟弟选择器（同级下面的所有标签）      -->div~p {}
                                                   -->div~* {}
        3. 属性选择器
            1. 有某个属性的标签                     -->div[title] {}
            2. 有某个属性并且属性值等于给定的        -->div[title=‘hello‘] {}
                                                   -->div[title^=‘hello‘] {}  以hello开始
                                                   -->div[title$=‘hello‘] {}  以hello结束
                                                   -->div[title*=‘hello‘] {}
                                                   -->div[title~=‘hello‘] {}  按空格分割之后的列表中是否含有
        4. 分组和嵌套
            1. 分组应用于多个选择器找到标签应用相同的样式
                div,p {}
            2. 嵌套
                 子孙 .c1 p {}
                 儿子 .c1>p {}
        5. 伪类选择器
                    /*连接的默认样式*/
                    a:link {color: red}

                    /*访问过的连接*/
                    a:visited {color: yellow}

                    /*点击的一瞬间的样式*/
                    a:active {color: #0000cc}

                    /*鼠标放上去之后的样式*/
                    span:hover {color: deeppink}

                    /*文本框输入的样式*/
                    input:focus {">伪元素选择器
                    div.c1:first-letter {color: red;font-size: 48px}
                    p:before {content: ‘*‘;color: #0000cc}
                    p:after {content: ‘[?]‘;color: deeppink}
    5. 选择器的优先级
        1. 当选择器相同的时候
            谁最后加载谁生效！！
        2. 选择器不同的时候
            1. 选择器优先级的权重：
                内联样式（1000） > ID选择器（100） > class选择器（10） >元素选择器（1）
            2. 不讲道理的！important

第45篇 CSS属性选择器

标签：rev   选择器   语法   排序   文本框   style   迭代器   lin   inpu   

原文地址：https://www.cnblogs.com/cavalier-chen/p/9768103.html