在页面style元素或CSS文件中创建样式时，定义一组样式的格式如下：
<选择器> {<CSS属性>}
其中，选择器（selector）决定了页面中哪些元素应用指定的CSS属性，<CSS属性>中可以定义一个属性，也可以定义多个属性。下面分别介绍各种选择器的定义。
元素选择器，使用元素名称确定应用样式的元素，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1 {color:red;} p {color:navy;} </style> </head> <body> <h1>标题一</h1> <p>段落文本</p> </body> </html>
代码中，h1元素设置为红色（red），p元素设置为海军蓝（navy），页面显示效果如下图所示。
ID选择器使用#符号和元素的id属性值定义，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #h1a {color:red;} #h1b {color:blue;} </style> </head> <body> <h1 id="h1a">标题一A</h1> <h1 id="h1b">标题一B</h1> </body> </html>
代码，分别将id值为h1a和h1b的两个h1元素设置为红色和蓝色，页面演示效果如下图所示。
类选择器，使用圆点（.）和元素的class属性值定义，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .h1a {color:red;} .h1b {color:blue;} </style> </head> <body> <h1 class="h1a">标题一A</h1> <h1 class="h1b">标题一B</h1> </body> </html>
本例，两个h1元素的class属性分别设置为h1a和h1b，在style元素中分别使用类选择器设置为红色和蓝色，页面显示效果如下图所示。
属性选择器会根据元素属性和属性值确定应用样式的元素，下面分别讨论。
如指定元素只要包含某个属性就应用指定的样式，可以使用[<属性名>]格式定义选择器，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [attr1] {color:red;} h1[attr2] {color:blue;} </style> </head> <body> <h1 attr1>标题一A</h1> <h1 attr2>标题一B</h1> </body> </html>
style元素中，第一个选择器定义只要元素包含attr1属性就显示为红色，第二个选择器定义h1元素中只要定义了attr2属性就显示为蓝色。请注意，HTML元素中设置的属性可以是标准属性，也可以是自定义属性。
根据属性的值确定应用样式的元素时，可参考如下选择器格式。
属性等于某个属性值，可以使用[<属性名>=<属性值>]格式，如[attr1="value1"]，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [attr1="value1"] {color:red;} </style> </head> <body> <h1 attr1="value1">标题一A</h1> <h1 attr1>标题一B</h1> </body> </html>
本例定义的样式中，只有attr1属性等于value1值时才会显示为红色，页面中的第一个h1元素会显示为红色，第二个h1元素则显示为默认颜色，页面显示效果如下图所示。
属性值可以包含空格分隔的多个值，如果只匹配其中一个值可以使用~=运算符，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [attr1~="value1"] {color:red;} </style> </head> <body> <h1 attr1="value1 value2">标题一A</h1> <h1 attr1="value2 value3">标题一B</h1> </body> </html>
本例，只有第一个h1元素会显示红色，如果将样式中属性选择器中的值修改为value2，则两个h1元素都会显示红色。
以下是四个属性选择器中匹配部分属性值的运算符：
子元素选择器，使用空格符，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div p { color: red; } </style> </head> <body> <p>段落一</p> <div> <p>段落二</p> <p>段落三</p> </div> </body> </html>
本例样式中，指定div下的所有p元素都显示为红色，页面中的段落一显示为默认色，段落二和段落三显示为红色。
直接下级元素选择器，使用大于号（>）。直接下级是指元素的第一级子元素，不包含子元素的下级元素，下面的代码演示了相关应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1>p { color: red; } </style> </head> <body> <p>段落一</p> <div id="div1"> <p>段落二</p> <div id="div2"> <p>段落三</p> </div> </div> </body> </html>
本例样式中设置id属性为div1的元素中的第一级子元素中的p元素显示为红色，这里只有段落二显示为红色，其它p元素则显示为默认颜色。
同级相邻元素选择器，使用加号（+），下面的代码演示了相关应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1+p { color: red; } </style> </head> <body> <div id="div1"> <p>段落一</p> </div> <p>段落二</p> <p>段落三</p> </body> </html>
本例样式中，定义id为div1元素相邻的p元素显示为红色，页面中段落二会显示为红色，其它p元素显示为默认颜色。
同级元素选择器，使用波浪号（~），下面的代码显示了相关应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1~p { color: red; } </style> </head> <body> <div id="div1"> <p>段落一</p> </div> <p>段落二</p> <p>段落三</p> </body> </html>
本例样式中，定义id为div1元素同级的p元素显示为红色，页面中段落二和段落三会显示为红色，段落一显示为默认颜色。
伪类选择器确定了元素会在某种状态下应用指定的样式。先来看链接（a元素）的伪类选择，包括：
:focus，焦点进入元素，如点击进入一个文本框时。
:targer，匹配在URL中使用#和id属性值指定的元素；请注意，在URL中使用#符号指定元素id属性值时，打开页面时会自动跳转到此元素位置。下面的代码演示了相关应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> :target { font-size:2em; color: red; } </style> </head> <body> <p id="p1">段落一</p> <p id="p2">段落二</p> <p id="p3">段落三</p> </body> </html>
运行页面后在浏览器地址中添加#p2，如http://localhost:58476/demo/test.html#p2；然后回车重新载入页面，可以看到id为p2的元素显示为2倍字体和红色，页面显示效果如下图所示。
:first-child和:last-child，分别匹配第一个和最后一个元素，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1:first-child{color:red;} h1:last-child{color:blue;} </style> </head> <body> <h1>标题A</h1> <h1>标题B</h1> <h1>标题C</h1> </body> </html>
本例，第一个h1元素（标题A）显示为红色，最后一个h1元素（标题C）显示为蓝色，而中间一个h1元素（标题B）则显示为默认颜色。
以下是一些表单字段常用的伪类选择器，在介绍表单应用时会有具体应用演示：
伪元素选择器确定了特定位置的元素效果，包括：
下面的代码演示了这四个伪元素选择器的应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1:before { content: "【"; } h1:after { content: "】"; } p:first-line { color: blue; } p:first-letter { font-size: 2em; color: red; } </style> </head> <body> <h1>文章标题</h1> <p>随着大数据和AI（人工智能）时代的来临，各行各业会越来越多的依赖数据开展工作，这就对从业人员的数据处理能力有了更高的要求。工作中不但要求能够处理数据，更需要了解数据的本质，分析数据并能够理解数据所反映的现实意义，最终帮助我们做出正确的决策。</p> </body> </html>
本例样式中，在h1元素内容前使用content属性添加了【符号，内容之后添加了】符号。p元素中，第一行显示为蓝色，第一个字符显示为2倍字体和红色。页面显示效果如下图所示。
使用表格时，可能需要交替显示行的背景色，此时使用nth-child选择器就可以很方便的实现，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> tr:nth-child(odd) { background-color: lightblue; } tr:nth-child(even) { background-color: lightyellow; } </style> </head> <body> <table> <tr><th>姓名</th><th>性别</th><th>语文</th><th>数学</th><th>英语</th></tr> <tr><td>张三</td><td>女</td><td>79</td><td>78</td><td>91</td></tr> <tr><td>刘一兵</td><td>男</td><td>85</td><td>81</td><td>72</td></tr> <tr><td>李四</td><td>女</td><td>95</td><td>91</td><td>85</td></tr> <tr><td>王二</td><td>男</td><td>85</td><td>61</td><td>75</td></tr> <tr><td>刘一兵</td><td>男</td><td>65</td><td>59</td><td>66</td></tr> </table> </body> </html>
本例，在nth-child()选择器中，使用odd关键字表示奇数行，设置行（tr元素）的背景色为浅蓝色（lightblue）；使用even关键字表示偶数行，设置行（tr元素）的背景色为浅黄色（lightyellow）。页面显示效果如下图所示。
本例，将nth-child选择器修改为nth-of-type选择器，可以得到相同的结果。
此外，使用这两个选择器时，还可以通过公式指定交替的规则，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p:nth-child(3n+1) { color: red; } </style> </head> <body> <p>段落一</p> <p>段落二</p> <p>段落三</p> <p>段落四</p> <p>段落五</p> <p>段落五</p> </body> </html>
本例，nth-child选择器中使用了公式3n+1，这里的n表示0、1、2、……数列，这样计算的结果就是1、4、7、……，即第1、4、7、……个p元素会显示为红色。
通配符选择器使用星号（*）表示，用于匹配所有元素，实际应用中要尽可能缩小使用范围，以免带来性能问题，或者不易查找的样式问题。
not选择器可以排除指定的元素，如下面的代码显示了通配符和not选择器的应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div * {color:blue;} p:not(#p2) { color: red; } </style> </head> <body> <div> <h1>标题A</h1> <p>段落一</p> <p id="p2">段落二</p> <p>段落三</p> </div> </body> </html>
样式中，首先使用通配符（*）设置div下的所有元素显示为蓝色；然后通过not选择器设置p元素中除了id为p2的元素，其他的p元素都显示红色。页面显示效果如下图所示。
请注意，not选择器中只能使用简单的选择器，如元素选择器、ID选择器、类选择器和伪类选择器。