css学习记录2

交集选择器

以 . 号表示：

如

<style>
    div.box {
        color: red;
    }
</style>

并集选择器

以 ，. 表示：

如

<style>
    div,.box,p.box,#box {
        color: red;
    }
</style>

兄弟相邻选择器

以 + 号表示：

如

<style>
    div + p {
        color: red;
    }
</style>

通用的兄弟选择器（可选择以后的所以指定标签）

以 ~ 表示：

如

<style>
    div ~ p {
        color: red;
    }
</style>

伪类选择器hover

如

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
    }
    .box:hover {
        cursor: pointer;
        background-color: red;
    }
</style>

伪类选择器first

如

<style>
    ul>li {
        list-style: none;
    }
    li:first-child {
        color: red;
    }
</style>

伪类选择器before   after

如

<style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            position: relative;
        }
        .box:before {
            content: "内容";
            width: 10px;
            height: 10px;
        }
        .box:after {
            content: "内容";
            width: 10px;
            height: 10px;
        }
    </style>

定位

使用position属性进行定位，它有两个值，分别为：

1、relative 相对定位

2、absolute 绝对定位

同时可以使用display属性，其值none表示隐藏，block表示显示。

如

<style>
      .box {
            width: 100%;
            height: 20px;
            background-color: gray;
            display: block;
            }    
    </style>

使用transform或left/ top/right/bottom进行定位

如

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
        }
</style>

或是

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            transform: translate(-50%, -50%);
        }
</style>