实例
/*id选择器*/
#bg-blue{
/*background-color: lightblue;*/
}
/*class选择器*/
.bg-green{
/*background-color: lightgreen;*/
}
/*属性选择器:
这里以用了id选择器为属性举例（li与[]之间没有空格，不然又变成子级元素了）*/
li[id="bg-blue"]{
/*border:red 2px solid;*/
}
/*由于前面列表里只有2用了id选择器，所以id里面的内容也可以省略,简写如下*/
/*
li[id]{
border:red 2px solid;
}
*/
/*群组选择器*/
#bg-blue,.bg-green{
/*border:pink 4px dashed;*/
}
/*相邻选择器*/
/*顺序下去第一个，这里的li可以用*代替*/
#bg-blue+li{
/*background-color: tan;*/
}
/*兄弟同级选择器*/
/*顺序下去，所有同级元素*/
#bg-blue~li{
/*background-color: gray;*/
}
/*这里的li理论上同样可以用*代替,但这里用*代替后内联块3颜色变化不对：*/
/*#bg-blue~*{*/
/* background-color: gray;*/
/*}*/
/*伪类：子元素选择器*/
/*ul与：之间必须有空格，不然就变成整个ul标签的背景色了*/
ul :first-child {
background-color: green;
}
ul :last-child{
background-color: green;
}
ul :nth-child(6){
background-color: green;
}
/*还有个倒选，nth-child(8)就等于nth-last-child(3)*/
ul :nth-last-child(3){
background-color: green;
}
/*伪类：类型选择器*/
/*ul li:first-child{*/
/* background-color: blueviolet;*/
/* color: white;*/
/*}!*虽然这样写也可以，但是不规范，类型选择器我们有专用的选择器*!*/
ul li:last-of-type{
background-color: blueviolet;
color: white;
}
ul li:nth-of-type(6){
background-color: blueviolet;
color: white;
}
/*:nth-child() 关注点在子元素的“位置”*/
/*:nth-of-type() 关注点在子元素的“类型”==> li:nth-of-type()*/
div :nth-child(2){
background-color: gold;
}
div:first-of-type :nth-child(3){
/*background-color: blueviolet;*/
}
/*这里注意两个div后面的空格问题，div后面没有空格的那个可以看做父子关系，*/
/*相当于在div的子类下面用了伪类的子元素选择器*/
/*同样的效果，用一个简单地类型选择器（讲师说它是标签选择器）来简化上一个复杂的类型选择器*/
div p:nth-of-type(2) {
background-color: blue;
}
/*用到类型选择器的时候，：前面是没有空格的*/
/*以下是表单的样式*/
form :enabled{
background-color: tan;
}
form :checked+*{
color: red;
}
/*当输入错误或者无效的数据格式时会被激活*/
form :invalid{
color:red;
}
form :focus{
background-color: dodgerblue;
}
/*hover鼠标悬停*/
button:hover{
width: 60px;
height: 30px;
background-color: black;
color: white;
border: none;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
伪类选择器里，到底什么时候需要在：前加空格。
疑问1：子类选择器前面加空格，类型选择器前面不加空格？？
疑问2：还有兄弟同级选择器中用*代替标签，理论上从相邻的选择器到最后一个同级都会被选中，那这里用*代替li出现相邻选择器未被选中（其他兄弟同级都被选中了）？？