(1)交集选择器
交集选择器是并且的意思,是即…又…的意思。用的相对来说比较少，不太建议使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .red {
color: red;
}
p.red {
color: blue;
}
</style>
</head>
<body>
<div class="red">可口可乐</div>
<div>炸鸡块</div>
<div>多喝热水</div>
<p>早安</p>
<p>午安</p>
<p class="red">晚安</p>
</body>
</html>
(2)并集选择器
交集选择器是和的意思,只要是逗号隔开的，所有选择器都会执行后面的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div, p, span, .Ju {
color: blue;
}
</style>
</head>
<body>
<div>Huahudiediedie</div>
<p>Daxaing</p>
<span>Changjinglu</span>
<h1 class="Ju">Juzi</h1>
<h1 class="Mei">Meizi</h1>
<h1 class="Qie">Qiezi</h1>
</body>
</html>
(3)后代选择器
后代选择器又叫包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* div p { color: pink; } */
.sun p {
color: red;
}
</style>
</head>
<body>
<p>我想锤死你</p>
<div class="sun">
<p>打死你个龟孙儿</p>
</div>
<div class="er">
<p>打死你个龟儿子</p>
</div>
</body>
</html>
(4)子元素选择器
这里的子 指的是亲儿子 不包含孙子、重孙子之类
<!DOCTYPE html> <html lang="en"> <style> .nav li {
color:red;
}
.nav > li {
color: blue;
}
</style>
<head>
<meta charset="UTF-8">
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
- 交、并、后、子四类选择器小案例：
不修改以下代码实现如下任务:
①链接 登录 的颜色改为红色,同时主导航栏里面的所有链接均改为蓝色。(简单)
②主导航栏和测导航栏里面文字都改为14像素并且是微软雅黑.。(中等)
③主导航栏里面的一级菜单链接文字颜色改为绿色。(困难)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 主导航栏 -->
<div>
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<!-- 测导航栏 -->
<div class="sitenav">
<div class="site-l">左侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>
实现效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 任务一: --> <style> .site-r a {
color: red;
}
.nav ul li a {
color: skyblue;
}
/* 任务二: */
.nav, .sitenav {
/* font-size: 14px; font-family: "microsoft yahei"; */
font: 14px "microsoft yahei";
}
/* 任务三: */
.nav>ul>li>a {
color: green;
}
</style>
</head>
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<!-- 测导航栏 -->
<div class="sitenav">
<div class="site-l">左侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>
(5)属性选择器
选取标签带有某些特殊属性的选择器,称为属性选择器。
E[attr]-----------存在attr属性即可。
E[attr=val]-----------属性值完全等于val。
E[attr^=val]-----------属性值里包含val字符并且在"开始"位置。
E[attr$=val]-----------属性值里面包含val字符并且在"结束"位置。
E[attr*=val]-----------属性值里包含"val"字符并且在"任意"位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> a[title] {
color: red;
}
input[type=text] {
color: green;
}
div[class^=font] {
color: pink;
}
div[class$=footer] {
color: skyblue;
}
div[class=jd] {
color: aqua;
}
div[class*=jd] {
color: orange;
}
</style>
</head>
<body>
<a href="#" title="这是百度">百度</a>
<a href="#" title="这是新浪">新浪</a>
<a href="#">阿里</a>
<a href="#">网易</a>
<a href="#">土豆</a>
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="submit">
<div class="font1">属性选择器</div>
<div class="font2">属性选择器</div>
<div class="font3">属性选择器</div>
<div class="font4">属性选择器</div>
<div class="font5">属性选择器</div>
<div class="sub-footer">属性选择器</div>
<div class="xxx-footer">属性选择器</div>
<div class="news-jd-nav">属性选择器</div>
<div class="news-headerjd">属性选择器</div>
<div class="jd-news-header">属性选择器</div>
<div class="jd123">属性选择器</div>
</body>
</html>
(6)伪元素选择器(CSS3)
E::first-letter------文本的第一个单词或者字(中文、日文、韩文等)。
E::first_line------文本第一行。
E::selection------可改变选中文本的样式。
E::before------在E元素内部的开始位置创建一个元素。
E::after------在E元素内部的结束位置创建一个元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p::first-letter {
color: red;
font-size: 30px;
}
p::first-line {
color: skyblue;
font-size: 30px;
}
p::selection {
color: pink;
}
p::before {
content: "Huahudie";
}
p::after {
content: "Daxiang";
}
</style>
</head>
<body>
<h1>Blockchain</h1>
<p>区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链（Blockchain），
是比特币的一个重要概念，它本质上是一个去中心化的数据库，同时作为比特币的底层技术，是一串使用密码学方法相
关联产生的数据块，每一个数据块中包含了一批次比特币网络交易的信息，用于验证其信息的有效性（防伪）和生成下
一个区块
[1] 。
比特币白皮书英文原版 [2] 其实并未出现 blockchain 一词，而是使用的 chain of blocks。最早的比特币白皮书
中文翻译版 [3] 中，将 chain of blocks
翻译成了区块链。这是“区块链”这一中文词最早的出现时间。
国家互联网信息办公室2019年1月10日发布《区块链信息服务管理规定》，自2019年2月15日起施行 [4] 。
</p>
</body>
</html>
京公网安备 11010502036488号