CSS选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
CSS选择器有三种:
1、标签选择器:标签选择器会选中这个页面上所有的这个标签的元素
2、类选择器 class:类选择器的格式: .class的名称{}
好处:可以选择多个标签归类,是同一个class,可以复用
3、id 选择器 格式: #id名称{ } 不遵循就近原则 id全局唯一
id选择器> 类选择器> 标签选择器
标签选择器:
<style>
p{
color:blue;
}
h2{
color:red;
background: green;
}
</style>
<p>标签选择器:标签选择器会选中这个页面上所有的这个标签的元素</p>
<h2>标签选择器1</h2>
<h2>类选择器2</h2>
<h1>id选择器3</h1>
类选择器:
<style>
.biaoqian{
color:red;
}
.class{
color: blue;
}
.style1{
color:green;
}
.style2{
color: yellow
}
</style>
<body>
<p class="biaoqian">标签选择器:标签选择器会选中这个页面上所有的这个标签的元素</p>
<p class="class">类选择器 class:类选择器的格式: .class的名称{}
好处:可以选择多个标签归类,是同一个class,可以复用</p>
<h2 class="style1">标签选择器1</h2>
<h2 class="style1">类选择器2</h2>
<h1 class="style2">id选择器3</h1>
</body>
ID选择器:
<style>
#biaoqianid{
color:red;
}
#classid{
color: blue;
}
#style1{
color:green;
}
#style2{
color: yellow
}
#id1{
color:pink;
}
</style>
</head>
<body>
<p id="biaoqianid">标签选择器:标签选择器会选中这个页面上所有的这个标签的元素</p>
<p id="classid">类选择器 class:类选择器的格式: .class的名称{}
好处:可以选择多个标签归类,是同一个class,可以复用</p>
<p id="id1">id 选择器 格式: #id名称{ }</p>
<h2 id="style1">标签选择器1</h2>
<h2 id="style2">类选择器2</h2>
<h1 class="style2">id选择器3</h1>