CSS-选择器
2019-07-02 本文已影响0人
fossumjonas
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--====================1.元素选择器的实例=================-->
<!--选择器 - 选中标签
选择器{属性名1:属性值1;属性名2:属性值2...}
1. 元素选择器/标签选择器
直接将标签名作为选择器, 选中所有指定的标签;
例如: a{} - 选中所有的a标签
div{} - 选中所有的div标签
-->
<!--<style type="text/css">
p{
color: salmon;
}
</style>
<p>我是段落1</p>
<h1>我是标题1</h1>
<a href="">我是超链接1</a>
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<a href="">我是超链接2</a>
</div>
<hr />-->
<!--====================id选择器实例============-->
<!--
2.id选择器
在标签的id属性值前加#作为一个选择器，选中id值是指定值的标签。（注意:一个html中id必须是唯一）
例如: #a{} - 选中id值为'a'的标签
-->
<!--<style type="text/css">
#a{
background-color: lightgreen
}
</style>
<p>我是段落1</p>
<h1>我是标题1</h1>
<a href="">我是超链接1</a>
<p id="a">我是段落2</p>
<div>
<p>我是段落3</p>
<a href="">我是超链接2</a>
</div>-->
<!--====================3.class选择器的实例=================-->
<!--
3.class选择器
在标签的class属性值前加.作为选择器, 选择所有class属性值是指定值的标签
例如: .a{} - 选中class属性是a的所有标签
注意: 一个html中多个标签可以拥有一个class值； 同一个标签可以同时拥有多个class值（多个class值之间用空格隔开）
-->
<!--<style type="text/css">
.p1{
color: red;
}
.p2{
background-color: yellow;
}
</style>
<p class="p1 p2">我是段落1</p>
<h1>我是标题1</h1>
<a href="" class="p1">我是超链接1</a>
<p class="p2">我是段落2</p>
<div>
<p class="p1">我是段落3</p>
<a class="p2" href="">我是超链接2</a>
</div>-->
<!--====================4.群组选择器=================-->
<!--
4.群组选择器
将多个选择器用逗号隔开, 选中每个独立选择选中的所有标签
例如: a,p{} - 选中所有的a标签和p标签
a,.c1{} - 选中所有的a标签和所有class值是c1的标签
-->
<!--<style type="text/css">
a,.p1,h1{
color: darkgreen;
}
</style>
<p class="p1 p2">我是段落1</p>
<h1>我是标题1</h1>
<a href="" class="p1">我是超链接1</a>
<p class="p2">我是段落2</p>
<div>
<p class="p1">我是段落3</p>
<a class="p2" href="">我是超链接2</a>
</div>-->
<!--====================5.后代选择器=================-->
<!--
5.包含选择器(包含关系中不一定是直接包含，间接包含也能选中)
将多个选择器用空格隔开, 从前往后一层一层的找，找到最后一个选择器选中的标签
例如: div #d1 p{} - 选中所有在div标签中的id是d1的标签中p标签
6.包含选择器(包含关系必须是直接包含)
将多个选择器用>隔开， 从前往后一层一层的找，找到最后一个选择器选中的标签
-->
<!--<style type="text/css">
div p{
color: red;
}
div>p{
background-color: yellow;
}
</style>
<p>我是段落1</p>
<div id="">
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<span id="">
<p>我是段落4</p>
</span>
</div>
</div>
<span id="">
<p>我是段落5</p>
</span>-->
<!--===================6. 统配符==================-->
<!--
6.通配符:直接将*作为选择器, 选中当前页面中所有标签
-->
<!--<style type="text/css">
*{
color: deeppink;
margin: 0;
padding: 0;
}
</style>
<p>我是段落1</p>
<a href="">我是超链接</a>
<h1>我是标题1</h1>
<p>我是段落2</p>
<h2>我是标题2</h2>
<input type="" name="" id="" value="" />-->
<!--================7.选择器的权重================
权重值越大优先级越高, 但是内联样式表的优先级永远是最高的
元素选择器: 0001(1)
class选择器: 0010(2)
id选择器: 0100(4)
群组选择器：看单独每个选择器的权重
包含选择器: 每个选择器的权重和
-->
<style type="text/css">
.c2{
color: blue;
}
.c1{
color: red;
background-color: chartreuse;
width: 200px;
height: 100px;
}
/*#d2 #d1 #p1{
color: purple;
}*/
</style>
<div id="d2">
<div id="d1" class="d1">
<p id="p1" class="c1 c2">我是段落</p>
</div>
</div>
</body>
</html>
