4.10 并集选择器
2017-12-04 本文已影响7人
一Left一
1、 给所有选择器选中的标签设置属性
2、连接符：,
3、格式：
选择器1,选择器2{
属性: 值;
}
4、注意点:
并集选择器必须使用,来连接
选择器可以使用标签名称/id名称/class名称
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
要求设置p,h1,li,a 的字体颜色为红色
*/
/*p{*/
/*color: red;*/
/*}*/
/*h1{*/
/*color: red;*/
/*}*/
/*li{*/
/*color: red;*/
/*}*/
/*a{*/
/*color: red;*/
/*}*/
p,h1,li,a{
color: red;
}
/*
并集选择器/分组选择器: 可以被多个选择器中的一个选中,就可以应用相关的样式
符号: ,
格式: 选择器1,选择器2,选择器3,...
用法:
选择器1,选择器2,选择器3,...{
规则;
...
}
使用并集选择器,设置的属性是一样的
*/
</style>
</head>
<body>
<!--快速创建标签
+: 创建并列的标签
p+h1:
<p></p>
<h1></h1>
-->
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
<h1>我是一个标题</h1>
<ul>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
</ul>
<a href="#">我是一个超链接</a>
</body>
图片.png
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.choose,.coll{
color: yellowgreen;
}
.choose.coll{
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<p>我是一个段落</p>
<p class="choose">我是一个段落</p>
<p>我是一个段落</p>
<h3 class="choose coll">我是一个标题</h3>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
</li>
<li>
<p class="choose coll">我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
</li>
<li>
<p>我是一个段落</p>
<p class="coll">我是一个段落</p>
<p>我是一个段落</p>
<h3 class="choose coll">我是一个标题</h3>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
</li>
<li class="coll">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
</li>
<li>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
<h3>我是一个标题</h3>
</li>
</ul>
</body>
图片.png
