选择器(一)
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>