标签选择器
标签选择器：按标签名称分类
基本语法格式：
标签名{属性1：属性1;属性2：属性2；}或
元素名{属性1：属性1；属性2：属性2；}
<style type="text/css">p {color: #00f;font-size:14px;}</style>
<body><p>选择器</p><p>选择器</p><p>选择器</p></body>
类选择器
基本语法格式：
.类名{属性1：属性值；属性2：属性值；}
标签调用时用class"类名"(class 类 ）
.o { /*声明类样式*/color: orange}.n {color: blue}
<h1 class="o">类选择器</h1><!-- 引用类样式 class 单词 类 的意思 --><h1 class="n">类选择器</h1>
注意：类名前加"."
案例：<head><meta charset="UTF-8"><title>Document</title><style type="text/css">span {font-size: 100px;}.blue {color: blue}.red {color: red}.orange {color: orange}.green {color: green}</style></head><body><span class="blue">G</span><span class="red">O</span><span class="orange">O</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body>
多类名选择器
例如：
<style type="text/css">.font20 {font-size: 20px ;}.font14 {font-size: 14px;}.blue {color: blue;}.fontweight {font-weight: bold;}</style>
<div class="font20 blue">司马懿</div><div class="font20">司马炎</div><div class="font14 blue fontweight">司马昭</div><div class="font14">曹操</div><div class="font14">曹丕</div>
在例子中class=" "内可以放多个
id选择器
例：
#big {color:pink}
<div id="big">花</div>
id选择器与类选择器可结合记忆
id选择器： #名
id=“名”
类选择器：.名
class=“名”
注意：一般规定id选择器只能用一次，类选择器可以用多次(可能有的浏览器兼容性好id可以用不只一次但最好还是按规定来）
id选择器与类选择器的区别在使用次数上
通配符选择器
例：
* {color: purple;}
<p>1</p><p>1</p><p>1</p><h1>1</h1><h1>1</h1><h1>1</h1><ul><li>1</li><li>1</li></ul>
通配符选择器用”*“表示，它是所有选择器中作用范围最广的，能匹配网页中所有的元素
基本语法格式
*{属性1：属性值1; 属性2：属性值2；}
*指的是所有的标签
伪类选择器
用于向某些选择器添加特殊的效果
1个点.demo{} 为类选择器
2个点（冒号）：link{} 为伪类选择器
#####链接伪类选择器
:link （为未访问的链接）
:visited （已访问的链接）
:hover （鼠标移动到链接上）
:active （选定的链接）
例：
<style>a:link { /*未访问的链接*/font-size: 14px; color: gray; /*gray*/font-weight: 700;/*bold*/}a:visited { /*已访问的链接 我们已经点击过一次的状态*/font-size: 14px; color: orange;font-weight:bold;/*700*/}a:hover { /*鼠标移动到链接上*/font-size: 14px; color: red;font-weight: 700;/*700*/}a:active{/*选定的链接 当我们点击别松开鼠标显示的状态*/font-size: 14px; color: green;font-weight: 700; }</style>
<body><div><a href="#">点击</a> <a href="#">点击</a> </div></body>
注意：写的时候它们顺序不可改变，:link和:hover比较常用
一般如下书写(链接伪类的简写方式）：
a { /*a是标签选择器 所有的链接*/font-weight: bold;font-size: 16px; color:gray;}a:hover{ /* hover链接伪类选择器 鼠标经过*/color: red; /*鼠标经过的时候由原来的灰色变为红色*/}
<div> <a href="#">秒杀</a></div>
结构（位置）伪类选择器
:first-child 选取属于其父元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child 匹配属于其父元素的第n个元素，不论元素的类型even偶数odd奇数n从0开始
:nth-last选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式
注意：:nth-child后跟（）来填内容如下：
li:nth-child(odd){ /*可以选择所有的odd奇数的孩子标签*/color: skyblue}li:nth-child(even){ /*可以选择所有的even偶数的孩子标签*/color: blue}
<ul><li>1孩子</li><li>2孩子</li><li>3孩子</li><li>4孩子</li><li>5孩子</li></ul>
