五千字长文-css3选择器基础最详解（讲述其核心特点）（下次更新的是选择器高级）
五千字长文-css3选择器基础最详解（讲述其核心特点）（下次更新的是选择器高级）
贵哥的编程之路
发布于 2020-11-03 15:25:27
发布于 2020-11-03 15:25:27
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-标签选择器</title>
<style>
p{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>我是标题</h1>
</body>
</html>注意点: 特点:所有类型的 多深都能找到 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…) 格式: 标签名称{ 属性:值; }
效果图：
在这里插入图片描述
id选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-id选择器</title>
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
</head>
<body>
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>注意点; 特点;在js中id是具有唯一性的. #在前面添加 命名规则符合变量的规则 不能以html标签的名称作为id名 格式: #id名称{ 属性:值; }
在这里插入图片描述
类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-类选择器</title>
<style>
.pp{
color: red;
}
.ppp{
color: green;
}
.pppp{
color: blue;
}
.ppppp{
color: yellow;
}
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style>
</head>
<body>
<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>
<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>
</body>
</html>注意点; 特点;类名具有重复性 .在css前面加 一个标签可以绑定多个类名 1.什么是类选择器? 作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式: .类名{ 属性:值; }
效果：
在这里插入图片描述
类与id的混合使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-id选择器和class选择器</title>
<style>
/*
.para1{
color: red;
font-size: 30px;
}
.para2{
font-size: 30px;
text-decoration: underline;
}
.para3{
color: red;
text-decoration: underline;
}
*/
.colorR{
color: red;
}
.size30{
font-size: 30px;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<!--
<p class="para1">第一段文字</p>
<p class="para2">第二段文字</p>
<p class="para3">第三段文字</p>
-->
<p class="colorR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="colorR line">第三段文字</p>
</body>
</html>注意点; 特点;区别：id在js中不能重复,类在js中可以重复 一个HTML标签只能绑定一个id名称。一个HTML标签可以绑定多个class名称 id以#开头，类以.开头.
效果：
在这里插入图片描述
后代选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-后代选择器</title>
<style>
/*
div p{
color: red;
}
*/
/*
#identity p{
color: red;
}
*/
/*
.para p{
color: blue;
}
*/
/*
#identity #iii{
color: skyblue;
}
*/
/*
#identity .ccc{
color: purple;
}
*/
div ul li p{
color: red;
}
</style>
</head>
<body>
<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<!--<p id="iii" class="ccc">我是段落</p>-->
<p>我是段落</p>
</li>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>特点：以空格隔开 找到的是指定的标签的最后一个标签设置颜色.
在这里插入图片描述
子元素选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-子元素选择器</title>
<style>
/*
div>p{
color: red;
}
*/
/*
#identity>p{
color: blue;
}
*/
div>ul>li>p{
color: purple;
}
</style>
</head>
<body>
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>注意点; 特点;找到的是特定的元素的最后一个标签设置颜色.子元素的儿子是>这里的就是所谓的儿子了.
效果图：
在这里插入图片描述
后代选择器和子元素选择器区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-后代选择器和子元素选择器</title>
</head>
<body>
<!--
1.后代选择器和子元素选择器之间的区别?
1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
2.后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}
3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
-->
</body>
</html>交集选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-交集选择器</title>
<style>
/*
p.para1{
color: red;
}
*/
.para1#identity{
color: blue;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>特点：标签与标签没有空格 像这样就是了.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
并集选择器;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-并集选择器</title>
<style>
/*
.ht{
color: red;
}
.para{
color: red;
}
*/
.ht,.para{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>注意点; 特点;用逗号隔开，像这样
在这里插入图片描述
效果图:
在这里插入图片描述
兄弟选择器:通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-兄弟选择器</title>
<style>
/*
h1+p{
color: red;
}
*/
h1~p{
color: green;
}
</style>
</head>
<body>
<!--
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
-->
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>注意点; 特点;相邻兄弟选择器必须通过+连接 通用兄弟选择器用~. h1后面的第一个设置颜色。p后面的第一个设置颜色.
在这里插入图片描述
相邻兄弟选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-兄弟选择器</title>
<style>
h1+p{
color: red;
}
</style>
</head>
<body>
<!--
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
-->
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>特点;h1后面必须是p设置颜色
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读