CSS练习 —— css选择器
CSS选择器就是 通过选择器来 定位 你要控制的样式的部分，分为以下几种
1.HTML选择符（标签选择器）
就是把HTML标签作为选择符使用
如 p {.......} 网页中所有的P标签采用此样式
h2 {........} 网页中所有h2标签采用此样式
2.class类选择器 （使用 . 将自定义名{类名} 来定义的选择器 ）
使用语法： <html 标签 class=“类名”></html标签>
.类名{
color=xxx;
font-size=xxx;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器练习</title>
<style type="text/css">
.name1{
font-size: 15px;
color: red;
}
.name2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>
这是标题一
<p class="name1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>
</h1>
<h2 class="name2">
美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
</h2>
</body>
</html>
3.ID选择器
定义： #id 名 { 样式 }
使用：<html 标签 id="id名" >....</htmL标签>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器练习</title>
<style type="text/css">
#p1{
font-size: 40px;
color: #999;
}
#p2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>
这是标题一
<p id="p1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>
</h1>
<h2 id="p2">
美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
</h2>
</body>
</html>
特点：ID是唯一的，如果id不唯一的话，也不会报错
4.通配符选择器
语法：
*{ key : value ; key : value }
功能：对所有HTML标签起作用（一般用于页面的初始化工作，统一字体，边框，内外边距）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器练习</title>
<style type="text/css">
*{
color: red;
}
#p1{
font-size: 40px;
}
#p2{
font-size: 20px;
}
</style>
</head>
<body>
<h1>
这是标题一
<p id="p1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>
</h1>
<h2 id="p2">
美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
</h2>
</body>
</html>
特点：通配符选择器一般写到样式的最前面
5.关联选择器（只控制标签中的一部分）
等等等等，还有很多的标签选择器 ~ ~ ~
浙公网安备 33010602011771号