20180815HTML表单、元素单位、样式继承和冲突、css选择器大全

一、概述

本节课主要讲了表单form(单选、多选、文本、按钮、图像)、元素单位（px、em、rem）、样式继承和冲突、css的各种选择器。尤其是选择器是重中之重，手打了一遍代码还是觉得理解有不到位的地方。

二、代码（选择器部分）

实例

<!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 type="text/css">
    	ul{
    		margin: 0;
    		width: 550px;
    		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;
    		border-radius: 50%;
    		box-shadow: 2px 2px 2px #888;
    		background-color: skyblue;
    		margin-right: 5px;
    	}
   		/*id选择器*/
    	#item1 {
    		background-color: coral;

    	}
    	/*类选择器*/
    	.item2{
    		background-color: gold;
    	}
		/*属性选择器：属性名*/
		ul li[class]{
			background-color: purple;
		}
		ul li[class="item2"]{
			background-color: grey;
		}
        /*发现问题！！！！选择器[]和元素名之间必须没有空格*/
        
        /*属性选择器：以指定属性值开头,注意^、$的符号位置*/
        ul li[class^="cat"]{
        	background-color: brown;

        }
        ul li[class$="pig"]{
			background-color: red;
        }


        /*属性选择器：属性包括指定字符串*/
        ul li[class*="te"] {
        	background-color: green;
        }
        ul li[class*="t"] {
        	background-color: black;
        }
       

       /*和上下文位置相关的选择器：后代（层级、派生选择器）是祖先关系父子、父父子都可以*/
       /*后代选择器*/
		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;/*32px*/
	   	font-weight: lighter;
	   	margin :0;
	   }
      /*伪类选择器：a标签链接*/
      a{
      	font-size: 2rem;
		text-decoration: none;
      }
	  /*访问前*/
	  a:link{
	  	color: red;
	  }
	 /* 后*/
	  a:visited{
	  	color: orange;
	  }
	 /* 焦点*/
	  a:focus{
	  	color: purple;
	  }
	  /*鼠标悬停*/
	  a:hover{
	  	color:green;
	  }
	/* 鼠标点击*/
	 a:active{
	 	color: blue;
	 }
	/* 伪类选择器,计数从1开始*/
	ul li:first-child{
		background-color: #efefef!important;
	}
	ul li:last-child{
		background-color: red;
	}
	ul li:nth-child(5){
		background-color: green;
	}
	ul li:nth-child(even){
		background-color: purple!important;;
	} 
      /* 上面这个优先级高
      ul li[class$="pig"] + li{
       	background-color: pink;
       	color: black;
       }*/
       ul li:nth-child(odd){
		background-color: gold!important;
	} 

		/*伪类选择器根据子元素数量选*/
		/*找只有唯一子元素的选择*/
		ol :only-child{
			background-color: lawngreen;
		}

		ol li:only-child{
			background-color: lawngreen;
		}
		/*倒数第三个,同样是important这个由于后写所以覆盖*/
		ul li:nth-last-child(3) {
			background-color: wheat!important;
		}
        /*选中多个元素中的子元素*/
		ol li:nth-of-type(2){
			background-color: wheat;
		}

		:empty{
			width: 200px;
			height: 200px;
			background-color: coral;

		}
		:empty:after{
			content: "你好";
		}
		:empty:before{
			content: url("../0814/bj.jpg");
		}
    </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>练习很重要</p>
<a href="http://www.php.cn">zphp大发哈哈哈</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>

运行实例 »

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

运行结果图：

360截图1757111411396139.png