任务八~CSS选择器
一、CSS选择器常见的有几种?
- 基本选择器
- 通配选择器~选择文档中所有的html元素，用一个*表示
- 元素选择器~选择指定类型的的html元素
- ID选择器~选择指定ID属性值为"id"的html元素，选择的时候前面加上一个#号
- 类选择器~选择指定class属性值为"class"的任意多个html元素，选择的时候前面加上一个.号
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS选择器</title>
<style>
/*通配选择器*/
*{
margin: 0;
padding: 0;
}
/*元素选择器*/
ul{
list-style: cricle;
}
/*ID选择器*/
#header{
height: 200px;
}
/*类选择器*/
.intro{
float: right;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<h3>css选择器~基本选择器</h3>
<ul class="intro">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>
注： *{margin:0;padding:0;}会让所有的元素的margin和padding为0；
ul{ list-style: none; }会让所有的ul的列表类型为空心圆作为列表标志；
#header{ height: 200px; }会让id属性值为header的元素高度为200px；
.intro{ float: right; }会让class属性值为intro的元素向右浮动
- 层次选择器
- 多选择器 E,F~选择匹配E元素，F元素
- 后代选择器 E F~选择匹配E元素下的F元素
- 子孙选择器 E > F~选择匹配E元素下的直接子元素F
- 相邻兄弟选择器 E + F~选择匹配E元素后的直接相邻元素F
- 通用相邻选择器 E ~ F~选择匹配E元素后的所有同级元素F
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS选择器</title>
<style>
/*多元素选择器*/
.content h3,.content ul{
font-size: 16px;
}
/*后代选择器*/
.nav li{
height: 100px;
}
/*子孙选择器 */
.content > ul{
float: left;
}
/*相邻兄弟选择器 */
.intro + p{
font-weight: bold;
}
/*通用相邻选择器 */
.intro ~ p{
color: red;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<h3>css选择器~基本选择器</h3>
<ul class="intro">
<li>1</li>
<li>2</li>
<li>
<ul>
<li>11</li>
<li>12</li>
</ul>
</li>
<li>4</li>
</ul>
<p>这只是一个测试，23333</p>
<p>12345</p>
<p>12334534</p>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>
注： .content h3,.content ul{ font-size: 16px; }会选择.content下的h3和ul，将它们的字体大小设置为16px；
.nav li{ height: 100px; }会选择.nav的后代元素li，将其的高度设置为100px；
.content > ul{ float: left; }会选择.content的直接子元素ul，将其设置为向右浮动；
.intro + p{ font-weight: bold; }会选择.intro后面紧邻的p，将其字体加粗；
.intro ~ p{ color: red; }会选择.intro后的所有同级p，将其字体颜色设置为红色
- 伪类选择器
-
结构伪类选择器
- E:first-child~匹配E元素的第一个子元素
- E:last-child~匹配E元素的最后一个子元素
- E:root~匹配E元素所在文档的根元素
- E:nth-child(n)~匹配E元素的第n个子元素
- E:nth-last-child(n)匹配E元素的倒数第n个子元素
- E:nth-of-type(n)匹配父元素内具有指定类型的第n个E元素
- E:nth-last-of-type(n)匹配父元素内具有指定类型的倒数第n个E元素
- E:first-of-type匹配父元素内具有指定类型的第一个E元素
- E:last-of-type匹配父元素内具有指定类型的最后一个E元素
- E:only-child匹配父元素内只包含一个子元素，且该子元素匹配E元素
- E:only--ofchild匹配父元素内只包含一个同类型的子元素，且该子元素匹配E元素
- E:empty匹配没有子元素的元素，且该元素五任何文本节点
-
动态伪类选择器
- E:link匹配未被访问过的超链接
- E:visited匹配被访问过的超链接
- E:active匹配鼠标已经其上按下、还没有释放的E元素
- E:hover匹配鼠标停留其上的E元素
- E:focus匹配获得焦点的E元素
-
语言伪类选择器
- E:lang(language)匹配指定了lang属性且值为language的E元素
-
否定伪类选择器
- E:not(F)匹配所欲除F元素外的E元素
<!doctype html>
<html lang="en"><!--语言伪类选择器 -->
<head>
<meta charset="utf-8"/>
<title>CSS选择器</title>
<style>
/*结构伪类选择器*/
.nav li:first-child{
color: pink;
}
.nav li:last-child{
color: blue;
}
.nav li:nth-child(3){
color: orange;
}
.nav li:nth-last-child(2){
color: #eee;
}
#content p:nth-of-type(3){
color: purple;
}
#content p:nth-last-of-type(2){
color: yellow;
}
#content p:first-of-type{
color:gray;
}
#content p:last-of-type{
color:maroon;
}
#content ol li:only-child{
color: red;
}
#content span:only-of-type{
color: teal;
}
/*动态伪类选择器*/
#content a:link{
color: red;
}
#content a:visited{
color: pink;
}
#content a:hover{
color: maroon;
}
#content a:active{
color: fuchsia;
}
#content a:focus{
color: purple;
}
/*否定伪类选择器*/
p:not(.ex){
font-size: 30px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<h3>css选择器~基本选择器</h3>
<ol>
<li>只有一个元素</li>
</ol>
<ul class="intro">
<li>1</li>
<li>2</li>
<li>
<ul>
<li>11</li>
<li>12</li>
</ul>
</li>
<li>4</li>
</ul>
<p>樱木花道</p>
<p>鸣人</p>
<p>路飞</p>
<p>兵长</p>
<p>坂田银时</p>
<p class="ex">索隆</p>
<span>只有一个同类型，父元素可以有其他的子元素</span>
<a href="#" target="_blank" title="1234567">自来也</a>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>
```
注： .nav li:first-child{ color: pink; }会选择.nav下的第一个子元素li，将其颜色设置为pink；
.nav li:last-child{ color: blue; }会选择.nav下的最后一个子元素li， 将其颜色设置为blue；
.nav li:nth-child(3){ color: orange; }会选择.nav下的第三个子元素li，将其颜色设置为orange；
.nav li:nth-last-child(2){ color: #eee; }会选择.nav下的倒数第二个子元素li，将其颜色设置为#eee；
\#content p:nth-of-type(3){ color: purple; }会选择#content下的指定p元素类型的第三个p元素，将其颜色设置为purple；
\#content p:nth-last-of-type(2){ color: yellow; }会选择#content下的指定p元素类型的倒数第二个p元素，将其颜色设置为 yellow；
\#content p:first-of-type{ color:gray; }会选择#content下的指定p元素类型的第一个p元素，将其颜色设置为gray；
\#content p:last-of-type{ color:maroon; }会选择#content下的指定p元素类型的最后一个p元素，将其颜色设置为 maroon；
\#content ol li:only-child{ color: red; }会选择#content下的只有一个子元素的ol，将其子元素li的颜色设置为red；
\#content span:only-of-type{ color: teal; }会选择#content下指 定span类型的span元素，将其颜色设置为teal；
4.伪元素选择器
- **::first-letter**用来选择文本块的第一个字母
- **::first-line**用来选择元素的第一行文本
- **::before**和**::after**不是指存在标记中的内容，而是可以插入额外内容的位置，需要配合content属性使用
- **::selection**用来匹配突出显示的文本
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS选择器</title>
<style>
#content p::first-letter{
color: red;
}
#content p::first-line{
font-size: 22px;
}
#content p::before{
content: "111";
}
#content p::after{
content: "222";
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<h3>css选择器~基本选择器</h3>
<ol>
<li>只有一个元素</li>
</ol>
<ul class="intro">
<li>1</li>
<li>2</li>
<li>
<ul>
<li>11</li>
<li>12</li>
</ul>
</li>
<li>4</li>
</ul>
<p>樱木花道</p>
<p>鸣人</p>
<p>路飞</p>
<p>兵长</p>
<p>坂田银时</p>
<p class="ex">索隆</p>
<span>只有一个同类型，父元素可以有其他的子元素</span>
<a href="#" target="_blank" title="1234567">自来也</a>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>
注：\#content p::first-letter{ color: red; }会选择#content下的p元素的第一个字母，将其颜色设置为red；
\#content p::first-line{ font-size: 22px; }会选择#content下的p元素的第一行，将其字体大小设置为22px；
\#content p::before{ content: "111"; } #content p::after{ content: "222"; 会选择#content下的p元素的前面和后面插入“111”和“222”；
5.属性选择器
- E[attr]~匹配所有具有属性attr的E元素
- E[attr=val]~匹配具有属性attr，attr值为val的元素，val区分大小写
- E[attr|=val]~匹配具有属性attr，attr值为val或以val-开始的元素
- E[attr~=val]~匹配具有属性attr，attr值具有多个空格分隔、其中一个值等于value的元素
- E[attr*=val]~匹配具有属性attr，attr值的任意位置包含了val的元素
- E[attr^=val]~匹配具有属性attr，attr值以val开头的任何字符串的元素
- E[attr$=val]~匹配具有属性attr，attr值以val结尾的任何字符串
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS选择器</title>
<style>
input[type="password"]{
font-size: 16px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<form action="##" method="post">
<input type="text" name="user"/>
<input type="password" name="password" placeholder="请输入密码">
</form>
<a href="#" target="_blank" title="1234567">自来也</a>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>
***
## 二、选择器的优先级是怎样的?
- 从高到低的顺序分别是
- 在属性后面使用了!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
***
## 三、class 和 id 的使用场景?
- class用于可以重复使用的html元素中，比如一个提交按钮的样式设置就可以多次利用
- id选择器多用于页面结构性的主体部分，比如，header，content，footer；或者页面上具有唯一性的地方
***
## 四、使用CSS选择器时为什么要划定适当的命名空间？
1. 可以使代码具有可读性，更有语义化并且便于写代码和调试代码
2. 避免因为命名不规范而导致出错
***
## 五、以下选择器分别是什么意思?
header{} /匹配id="header"的元素/
.header{} /匹配class="header"的元素/
.header .logo{} /匹配class="header"元素下的class="logo"的元素/
.header.mobile{} /匹配class="header mobile"的元素/
.header p, .header h3{} /匹配class="header"元素下的p元素和匹配class="header"元素下的h3元素/
header .nav>li{} /匹配id="header"元素下的class="nav"元素的直接子元素li/
header a:hover{} /匹配id="header"元素下的a元素的:hover伪类/
***
## 六、列出你知道的伪类选择器？
- :first-child
- :last-child
- :root
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
- :first-of-type
- :last-of-type
- :only-child
- :only--ofchild
- :empty
- :link
- :visited
- :active
- :hover
- focus
- :lang
- :not
- :checked
- :disabled
- :enabled
***
## 七、:first-child和:first-of-type的作用和区别？
1. :first-child的作用是匹配父元素下的第一个子元素
2. :first-of-type的作用是匹配父元素下指定类型的第一个子元素
3. 区别：要区别在于:first-of-type选择的子元素是从父元素下的指定类型的第一个子元素，而:first-child选择的子元素是从父元素下第一个子元素
<style>
content a:first-child{
color:blue;
}
content p:first-of-type{
color:red;
}
</style>
<div id="content">
<a href="#">111</a>
<img src="" alt="">
<p>樱木花道</p>
<p>鸣人</p>
<p>路飞</p>
<p>兵长</p>
<p>坂田银时</p>
<p>索隆</p>
</div>
注：#content a:first-child{ color:blue; }会匹配#content下的第一个子元素a链接，将其颜色设置为blue；
\#content p:first-of-type{ color:red; }则会匹配#content下指定p类型的第一个p元素，将其的颜色设置为red；
***
## 八、运行如下代码，解析下输出样式的原因？
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
- 运行结果如下图
- .item1:first-child{ color: red;}会匹配父元素下的第一个子元素，即p元素，将其字体颜色设置诶红色；
- .item1:first-of-type会匹配父元素下的指定.item1类型的元素，那么这里就会选择p.item1,第一个h3.item1，将其背景颜色设置为蓝色
***
## 九、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
- 使元素中的文本水平居中对齐，作用在块级元素上，会使块级元素的行内元素水平居中对齐
***
## 十、如果遇到一个属性想知道兼容性，在哪查看?
- 可以去[Can I use···](http://caniuse.com/)查询！！！
**版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！**
