一. 选择器1.关于选择器它们有四种1后代选择器代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title选择器/title style typetext/css ul p{ color: red; } /style /head body ul h2《诡秘之主·新的篇章》/h2 p第一章/p ol li第一节/li li第二节/li li第三节/li /ol p第二章/p ol li第一节/li li第二节/li li第三节/li /ol p第三章/p ol li第一节/li li第二节/li li第三节/li /ol /ul /body /html此代码是后代选择器效果是把被ul元素所包含的所有p元素渲染成红色代码需要用空格隔开。渲染后2子代选择器代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title选择器/title style typetext/css ulp{ color: brown; } /style /head body ul h2《诡秘之主·新的篇章》/h2 p第一章/p ol li第一节/li li第二节/li li第三节/li /ol p第二章/p ol li第一节/li li第二节/li li第三节/li /ol p第三章/p ol li第一节/li li第二节/li li第三节/li /ol /ul /body /html此代码是子代选择器作用是把所有作为ul元素下的直接子元素p渲染成棕色中间需要用隔开。需要注意的是它对更深一层的元素不起作用不可跨代。下面是渲染图3相邻兄弟选择器代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title选择器/title style typetext/css h2p{ color: blue; } /style /head body ul h2《诡秘之主·新的篇章》/h2 p第一章/p ol li第一节/li li第二节/li li第三节/li /ol p第二章/p ol li第一节/li li第二节/li li第三节/li /ol p第三章/p ol li第一节/li li第二节/li li第三节/li /ol /ul /body /html此代码是相邻兄弟选择器作用是把代码中所有的h2元素相邻的第一个同级元素p渲染成蓝色代码需要用隔开。下面是代码渲染后效果4通用兄弟选择器代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title选择器/title style typetext/css h2~p{ color: greenyellow; } /style /head body ul h2《诡秘之主·新的篇章》/h2 p第一章/p ol li第一节/li li第二节/li li第三节/li /ol p第二章/p ol li第一节/li li第二节/li li第三节/li /ol p第三章/p ol li第一节/li li第二节/li li第三节/li /ol /ul /body /html此代码是通用兄弟选择器代码作用是选择所有h2之后的所有同级元素渲染成浅绿色用~隔开。需要注意它只能向下选择。渲染后效果