4.前端css必须懂的选择器的10种使用方法
2020-02-17 本文已影响0人
欣博客
01.元素选择器
通过元素选择器可以选则页面中的所有指定元素
用法: 标签名 {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
p{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<h1>悯农</h1>
<p>锄禾日当午</p>
</body>
</html>
预览效果:
image.png
02.id选择器
通过元素的id属性值选中唯一的一个元素
用法：#id属性值 {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#p1{
font-size: 20px;
}
</style>
</head>
<body>
<p id="p1">锄禾日当午</p>
</body>
</html>
预览效果:
image.png
03.类选择器
通过元素的class属性值选中一组元素
1.我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复
2.拥有相同class属性值的元素，我们说他们是一组元素
3.可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
用法： .class属性值{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.p2{
color: red;
}
.hello{
font-size: 50px;
}
</style>
</head>
<body>
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>
预览效果:
image.png
04.选择器分组(并集选择器)
通过选择器分组可以同时选中多个选择器对应的元素
用法：选择器1,选择器2,选择器N{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器分组(并集选择器)</title>
<style type="text/css">
#p1 , .p2 , h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
</body>
</html>
预览效果:
image.png
05.通配选择器
他可以用来选中页面中的所有的元素
用法：*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配选择器</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
</body>
</html>
预览效果:
image.png
06.复合选择器（交集选择器）
可以选中同时满足多个选择器的元素
用法：选择器1选择器2选择器N{}
对于id选择器来说，不建议使用复合选择器
为拥有class p3 span元素设置一个背景颜色为黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器（交集选择器）</title>
<style type="text/css">
span.p3{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
image.png
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
07.后代元素选择器
选中指定元素的指定后代元素
用法： 祖先元素 后代元素{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代元素选择器</title>
<style type="text/css">
#d1 span{
color: greenyellow;
}
/*
* 选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 50px;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body中的span元素</span>
</div>
</body>
</html>
image.png
08.子元素选择器
选中指定父元素的指定子元素
用法：父元素 > 子元素
注意: IE6及以下的浏览器不支持子元素选择器
为div的子元素span设置一个背景颜色为黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代元素选择器</title>
<style type="text/css">
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body中的span元素</span>
</div>
</body>
</html>
image.png
09.属性选择器
可以根据元素中的属性或属性值来选取指定元素
用法：
- [属性名] 选取含有指定属性的元素
- [属性名="属性值"] 选取含有指定属性值的元素
- [属性名^="属性值"] 选取属性值以指定内容开头的元素
- [属性名$="属性值"] 选取属性值以指定内容结尾的元素
- [属性名*="属性值"] 选取属性值以包含指定内容的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*
* 为所有具有title属性的p元素，设置一个背景颜色为黄色
* 属性选择器
* - 作用：可以根据元素中的属性或属性值来选取指定元素
* - 语法：
* [属性名] 选取含有指定属性的元素
* [属性名="属性值"] 选取含有指定属性值的元素
* [属性名^="属性值"] 选取属性值以指定内容开头的元素
* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
* [属性名*="属性值"] 选取属性值以包含指定内容的元素
*/
p[title]{
font-size: 40px;
}
/*
* 为title属性值是hello的元素设置一个背景颜色为黄色
*/
p[title="hello"]{
background-color: red;
}
/*
* 为title属性值以ab开头的元素设置一个背景颜色为黄色
*/
p[title^="ab"]{
color:green;
}
/*
* 为title属性值以c结尾的元素设置一个背景颜色
*/
p[title$="c"]{
font-weight: bold;
}
/*
* 为title属性值包含e的元素设置背景颜色
*/
p[title*="e"]{
background-color: blue;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abggggcd">我是一个段落</p>
<p title="ac">我是一个段落</p>
<p title="jkljlkejkljlklj">我是一个段落</p>
</body>
</html>
预览效果:
image.png
10.兄弟元素选择器
1.后一个兄弟元素选择器
可以选中一个元素后紧挨着的指定的兄弟元素
用法法：前一个 + 后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span + p{
background-color: green;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
预览效果:
image.png
2.选中后边的所有兄弟元素
用法法：前一个 ~ 后边所有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
预览效果:
image.png
