目录
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
h3（标记选择器）.class（类别选择器） {color:red; font-size:25px;}记忆技巧：
交集选择器是并且的意思。即…又…的意思
比如： p.one 选择的是：类名为 .one 的 段落标签
用的比较少，不太建议使用
并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
.class（类别选择器），h3（标记选择器） {color:red; font-size:25px;}
记忆技巧：
并集选择器 和 的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 .one,p,#test {color:#F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
<head>
<title></title>
<style type="text/css">
div,
p,
span,
h1.hh {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>刘德华</div>
<p>张学友</p>
<span>郭富城</span>
<h1>黎明</h1>
<h1>黑夜</h1>
<h1 class="hh">黄昏</h1>
</body>
【网页中显示为：】
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
.class（类别选择器），h3（标记选择器） {color:red; font-size:25px;}
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。
<head>
<title></title>
<style type="text/css">
div p {
color: pink;
}
.si p {
color: blue;
}
</style>
</head>
<body>
<p>A先生</p>
<div class="si">
<p>B先生</p>
</div>
<div>
<p>C先生</p>
</div>
</body>
【网页中显示为：】
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。
.class（类别选择器）>h3（标记选择器） {color:red; font-size:25px;}
这里的子，指的是亲儿子，不包含孙子、重孙子之类。
比如： .demo > h3 {color:red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
<head>
<title></title>
<style type="text/css">
.nav li { /* 空格 后代选择器 可以选出 儿子 孙子 重孙子。。*/
color: red;
}
.nav > li {/* 大于号 子元素选择器 只选择 儿子 */
color: skyblue;
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
【网页中显示为：】
综合案例
<head>
<title></title>
<style type="text/css">
/*登录的颜色改为红色，同时主导航栏里所有链接改为蓝色*/
.site-r a {
color: red;
}
.nav a {
color:skyblue;
}
/*主、侧导航栏里文字都改成14像素且是微软雅黑*/
.nav,
.sitenav {
font-size: 14px;
font-family:"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-1">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
【网页中显示为：】
属性选择器
选取标签带有某些特殊属性的选择器，我们称为属性选择器。
| **选择器 | **示例 | **含义 |
|---|---|---|
| E[attr] | 存在attr属性即可 | |
| E[attr=val] | 属性值完全等于val | |
| E[attr*=val] | 属性值里包含val字符并且在“任意”位置 | |
| E[attr^=val] | 属性值里包含val字符并且在“开始”位置 | |
| E[attr$=val] | 属性值里包含val字符并且在“结束”位置 |
<head>
<title></title>
<style type="text/css">
a[title] {
color: red
}
input[type=text] {
color: pink;
}
</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">
<input type="submit">
<input type="reset">
<input type="reset">
</body>
【网页中显示为：】
<head>
<title></title>
<style type="text/css">
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="24font">属性选择器</div>
<div class="sub-footer">属性选择器</div>
<div class="jb-footer">属性选择器</div>
<div class="new-nav-tao">属性选择器</div>
<div class="new-tao-header">属性选择器</div>
</body>
【网页中显示为：】
伪元素选择器（CSS3）
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line文本第一行
- E::selection可改变选中文本的样式
<head>
<title></title>
<style type="text/css">
/*.demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器*/
p::first-letter {/*选择第一个字*/
color: red;
font-size: 30px;
}
p::first-line {/*选择第一行*/
color: pink;
}
p::selection {/*当我们选中文字时可变换颜色*/
color: green;
}
</style>
</head>
<body>
<h1>freestyle</h1>
<p>英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。
2017年12月18日，“你有freestyle吗？”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。</p>
</body>
【网页中显示为：】
4.E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用
div::before {
content: "开始";
}
div::after {
content: "结束";
}
<head>
<title></title>
<style type="text/css">
/*before 和after 是在盒子div 的内部前面或者后面插入内容*/
div::before {
content: "我";
}
div::after {
content: "18岁";
}
</style>
</head>
<body>
<div>今年</div>
</body>
【网页中显示为：】
E:after、E:before在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
“:”与“::”区别在于区别伪类和伪元素