day06
CSS规则由两部分构成：选择器，声明
CSS选择器
标签选择器
以HTML标签作为选择器
类选择器
为HTML标签添加class属性
通过类选择器来为具有此class属性的元素设置CSS样式
可对不同类型元素的同一个名称的类选择器设置不同的样式规则：p.red{} and h1.red{}
同一个元素可以设置多个类，之间有空格隔开
ID选择器
为HTML标签添加ID属性
通过ID选择器来为具有此ID的元素设置CSS规则
全局选择器
所有标签设置样式
群组选择器
集体统一设置样式
后代选择器
使用后代选择器，之间用空格隔开
class与id的值是区分大小写的
伪类选择器
伪类选择器定义特殊状态下的样式
无法用标签，id，class及其它属性实现
链接伪类
:link未访问状态
:visited已访问状态
:hover鼠标悬浮状态
:active激活状态
注意写的顺序：:link>:visited>:hover>:active
案例：
css_selectors.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css选择器</title> ???<style type="text/css"> ???????/*h1,#three,p.special{font-size: 50px} ???????p{color: red;} ???????.special{color: blue;} ???????.one{text-decoration: underline;} ???????#two{color:green;} ???????*{background-color: black;}*/ ???????.classred{color: red;} ???????p em{color: blue;} ???????h1.special em{color: orange;} ???????em{color: :red;} ???</style></head><body> ???<h1 class="special"><em>CSS</em>是什么</h1> ???<p><em>CSS</em>层叠样式</p> ???<p class="special one">用于定义HTML内容再浏览器中的显示样式</p> ???<p><em>CSS</em>样式由选择器和声明组成</p> ???<div> ???????<h1 id="two"><em>CSS</em>使用方法</h1> ???????<ul id="three"> ???????????<li>行内样式</li> ???????????<li>内部样式</li> ???????????<li>外部样式</li> ???????????<li>导入式</li> ???????</ul> ???????<h1><em>CSS</em>选择器</h1> ???????<ul> ???????????<li>标签选择器</li> ???????????<li>ID选择器</li> ???????????<li>类选择器</li> ???????????<li>后代选择器</li> ???????</ul> ???</div></body></html>css_selectors1.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css选择器</title> ???<style type="text/css"> ???????/*a:link{color: red;} ???????a:visited{color: black;} ???????a:hover{color: green;} ???????a:active{color: gray;}*/ ???????p.a:link{color: #123123;} ???????p.a:visited{color: #213543;} ???????p.a:hover{color: #64f433} ???????p.a:active{color: red;} ???????p:hover{font-size: 50px;} ???????p:active{font-size: 30px;} ???</style></head><body> ???<a href="http://www.baidu.com" target="_blank">百度</a> ???<br> ???<p><a href="http://www.baidu.com" target="_blank">百度</a></p> ???<p>wefdfadf</p></body></html>02CSS选择器06
原文地址：https://www.cnblogs.com/shink1117/p/8413793.html