直接引用HTML标签名称，也称为类型选择器。在定制网页样式时，可利用标签选择器设计网页元素默认显示效果，或统一常用元素的基本样式。
<style> body { width: 100%; height: 100%; overflow: hidden; } </style>能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。 类选择器以一个点（.）前缀开头，然后跟随一个自定义的类名。 应用类样式可以使用class属性来实现，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称即可。
<style> .box{ width: 500px; height: 500px; margin: 200px auto; } </style> <div class="box"> 我是一个类名叫box的div。 </div>一般通过ID选择器来定义HTML框架结构的布局效果。 ID选择器以井号（#）作为前缀，然后是一个自定义的ID名。 应用ID选择器可以使用id属性来实现，只要在标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。 采用这种方法能提高该样式的优先级。
<style> #wrap{ width: 500px; height: 500px; background-color: brown; } </style> <div id="wrap"> 我是一个ID名为wrap的div。 </div>如果HTML所有元素都需要定义相同的样式，不妨使用通配选择器。 通配选择器是固定的，用星号（*）表示。
<style> *{ padding: 0; margin: 0; } </style>一般用来清除初始样式
把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。
包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，后面的选择器表示被包含的选择器。
<style> div button {定义div下所有名为button的子标签} </style> <div> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> </div>子选择器是指定父元素所包含的子元素。子选择器使用尖角号（>）表示。
<style> div > button {定义div下第一个名为button的子标签} </style> <div> <button>按钮</button> </div>相邻选择器通过加号（+）分隔符进行定义。其基本结构是第一个选择器指定前面相邻元素，后面的选择器指定相邻。前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用。
<style type="text/css"> h1 + p { color: red; } </style> <body> <h1>这是标题</h1> <p>这是段落</p> <p>这是段落</p> </body>兄弟选择器通过波浪号（~）分隔符进行定义。其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。前后选择符的关系是兄弟关系。即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用。 兄弟选择器能够选择前置元素后的所有匹配元素，而相邻选择器只能选择前置元素后相邻的一个元素。
<style type="text/css"> h1 ~ p { color: red; } </style> <body> <h1>这是标题</h1> <p>这是段落</p> <p>这是段落</p> <p>这是段落</p> <p>这是段落</p> </body>分组选择器通过逗号（，）分隔符进行定义。其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素都选取出来。 通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放在一起，然后通过逗号链接这些选择器，减少代码的书写量。
<style> div,ul { font-size: 40px; text-align: center; } </style> <div>123</div> <ul>456</ul>·E[attr]：只使用了属性名，但没有确定任何属性值。 ·E[attr=”value”]：指定了属性名，并指定了该属性的属性值。 ·E[attr~=”value”]：指定了属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写。 ·E[attr^=”value”]：指定了属性名，并且具有属性值，属性值是以value开头的。 ·E[attr$=”value”]：指定了属性名，并且具有属性值，属性值是以value结束的。 ·E[attr*=”value”]：指定了属性名，并且具有属性值，属性值中包含了value。 ·E[attr|=”value”]：指定了属性名，并且属性值是value或者以value-开头的所有元素。
伪选择器包括伪类和伪对象选择器，伪选择器以冒号（:）作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名。冒号前后没有空格，否则将错认为类选择器。 伪元素使用两个冒号（::）作为前缀标识符。
:link：未访问的链接 :visited：已访问的链接 :hover：鼠标移动到链接上时的样式效果。 :active：选定的链接，即点击时发生的样式，当松开鼠标左键该动作也就完成了。 :focus： 元素成为焦点时的样式效果，经常用在表单元素上。
顺序：动态伪类按照link-visited-hover-active的顺序设置对应的样式，才会有效
<style> #wrap{ width: 500px; height: 500px; background-color: pink; } #wrap:link{ background-color: blue; } #wrap:visited{ background-color: red; } #wrap:hover{ background-color: yellow; } #wrap:active{ background-color: green; } </style> <div id="wrap"> 我是一个ID名为wrap的div。 </div>利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和ID属性的定义，使得文档更加简洁。
:fist-child：选择某个元素的第一个子元素。 :last-child：选择某个元素的最后一个子元素。 :nth-child(n)：选择某个元素的n个特定的子元素。 :nth-last-child(n)：选择某个元素的倒数n个特定的子元素。 :fist-of-type：选择一个上级元素下的第一个同类子元素。 :last-of-type：选择一个上级元素的最后一个同类子元素。 :nth-of-type(n)：选择一个上级元素下的第n个同类子元素。 :nth-last-of-type(n)：选择一个上级元素下倒数第n个子元素。 :only-child：选择的元素是它的父元素的唯一一个子元素。 :only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素。 :empty：选择的元素里面没有任何内容。 :not：选择器匹配非指定元素/选择器的每个元素。
<style type="text/css"> h1:fist-child { color: red; } </style> <body> <h1>这是标题</h1> <p>这是段落</p> <p>这是段落</p> <p>这是段落</p> <p>这是段落</p> </body>:not()表示否定选择器，即排除或者过滤掉特定元素。可以帮助用户定诶不匹配该选择器的元素，实现匹配操作后的二次过滤。
<style type="text/css"> p:not(.wis) { color: red; } </style> <body> <h1>这是标题</h1> <p>这是段落</p> <p classs="wis">这是段落</p> <p>这是段落</p> <p>这是段落</p> </body>状态伪类主要针对表单进行设计的，表单是UI设计的灵魂，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。 :enabled：表示匹配指定范围内所有可用UI元素。在网页中，UI元素一般是指包含在form元素内的表单元素。 :disabled：表示匹配指定范围内所有不可用UI元素。 :checked：表示匹配指定范围内所有可用UI元素。
E:target：表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能够有效。
::before：在元素的内容之前插入内容。 ::after：在元素的内容之后插入内容。
选择器在后面的学习中是最基础也是非常重要的部分，当你能熟练运用不同选择器时，你的样式写起来会更加得心应手
