标签选择器:
p {
color: red;
}
类选择器
.pColor1 {
color:blue;
}
ID选择器
#pColorId {
color: yellow;
}
逗号写法,表示A和B,如类c1和c2的样式:
.c1, .c2 {
color: yellow;
}
空格写法,表示A下面的B,如body下面的c2的样式:
body .c2 {
color: yellow;
}
CSS特殊选择器
CSS有几种特殊的选择器,如:
1.*号选择器表示页面中的所有标签
* {
color: blue;
}
2.+号表示紧随class后面的同级标签元素
.cl+p{
font-size: 40px;
}
3.~表示class后面的所有同级p标签元素
.cl~p{
color:red;
}
4.> 号表示class后面的子元素的span标签
.cl>span{
font-size: 50px;
color:yellow;
}
5.a[xxx] 表示了设置xxx属性的a标签,如设置了title属性的a标签则可以写成如下形式
a[title]
{
font-size: 50px;
}
实例源码:
11111111111 类cl下面的子元素span标签
紧随class cl的同级p标签
cl类后面的同级p标签1
cl类后面的同级p标签2
cl类后面的同级p标签3
cl类后面的非同级p标签
运行后效果