CSS常用的三种单位案例基本选择器的使用

CSS中常用的三种单位案例

px是像素单位，相对于当前显示器的值

em是元素单位，相对于当前父元素字体的大小，默认1em=16px

rem是跟元素单位，相对于更元素html的字体大小，默认1rem=16px，最小不小于12px

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>元素的单位 px,em,rem</h3>
    <div class="px">px</div>
    <div class="em">em</div>
    <div class="rem">rem</div>
    <style>
        html{
            /*font-size: 12px;*/

        }
        .px{
            font-size: 20px;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            line-height: 100px;
            text-align: center;
        }
        .em{
            font-size:20px;
            width: 5em;
            height: 5em;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
        }
        .rem{
            width: 6.25rem;
            height: 6.25rem;
            font-size: 1.25rem;
            background-color: lightcoral;
            line-height: 6.25rem;
            text-align: center;
        }
    </style>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS中常用的选择器
（1）id选择器，通过设置元素的id属性来设置
（2）类选择器，通过设置元素的class 属性设置
（3）属性选择器：通过属性名称，属性值，以及属性值中的文本内容进行选择，返回元素的集合
（4）层级选择器：通过doom树的父元素来定位，多个层级通过空格区分
（5）子选择器：根据父元素定位：只隔一个层级
(6) 相邻选择器：根据相邻元素定位，需要找到同级别元素的起点
（7）群组选择器：可以自定义选择某些元素，也可以选择全部元素
（8）伪类选择器：
1.状态标签选择器，例如hover,link,visited等
2.根据元素的位置选择，例如li:first-child

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
</head>
<style>
    ul{
        padding: 0;
        margin: 0;
        width: 500px;
        border: 1px dashed #666;
        padding: 10px 5px;
    }
    ul:after{
        content: '';
        display: block;
        clear: both;
    }
    ul li{
        list-style: none;
        float: left;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        box-shadow: 2px 2px 2px #888;
        background-color: skyblue;
        margin: 5px;
        border-radius: 50%;
    }
    /*id选择器*/
    #item1 {
        background-color: coral;
    }
    .item2{
        background-color: gold;
    }
    /*类选择器*/
    ul li[class]{
        background-color: blueviolet;
    }
    ul li[class^= "cat"]{
        background-color: grey;
    }
    ul li[class$="pig"]{
        background-color: red;
    }
    ul li[class*="t"]{
        background-color: green;
    }
    /*//后代选择器,层级选择器*/

    body ul li {
        border: 1px solid black;
      }
    /*子选择器*/
    ul > li[class^= "pig"]{
        background-color: greenyellow;
    }

    /*相邻选择器*/

    ul  li[class$= "pig"] ~ * {
        background-color: black;
        color: white;
    }

    /*相邻选择器*/
    ul li[class$="pig"] + li
    {
        background-color: pink;
    }

    /*群组选择器*/
    h1. p{
        font-size: 2rem;
        font-width: lighter;
        margin: 0;
    }

    a{
        font-size: 2rem;
    }

    /*状态选择器a标签*/
    a:link{
        color: red;
    }

    /*访问后*/
    a:visited{
        color: orange;
    }

    a:focus{
        color: purple;
    }
    a:hover{
        color: green;
    }
    a:active{
        color: blue;
    }


    /*位置选择器*/
    ul li:first-child{
        background-color: #efefef !important;
    }

    ul li:last-child{
        background-color: red;
    }
    ul li:nth-child(5)
    {
        background-color: red;
    }

    ul li:nth-child(odd)
    {
        background-color: purple;
    }

    ol:only-child{
        background-color: lawngreen;
    }
    ol li:only-child{
        background-color: lawngreen;
    }
    ul li:nth-last-child(3){
        background-color: red;
    }

    ol li:nth-of-type(2){
        background-color: wheat;
    }

    /*空元素操作标签*/
    :empty{
        width: 220px;
        height: 270px;
        background-color: orange;
    }
    :empty:after{
        content: "dadadada";
    }


</style>
<body>
<ul>
    <li id="item1">1</li>
    <li class="item2">2</li>
    <li class="cat dog pig">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<h1>css选择器大法</h1>

<p>imppppppppp</p>

<a href="http;//www.php.cn">php</a>

<ol>
    <li>列表项1</li>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

<div></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

相关文章