博客列表 >CSS选择器,CSS常用单位

CSS选择器,CSS常用单位

if柚的博客
if柚的博客原创
2018年08月16日 18:07:33817浏览

手写代码QQ图片20180816175601.jpg

实例

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中常见的选择器</title>
	</head>
    <body>
    	<ul>
    		<li class="demo1">1</li>
    		<li id="demo2">2</li>
    		<li class="demo3">3</li>
    		<li class="demo6 me mr">4</li>
    		<li class="demo5">5</li>
    		<li class="d6">6</li>
    		<li class="me">7</li>
    		<li class="mo8">8</li>
    		<li class="em9">9</li>
        </ul>
        <a href="http://php.cn">PHP中文网</a>
          <style>
          /*class选择器*/
          .demo1{
          	 color:#800000;
          }
         /* id选择器*/
          #demo2{
          	color:black;
          }
          /*标签选择器.范围越小,优先级越高*/
          ul{
          	color:#FF00FF;
          }
          ul:after {  /*子块撑开父块*/
            content:'1111111';  /*在子元素尾部添加空内容元素*/
            display: block;  /*并设置为块级显示*/
            clear:both;   /*清除二边的浮动*/
            width:100px;
            height:100px;
            background:#FFA500;
        }
        ul li {
            list-style: none; /*去掉默认列表项样式*/
            float: left;  /*左浮动*/
            width: 40px;  /*设置宽度*/
            height: 40px; /*设置高度*/
            line-height: 40px; /*文本垂直居中*/
            text-align: center; /*文本水平居中*/
            border-radius: 50%; /*设置边框圆角*/
            box-shadow: 2px 2px 2px #888;
            background: skyblue; /*背景色天蓝*/
            margin-right: 5px; /*每个球之间的右外边距*/
        }
       /* 属性选择器-属性名*/
       ul li[class] {
       	    background:white;
       }
       ul li[id]{
       	 background:white;
       }
       /* 属性选择器-属性值*/
       ul li[class="demo6"] {
       	background:black;
       }
      /* 属性选择器-属性值开头的*/ 
      ul li[id^="de"]{
      	background:pink;
      }
       /* 属性选择器-以指定属性值开头的*/ 
       ul li[class^="m"]{
       	background:#AF7817;
       }
       /* 属性选择器-以指定属性值结尾的*/ 
       ul li[class$="6"]{
       	background: black;
       }
       
    /*属性选择器: 属性值中包含指定子串*/
    ul li[class*="m"]{
    	background:#FF0000;

    }
    /*后代选择器*/
        body ul li {
            border: 1px solid black;
        }
         /*子选择器*/
        ul > li[class$="me"] {
            background-color: greenyellow;s
        }
           /*相邻选择器*/
        ul li[class$="me"] ~ * {
            /*选择当前元素之后的所有同级元素(不含当前)*/
            background-color: black;
            color: white;
        }

        /*相邻兄弟选择器*/
        ul li[class$="me"] + li {
            background-color: pink;
            color: black;
        }
            /*伪类选择器: 链接*/
        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;
           
        }
          /*选择集合中的最后一个元素*/
         ul li:last-child {
            background-color: red;
        }
        /*按索引选择指定的元素*/
        ul li:nth-child(6) {
            background-color: red;
        }
        /* 选择所有的偶数小球变色 */
        ul li:nth-child(even) {
            background-color: purple!important;
        }
         /*选择指定父级的第二个<li>子元素*/
         ol li:nth-of-type(2) {
            background-color: wheat;
        }



       



          </style>
    </body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议