css学习day04

chuyao 发布于2019-08-30 15:44 / 2579人阅读

摘要：选择器属性选择器过滤器在已有选择器的基础上进行筛选伪类选择器过滤器表示结构的表示状态的伪元素选择器添加元素将一个伪元素添加到选择到的元素里面的最后面规则取值关键字位置取消颜色十六进制简写为函数关键字渐变色长度绝对单位相对单位当前元素

选择器

属性选择器【过滤器】
在已有选择器的基础上进行筛选

selector[]
input[type] 
input[type=text] 
input[type^=s] 
input[type$=t] 
input[type*=t]

伪类选择器【过滤器】

表示结构的

:first-child
:last-child
:nth-child()
    number/2n+1/even、odd

表示状态的

:link
:hover
:active
:visited
:focus

伪元素选择器【添加元素】
selector::after

将一个伪元素添加到selector选择到的元素里面的最后面

ul.nav::after {
    content:"four";
    display:block;
    ...
}


    one
    two
    three
    ::after

规则取值：

        关键字：
            位置 left right center top bottom medium
            取消    none
            ...
        颜色：
            十六进制    #ffffff #ededed,简写为#fff
            rgb函数    rgb(0,0,0)
            关键字
            渐变色     linear-gradient
        长度：
            绝对单位     px 
            相对单位 
                em     当前元素上的字体大小
                    font-size:12px 
                    1em = 12px
                    2em = 24px
                rem 当前html元素中设定的字体大小
                    html {
                        font-size:10px;
                    }

                    ul {
                        font-size:20px;
                    }
                    li {
                        height:2rem;     //20px
                    }
                % 百分比
                    border-radius:50%

    文本样式 (可以被继承)
        line-height
        text-align
        text-decoration
    字体样式 (可以被继承)
        color
        font-family     族
            "微软雅黑" ,"Microsoft YaHei","宋体"
            字体栈

            font-family:"微软雅黑","Microsoft YaHei",serif;

        font-size         大小
            网页默认字体为16px
            12px 10px
        font-weight     粗细
            bold
            thin
            bolder
            100~900 
        font-style     是否打开斜体
        line-height 

        font:
        速写，简写
        font: font-style font-weight font-size/line-height font-family

        font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"

        网络字体
            奇葩字体，（字 -> icon）

---------------------------

1.标签选择器
2.id选择器
3.类选择器
4.普遍选择器

5.父子选择器

空格：后代选择器，后面所有的后代
  > ：子集选择器，后面的子代

6.兄弟选择器

  + ：选择的是紧跟着选择器的标签
  ~ ：选择的是选择器后面所有同级标签

7.组合选择器

  交集选择器：
  并级选择器：逗号相连接

8.属性选择器
[type = text]
[type$=t] 有type属性，并且值以t结尾
[type^=t] 有type属性，并且值以t开头
[type*=t] 有type属性，并且值中含有t
[class~=two] class中包含类名two的

9.伪类选择器
a.同级别的

p:first-child:
p:last-child:
p:only-child: 匹配属于父元素中唯一子元素的 p 元素
p:nth-child(n): 同级别中第一个子元素
p:nth-child(odd): 同级别中所有的奇数标签
p:nth-child(even): 同级别中所有的偶数标签

b.同类型（防止同级别中类型不同而难以选择）

p:first-of-type：同级别中同类型的第一个标签
p:last-of-type：同级别中同类型的最后一个标签
p:nth-of-type(n)：同级别中同类型的第n个标签

10.伪元素选择器

div::before{
  content:"aaa"
}

div::after{
  content:"aaa"
}

p::first-letter{
  选中第一个字符
}

div::first-line{
  选中一行
}

input::selection{
  选中被选择的
}

优先级

1.!important
2.若选择器权重相同，则就近
3.行内：1000
id选择器: 100
类选择器，属性选择器，伪类选择器：10
标签选择器，伪元素选择器：1

服务器托管云服务器学习css css学习学习css布局 css学习网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116164.html

Day04 - Array Cardio 指南一

摘要：指南一作者简介是推出的一个天挑战。目的是帮助人们用纯来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第篇。完整指南在从零到壹全栈部落。筛出运行结果是的组成数组返回。 Day04 - Array Cardio 指南一作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30...

zhangyucha0 2019-08-20 18:10 评论0 收藏0
移动端H5日历组件，已废弃不在维护

摘要：默认可选回调函数，绑定业务数据。例如某天有日程，则会在对应日期上标识出一个小红点或者其他标识，默认传入数据格式必选回调函数，当你点击或轻触某日期后执行。文档维护者：孙尊路喜欢的话，记得star 一下噢！适用场景该组件目前仅适用于移动端H5页面展示，后期高级用法中会讲述到如何基于日历基类实现自定义模板传入。（即：开发者只需要传入自己的模板即可实现出自己的优美的日历出来。）本篇...

Moxmi 2019-08-22 16:09 评论0 收藏0
100天搞定机器学习|Day1数据预处理

摘要：导入库导入数据集这一步的目的是将自变量和因变量拆成一个矩阵和一个向量。数据预处理是机器学习中最基础也最麻烦的一部分内容在我们把精力扑倒各种算法的推导之前，最应该做的就是把数据预处理先搞定在之后的每个算法实现和案例练手过程中，这一步都必不可少同学们也不要嫌麻烦，动起手来吧基础比较好的同学也可以温故知新，再练习一下哈闲言少叙，下面我们六步完成数据预处理其实我感觉这里少了一步：观察数据...

xeblog 2019-07-31 11:30 评论0 收藏0
JavaScript 30 - 一起做一次了不起的挑战

摘要：加入我们，一起挑战吧扫码申请加入全栈部落 JavaScript 30 - 一起做一次了不起的挑战 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑...

1treeS 2019-08-20 18:11 评论0 收藏0