主要的css选择器如下：
1、标签选择器
2、类选择器
3、ID选择器
4、全局选择器
5、组合选择器
6、继承选择器
7、伪类选择器
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
代码如下。js+html。
但是如同上述 黑马黄子所说。需要考虑数据实时性。自己判断何时需要提交数据。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 99%
height:99%
border: 1px solid #dddddd
position: relative
}
</style>
<script type="text/javascript">
function Choose(){
var mine = this
this.selections =[]
this.init = function(rows,cloumns,where){
var ul = document.createElement("ul")
var siteNum=1
for(var i =0i<cloumnsi++){
for(var j=0j<rowsj++){
var li = document.createElement("li")
li.style.listStyle = "none"
li.style.width = "50px"
li.style.height = "30px"
li.style.border ="1px solid #000"
li.style.color ="#000"
li.style.background ="green"
li.style.fontSize ="30px"
li.style.lineHeight ="30px"
li.style.textAlign ="center"
li.style.cursor ="pointer"
li.style.marginLeft = (j*52 +10) +"px"
if(j>0){
li.style.marginTop = -32 +"px"
}else{
li.style.marginTop = 0 +"px"
}
li.textContent = siteNum++
ul.appendChild(li)
}
}
ul.onclick = function(e){
var target = e.target || e.srcElement
if(target.tagName.toUpperCase() ==='LI'){
if('red'===target.style.color){
target.style.background ="green"
target.style.color= "#000"
for(var i=0i< (mine.selections.length)i++){
if(mine.selections[i] === target.textContent){
mine.selections.splice(i,1)
}
}
}else{
target.style.background = "#ccc"
target.style.color ='red'
mine.selections.push(target.textContent)
}
}
}
var toWhere = where || document.body
toWhere.appendChild(ul)
}
}
window.onload = function(){
var chooser = new Choose()
chooser.init(20,10)
document.getElementById("test").onclick = function(){
console.log(chooser.selections)
}
}
</script>
</head>
<body>
<button id="test">测试</button>
</body>
</html>
一、简单的选择器
1）标签选择器
与网页元素同名，用的最多，也简单，即直接作用于与该选择器名字相同的标签
2） 类选择器
能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同样式
3）类选择器和标签结合在一起==>指定类选择器
指定该类用于特定的标签范围内
4）ID选择器（ID唯一）
这个就不举例讲解了，类比类选择器，把"."换成"# "即可
5）通配选择器
如果所有元素都需要定义相同的样式，推荐使用通配选择器
二、复合选择器
1）子选择器
2）相邻选择器（二者有相同父元素）
**利用相邻的兄弟元素来控制，即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示
3）包含选择器（后代选择器）
第一对象一定要内包含第二对象
4）选择器嵌套
5）属性选择器
属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。
1.匹配属性名选择器
2.扩展
3.匹配属性值选择器
4.模糊匹配属性值选择器
类似正则表达式
6）伪选择器和伪元素选择器
标签之间可以通过逗号隔开来设定多个标签的CSS样式
