1.标签选择器
p div h1 span em i 这是标签作为选择器，使用时直接写标签名即可以“标签{}形式”。
p {
color: pink;
}
div {
color: purple;
}
</style>
</head>
<body>
<p>白展堂</p>
<p>吕秀才</p>
<p>李大嘴</p>
<div>鸣人</div>
<div>佐助</div>
<div>卡卡西</div>
</body>
2.类选择器
类选择器在标签后跟着class属性并且命名，使用时采用".类名{}"的形式。
<style>
.mingren { /* 声明类样式 */
color: orange;
}
.zuozhu {
color: blue;
}
</style>
</head>
<body>
<div class="mingren">鸣人</div> <!-- 引用类样式 class 单词 类 的意思 -->
<div class="zuozhu">佐助</div>
<div>卡卡西</div>
</body>
3.多类名选择器
多类名选择器就是可以在class中定义多个类名，在样式中可以分别实现该属性。
<style>
.font20 {
font-size: 20px;
}
.font14 {
font-size: 14px;
}
.pink {
color: pink;
}
.fontWeight {
font-weight: bold;
}
</style>
</head>
<body>
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
</body>
4.ID选择器
id选择器就是在标签后定义id属性，与类选择器相似，使用时采用“#id名{}”的形式。
<style>
.tou {
color: red;
}
#big { /* id选择器 和 类选择器 结合记忆更好 */
color: pink;
}
</style>
</head>
<body>
<div id="big">熊大</div>
<div>熊二</div>
<div class="tou">光头强</div>
</body>
注意：类选择器是可以重复多次使用的，类似于人名。id 选择器类似身份证号是唯一的，只允许使用一次。5.通配符选择器所有标签都为一种样式,使用时以“*{}”的形式。
<style>
* { /* * 代表所有选择器 */
color: pink;
}
</style>
</head>
<body>
<p>我是段落</p>
<div>我是段落</div>
<span>我是段落</span>
<em>我是段落</em>
<strong>我是段落</strong>
<h1>我是段落</h1>
</body>
6.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。(1)链接伪类选择器:link /* 未访问的链接 /:visited / 已访问的链接 /:hover / 鼠标移动到链接上 /:active / 选定的链接 */
<style>
a:link { /* 未访问的链接 */
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited { /* 已访问的链接 我们已经点击过一次的状态*/
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover { /* 鼠标移动到链接上 */
font-size: 16px;
color: red;
font-weight: 700;
}
a:active { /* 选定的链接 当我们点击别松开鼠标 显示的状态*/
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
伪类选择器其中的链接伪类选择器主要针对于a
<div>
<a href="#" >秒杀</a>
<a href="#" >闪购</a>
</div>
</body>
链接伪类选择器的简写方式：
<style>
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
</style>
</head>
<body>
<a href="#">秒杀</a>
</body>
(2)结构伪类选择器:first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式代码块1：
<style>
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
代码块2：
<style>
/* li:nth-child(odd) { 可以选择所有的 odd奇数 的孩子标签
color: pink;
}
li:nth-child(even) { 可以选择所有的 even 偶数 的孩子标签
color: deeppink;
} */
li:nth-child(3n) { /* n 0 2n 2n是 选择 0 2.4.6.8..的孩子 3n 0.3.6.9的孩子元素 */
color: pink;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
代码块3：
<style>
/* li:nth-child(even) { 从第一个孩子开始数的
color: pink;
} */
li:nth-last-child(even) { /* nth-last-child 从最后一个孩子开始数 倒数 */
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
<li>第八个孩子</li>
</ul>
</body>
（3）目标伪类选择器:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
<style>
:target {
color: red;
font-size: 30px;
}
</style></head><body><h2>目录</h2><hr />
1 早年经历<br />
<a href="#movie">2 演艺经历</a><br />
<a href="#live">3 个人生活</a><br />
4 主要作品<br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br /><h3>早年经历</h3><hr />
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18] 。刘德华从黄大仙天主教小学毕业后升读可立中学[19] 。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20] 。<h3 id="movie">演艺经历</h3><hr />
1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；
</body>
网友评论