2017年10月31日上午课堂练习
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)在父级里先看类型,再看位置