关于在网页中使用选择器的方式
一. 选择器
1.关于选择器，它们有四种
（1）后代选择器：代码如下；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style type="text/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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style type="text/css"> ul>p{ 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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style type="text/css"> h2+p{ 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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style type="text/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>之后的所有同级元素渲染成浅绿色，用~隔开。需要注意，它只能向下选择。渲染后效果；