选择器的分类
1、通配符选择器 *
权重:0
符号:*
用法:*{}
<style>
*{
background:red;
}
</style>
2、标签选择器
权重:10
命名:标签内通过class
=“name”
用法:.name
{}
<style>
.p2{
background:green;
}
</style>
<body>
<p>p1</p>
<p class="p2">p2</p>
</body>
3、属性选择器
权重:10
用法:
- [属性]{}(选中该属性对应的所有标签)
- [属性=“属性值”],选中对应属性值的标签
<style>
[index]{
background:darkorange;
}
[index="a1"]{
background:darkorchid;
}
</style>
4、id选择器
权重:100
用法:
- 在开始标签里添加
id
=“name” style
内使用#name{}
进行选择使用
注意:id选择器和class选择器不同,例如在页面中写了一个id=“name1”,那么这个页面中不允许出现第二个相同的,这个是规定。id=“name1” 是唯一的。
<style>
#p1{
background:green;
}
</style>
<body>
<p id="p1" class="p1">段落1</p>
</body>
5、子选择器
权重:组合的选择器之和
连接符:>
(权重0)
含义:父子关系,例如下面的div>h1 代表选中div里面的儿子元素,并且是h1的这一类标签
<style>
div>h1{
background:green;
}
</style>
<body>
<div class="main">
<p>p1</p>
<h1>h1</h1>
<div>
<span>span</span>
</div>
</div>
</body>
6、后代选择器
权重:组合的选择器权重之和
连接符: 空格
含义:后代关系,即无论是儿子
还是孙子
,只要是后代都可以被选择。
<style>
div span{
background:green;
}
</style>
<body>
<div class="main">
<div>
<span>span</span>
</div>
<span>span</span>
</div>
</body>
7、分组选择器
权重:组合的选择器之和
连接符:逗号,
含义:将相同的代码提取出来,减少冗余
<style>
.box1>p1,.box2{
color:darkorange;
width:100px;
height:100px;
background:green;
}
</style>
<body>
<div class="box1">
<p>p1</p>
</div>
<p class="box2">box2</p>
</body>
8、交集选择器
权重:组合的选择器之和
符号:无
含义:多个选择器组合而成
<style>
.box1.current{
background:green;
}
</style>
<body>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>
</body
9、相邻兄弟选择器
权重:组合的选择器之和
链接符号:+
含义:以下面为例,h1+p 代表的是选中与h1相邻的p标签(注意:向下寻找,下面代码中第一个p标签并不能被选中)
<style>
h1+p{
background:green;
}
</style>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</body>
10、通用兄弟选择器
权重:组合的选择器之和
连接符号:~
含义:以下面为例,h1~p 代表的是选中h1下面所有的兄弟p标签(注意:向下寻找,下面代码中第一个p标签并不能被选中)
<style>
h1~p{
background:green;
}
</style>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</body>
11、伪类选择器
a标签的四种状态,它这四种状态有一定的顺序,在网络上被称为“爱恨原则”。 重点记住:hover 即可,其它几个不兼容。
<style>
a{
font-weight: bold;
font-size:100px;
}
/* 默认链接的文字颜色 */
a:link{
color:green;
}
/* 访问过后的文字颜色 */
a:visited{
color:gold;
}
/* 鼠标滑上 */
a:hover{
color:hotpink;
}
/* 点击链接时候的 */
a:active{
color:darkcyan;
}
</style>