选择器（二）
1. 交集选择器
交集选择器是由标签选择器和类选择器组成的，使用的格式以“标签选择器.类选择器{}”形式。
<head>
<meta charset="utf-8">
<style>
.red {
color: red;
}
p.red {
font-size: 30px;
}
div.red {
font-size: 15px;
}
</style>
</head>
<body>
<div class="red">熊大</div>
<div>熊二</div>
<div>熊熊</div>
<p>小明</p>
<p>小红</p>
<p class="red">小强</p>
</body>
2. 并集选择器
并集选择器是由各个选择器（包含类选择器、id选择器等）通过逗号连接而成，使用格式以“选择器，选择器，`````{}”形式。
<head>
<meta charset="utf-8">
<style>
div,
p,
span,
.daye {
color:blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>刘德华</div>
<p>张学友</p>
<span>郭富城</span>
<h1>凤姐</h1>
<h1>风哥</h1>
<h1 class="daye">凤大爷</h1>
</body>
3. 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。使用格式以“选择器 选择器{}”形式。
<head>
<meta charset="utf-8">
<style>
.jianlin p {
color: red;
}
</style>
</head>
<body>
<p>百家姓</p>
<div class="jianlin">
<p>张三</p>
</div>
<div>
<p>李四</p>
</div>
</body>
4. 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个> 进行连接，注意，符号左右两侧各保留一个空格。
<head>
<meta charset="utf-8">
<style>
.nav li { /* 空格 后代选择器 可以选择 儿子 孙子 重孙子.. */
color: red;
}
.nav > li { /* 大于号 子元素选择器 只选择 亲儿子 */
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
5. 属性选择器
代码块1：
<head>
<meta charset="utf-8">
<style>
a[title] { /* 属性选择器用中括号 来表示 */
color: red;
}
input[type=text] {
color: red;
}
</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="text" value="文本框">
<input type="submit">
<input type="submit">
<input type="submit">
<input type="reset">
<input type="reset">
<input type="reset">
</body>```
代码块2：
```html<head>
<meta charset="utf-8">
<style>
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
</style>
</head>
<body>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
</body>
网友评论