基于OpenLayers的WebGIS程序二次开发实例教程
35618 人在学
专题课程
类(Class)是面向对象程序设计(OOP，Object-OrientedProgramming)实现信息封装的基础。类是一种用户定义类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。
常用的伪类和css选择器：
:required:optional必填元素和选填元素
:in-range:out-of-range在范围之内和不在范围之内
:valid:invalid符合要求的和不符合要求的
:read-only:read-write只读和可读可写
（:read-write除了匹配表单中可写的元素，也可以匹配div中可编辑可写入的元素）
<divcontenteditable="true"></div>
required和optional美化表单案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>form</title>
<style>
.container{max-width:400px;margin:20pxauto;}
input,select,textarea{width:240px;border:1pxsolid#999;margin:10pxauto;padding:.5em1em;}
label{color:#999;margin-left:10px;}
input:required,textarea:required{
border-right:3pxsolid#aa0088;
}
input:optional,select:optional{
border-right:3pxsolid#999;
}
input:required+label::after{
content:"(必填)";
}
input:optional+label::after{
content:"(选填)";
}
input:focus,textarea:focus,select:focus{outline:0;}/*去掉选中时的蓝色外边框*/
input:required:focus,textarea:required:focus{box-shadow:003px1px#aa0088;}
input:optional:focus,select:optional:focus{box-shadow:003px1px#999;}
input[type=submit]{
background:#cc00aa;
color:#fff;
border:2pxsolid#aa0088;
padding:10px0;
}
input[type=submit]:hover{
background:#aa0088;
}
</style>
</head>
<body>
<divclass="container">
<formaction="#">
<inputtype="text"required><label>名称</label>
<inputtype="email"required><label>邮箱</label>
<inputtype="tel"><label>手机</label>
<inputtype="url"><label>网址</label>
<selectname="#">
<optionvalue="1">非必填选项一</option>
<optionvalue="2">非必填选项二</option>
<optionvalue="3">非必填选项三</option>
<optionvalue="4">非必填选项四</option>
</select>
<textareaname="#"cols="30"rows="10"placeholder="留言（必填）"required></textarea>
<inputtype="submit"value="提交表单">
</form>
</div>
</body>
</html>
效果图如下：
类的实质是一种数据类型，类似于int、char等基本类型，不同的是它是一种复杂的数据类型。因为它的本质是类型，而不是数据，所以不存在于内存中，不能被直接操作，只有被实例化为对象时，才会变得可操作。
粤公网安备44010602001432号