选择器是用来选中指定标签来添加样式
常用的选择器:
1.id选择器: 在标签的id属性值前加#作为一个选择器,选中id属性是指定值的标签。(注意:同一个id值在当前页面中只有一个标签)
#p1{} - 选中id是p1的标签
2.类选择器:在标签的class属性值前加.作为一个选择器,选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意:同一个class可以作用于不同的标签,同一个标签可以同时拥有多个class值(有多个的时候中间用空格隔开)
3.元素选择器:直接将标签名作为选择器,选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签
4.通配符:将*作为选择器, 选中当前页面中的所有的标签
5.群组选择器:将多个其他的选择器有逗号隔开作为一个选择器,选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签,以及id是p1的标签
a,img{} - 选中所有的图片和超链接
6.后代选择器:将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)
7.子代选择器:将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ============1.id选择器 ============-->
<!-- <h1 id="title1">id选择器</h1>
<p id="p1">我是段落1</p>
<p>我是段落2</p>
<style type="text/css">
#p1{
color: #FF69B4;
font-size: 25px;
}
#title1{
color: #8B008B;
width: 200px;
background-color: yellow;
}
</style> -->
<!-- ============2.class和元素选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
/* 元素选择器 */
p{
color: red;
}
/* class选择器 */
.c1{
background-color: seagreen;
}
.c2{
font-size: 25px;
}
/* 通配符 */
*{
border: 1px solid firebrick;
}
</style> -->
<!-- ============3.群组选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
p,a{
color: red;
}
h1,.c2{
background-color: yellow;
}
</style> -->
<!-- ============4.后代选择器 ============-->
<p>我是段落1</p>
<div id="">
<p>我是段落2</p>
<span>
<p>我是段落3</p>
</span>
<a href="">我是超链接1</a>
</div>
<div id="">
<p>我是段落4</p>
<div id="">
<p>我是段落5</p>
</div>
</div>
<style type="text/css">
/* 后代选择器 */
div p{
color: red;
}
/* 子代选择器 */
div>p{
background-color: skyblue;
}
</style>
伪类选择器
- 什么是伪类选择器
普通选择器选中的是标签(选中一个标签的所有状态)
伪类选择器选中的是标签的状态
语法:
选择标签的选择器:伪类选择器{}
常用的伪类选择器:
1)link - 链接未被成功访问对应的状态(只针对超链接有效)
2) visited - 链接已经被成功访问对应的状态(只针对超链接有效)
3) hover - 鼠标悬停在标签上对应的状态(针对所有可见标签有效)
4) active - 鼠标按住标签不放对应的状态(针对所有可见标签有效)
–>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: #0000FF;
font-size: 30px;
}
a:active{
color: #FF69B4;
}
</style>
<div id="div1" style="width: 100px; height: 100px;"></div>
<style type="text/css">
#div1{
background-color: #008000;
}
#div1:hover{
background-color: aqua;
}
#div1:active{
background-color: #8B008B;
}
</style>