CSS读书笔记

Sian

1、过滤所有外加样式：normalize.css

https://cdn.bootcss.com/normalize/7.0.0/normalize.css

2、属性选择器

2.1、包含title属性的元素

[CSS] 纯文本查看 复制代码

        input[title] { 
                color: red,
        }

2.2、包含title并且值为"submit"的元素

[CSS] 纯文本查看 复制代码

        input[title="submit"] {
                color:red
                border: 1px solid #000;// dotted,dashed
        }

2.3、包含href并且值中包含"yusian.com"

[CSS] 纯文本查看 复制代码

        a[href*="yusian.com"]{
                color:red
        }

2.4、包含href并且以"http://yusian.com"开头

[CSS] 纯文本查看 复制代码

        a[href^="http://yusian.com"]{
                color:red
                border: 1px dotted #000;
        }

2.5、包含href并且以"yusian.com"结尾

[CSS] 纯文本查看 复制代码

        a[href$="yusian.com"]{
                color:red
                border: 1px dashed #000;
        }

3、后代选择器

3.1、类a元素下面的类b的元素被选中

[CSS] 纯文本查看 复制代码

        .a .b {
            color : red;
        }

3.2、同时含有类a和类b的元素将被选中

[CSS] 纯文本查看 复制代码

        .a.b {
                color : red;
        }

4、相邻选择器

4.1、相邻的下一个

[CSS] 纯文本查看 复制代码

        .a + div {
            color: yellow;
        }

4.2、相邻通用选择器，相邻以下的所有

[CSS] 纯文本查看 复制代码

        .a ~ div {
            background: gray;
        }

5、伪类选择器

5.1、超链接伪类选择器，注意先后顺序，因为会相互覆盖，所以状态放前面

[CSS] 纯文本查看 复制代码

        a:link {color: #FF0000}
        a:visited {color: #00FF00}
        a:hover {color: #FF00FF}
        a:active {color: #0000FF}

5.2、input的伪类选择器

[CSS] 纯文本查看 复制代码

        input:focus{
                outline: none;
                border: 1px dashed red;
        }

6、伪元素选择器

6.1、元素开头加"*"

[CSS] 纯文本查看 复制代码

    p:before {content: "*"}

6.2、元素结尾加“[?]”

[CSS] 纯文本查看 复制代码

        p:after {content: "[?]"}

6.3、元素第一个字符渲染红色

[CSS] 纯文本查看 复制代码

        p:first-letter {color: #FF0000}

6.4、第一个元素

[CSS] 纯文本查看 复制代码

        p:first-child {color: blue;}

6.4、最后一个元素

[CSS] 纯文本查看 复制代码

        p:last-child {color: green;}

6.5、第n个元素

[CSS] 纯文本查看 复制代码

        p:nth-child(n) {color: #00FFFF;}

7、选择器权重

内联 > id选择器 > 类/属性/伪类选择器 > 元素选择器

8、display的几个属性值

8.1、inline
左右可伸缩，尽可能的向左上角靠；
8.2、block
上下左右可伸缩，成块出现，不可换行或折断，并且不与其他元素同行
8.3、inline-block
上下左右可伸缩，成块出现，不可换行或折断，可与其他元素同行
8.4、none
隐藏不显示；

9、在线商城项目

9.1、box-sizing 属性：content-box、border-box、inherit，边框与内边距是否计算入框中

[CSS] 纯文本查看 复制代码

        * {
                box-sizing:border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
                width:50%;
                float:left;
        }

9.2、清除浮动
A、在div中，所有元素均设置成float时，母元素的高度会塌陷，从而无法设置可见样式；
B、要解决这个问题，最简单的办法是在所有子元素的后面添加一个空div，并且清除浮动，使得母元素形态上能够扩展到最后一个元素；
C、还有一个办法是通过伪类选择器的方式添加一个空元素清除浮动，在相关的元素中添加这个类即可；

[CSS] 纯文本查看 复制代码

        .clear-float:before,
        .clear-float:after {
                content: "";
                display: block;
                clear: both;
        }