1.
<html>
<head>
<style type="text/css">
ul>li:first-of-type{
background:red;
}
/*不去匹配子类的*/
ul>li:first-child{
color:green;
}
ul>li:nth-of-type(2){
color:green;
}
</style>
</head>
<boody>
</body>
</html>
2.
<style type="text/css">
a{
background:gray;
color:blue;
padding:10px; /*内边距*/
}
/*选中有id属性的a元素
a[id]{
background:yellow;
}
/*选中属性id=‘a2'的a元素*/
a[id='a2']{
background:yellow;
}
/*选中属性id的值以a开头的a元素*/
a[id^='b']{
background:black;
}
/*E[attr $= val] 选中属性id的值以1结尾的a元素*/
a[id $='1']{
background:gold;
}
/*E[attr *=val]选中属性id的值包含2的a元素*/
a[id *='2']{
background:blueviolet;
}
</style>
笔记
1.css（层叠样式表）
2.css语法
选择器{
属性名1：属性值1；
属性名2：属性值2；
}
3.引用css的三种方式
第一种：行内样式
例<a style="color:red">内部样式</a>
第二种：内部样式
例
第三种：外部样式
使用步骤：
a)创建一个以css 为后缀的css文件
b)在html中通过link引入css文件
5.层次选择器
5.1后代选择器
父元素 子元素{}
5.2子选择器
父元素>子元素
5.3相邻兄弟选择器
6.结构伪类选择器
E F:first-child{}//第一个子元素
EF：last-child{}//最后一个子元素
EF:nth-child(？){}//？表示第几个子元素，还可以使odd奇数，even偶数
EF:firstt-of-type{}//指定类型的第一元素
EF:last-of-type{}//指定类型的第一元素
EF:nth-of-type(?){}//?表示指定类型第几个元素
注意：
EF：nth-child(n)在父级里从一个元素开始查找，不分类型
EF：nth-of-type(n)在父级里先看类型，再看位置
扫一扫
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
