CSS（层叠样式表）基础

1.组成结构表现行为CSS编写位置1.行内样式(键/名值对不推荐大量使用)CSS复合选择器11.交集选择器【且关系】选中同时符合多个条件的元素p.beauty{color:blue;}表示选中类名为beauty的p元素.rich.beauty{color:green;}表示选中类名包含rich和beauty的元素【有标签名标签名必须写在前面】2.并集选择器【或关系】选中多个选择器对于的元素CSS与HTML之间的关系1.父元素直接包含某个元素的元素就是该元素的父元素2.子元素被父元素直接包含的元素3.祖先元素父亲的父亲…,一直往外找都是祖先4.后代元素儿子的儿子…一直往里找都是后代5.兄弟元素具有相同父亲的元素互为兄弟元素CSS复合选择器21.后代选择器ul li{}表示ul中的li“空格”表示“中的”2.子代选择器div a表示div的儿子a3.兄弟选择器相邻兄弟选择器divp表示与div后紧紧相邻的p向下看通用兄弟选择器div~p表示选中div后所有的兄弟p元素4.属性选择器第一种写法【属性】{}表示选中具有属性的元素第二种写法【属性“ ”】{}表示选中具有属性且属性值为特定的元素第三种写法【属性^“a”】表示选中所有属性值以a开头的元素第四种写法【属性$ u】表示选中所有属性值以u结尾的元素第五种写法【属性*‘‘u’’】表示选中所有属性值包含u的元素伪类选择器1.什么是伪类回答很想类但不是类class是元素特殊状态的一种描述2.a:link表示没有访问过的a元素a:visited表示访问过的a元素【这两个只适用超链接a元素】*a:hover{color:skyblue}*表示选中的是鼠标悬浮状态鼠标放上不点击 的a元素a:active{}表示选中的是鼠标激活状态点击且不松手的a元素【这两个适用所有元素ex span:hover/active{}】【这几个顺序不要变】3.动态伪类input:focus{}表示获取焦点的元素focus只有表单类元素可输入input,select才能使用4.结构伪类1弟一种*divp:first-child{}*表示选中的是div的第一个儿子p元素第二种第三种divp:first-child注是标签滚动条第四种div p:first-child表示div的后代p的第一个元素第五种p:first-child表示选中的p元素并且p的父亲是谁无所谓但p必须是其父亲的第一个儿子5.结构伪类2*第一种**divp:last-child{}*表示选中的是div的最后一个儿子p元素同结构伪类1***第二种***divp:nth-child(n填数字)表示是选中的是div的第n个儿子p元素第三种divp:nth-child(-n5)表示选中前五个从n0开始算起【必须是anb的形式】第四种divp:first-of-type表示选中div的p元素中的第一个第五种divp:last-of-type表示选中div的p元素中的最后一个第六种divp:nth-of-type(n)表示选中div的p元素中的第n个6.结构伪类3不常用第一种divp:nth-last-type(n)表示选中div中倒数第n个所有兄弟第二种divp:nth-last-of-type(n)表示选中div的p元素中的倒数第n个所有同类型的兄弟第三种span:only-child表示选中的是没有兄弟的span元素第四种span:only-of-type表示选中的是没有同类型兄弟的span元素第五种root表示选中的是html的根元素第六种div:empty表示选中的是没有内容的div元素作业代码效果图