css常用的选择器--2018年8月15日

代码：
实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用选择器</title>
        <style>
            ul{
                /*padding: 0;*/
                margin: 0;
                width: 550px;
                border: 1px dashed #666;
                padding: 10px 5px;
                hegiht:50px;
            }
            ul:after{
                conter:"";
                display: block;
                clear: both;

            }
            ul li{
                list-style: none;
                float: left;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 50px;
                box-shadow: 2px 2px 2px #888;
                background-color: skyblue;
                margin: 5px;
            }
            /*id选择器*/
            #item1{
                background-color: coral;
            }
            /*类选择器/class选择器*/
            .itme2{
                background-color: gold;
            }
            /*属性选择器： 属性名*/
            ul li[class]{
                background-color: blueviolet;
            }
            /*属性选择器： 属性值*/
            ul li[class="item2"]{
                background-color: gray;
            }
            /*属性选择器： 以指定属性值开头的元素*/
            ul li[class^="cat"]{
                background-color: brown;
            }
            /*属性选择器： 以指定属性值结尾的元素*/
            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;
                color: black;
            }
            /*群组选择器*/
            h1,p{
                font-size: 2rem;
                font-weight: lighter;
                margin: 0;
            }
            /*伪类选择器：链接*/
            a{
                font-size: 2rem;
            }
            /*访问前*/
            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: #FCE80F;
            }
            ul li:nth-child(2n){
                /*偶数：evern/2n，奇数 odd/2n+1*/
                background-color: blueviolet !important;
            }
            /*伪类选择器：根据子元素的数量*/
            ol :only-child{
                /*只有一个子元素*/
                background-color: lawngreen;
            }
            ol li:only-child{
                /*只有一个子元素*/
                background-color: lawngreen;
            }
            ul li:nth-last-child(3){
                /*倒数第n个*/
                background-color: wheat !important;
            }

            ol li:nth-of-type(2){
                /*选定多个子元素中的第n个子元素*/
                background-color: wheat;
            }
            :empty{
                /*选择当前空元素*/
                width: 220px;
                height: 270px;
                background-color: coral;
            }
            :empty::after{
                content: '看到我了吗？';
            }
            :empty:before{
                /*通过伪类添加的元素，默认都是行内元素，不支持宽高设置，可以通过设置背景图标的方式设置*/
                content:url("http://image.uczzd.cn/8930900491201927136.jpg?id=0&from=export");
                width: 100px;
            }

        </style>
</head>
<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>css选择器非常重要，特别是对于学习js，jquer以及其他前端框架</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
手抄：
总结：
元素的单位：
1.px 屏幕像素，相对于显示器
2.em 元素单位，相对于当前元素字体大小，1em = 16px;
3.rem 根元素单位 r=root, 1rem= 1em = 16px;
实例

相关文章
