任务八~CSS选择器

一、CSS选择器常见的有几种?

  1. 基本选择器
  • 通配选择器~选择文档中所有的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的元素向右浮动

  1. 层次选择器
  • 多选择器 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,将其字体颜色设置为红色

  1. 伪类选择器
  • 结构伪类选择器
    • 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>

- 运行结果如下图
![效果图](http://upload-images.jianshu.io/upload_images/2453980-12f63c7a5753d818.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- .item1:first-child{ color: red;}会匹配父元素下的第一个子元素,即p元素,将其字体颜色设置诶红色;
- .item1:first-of-type会匹配父元素下的指定.item1类型的元素,那么这里就会选择p.item1,第一个h3.item1,将其背景颜色设置为蓝色
***

## 九、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?
 - 使元素中的文本水平居中对齐,作用在块级元素上,会使块级元素的行内元素水平居中对齐
***

## 十、如果遇到一个属性想知道兼容性,在哪查看?
 - 可以去[Can I use···](http://caniuse.com/)查询!!!


![Can I use ··截图](http://upload-images.jianshu.io/upload_images/2453980-c054ee8facf47d92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



**版权声明:本教程版权归邓攀和饥人谷所有,转载须说明来源!!!!**
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 1.CSS选择器常见的有几种? 答: 1.基本选择器 ①Elements-标签选择器:直接在标签上面设置样式,例如...
    呦泥酷阅读 397评论 0 0
  • 一、CSS选择器常见的有几种? 1. 基础选择器 *:通用元素选择器,匹配页面任何元素 id选择器:选择指定id...
    小木子2016阅读 415评论 0 0
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,179评论 0 0
  • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
    云外之境阅读 1,842评论 0 0
  • CSS选择器结构逻辑图 接下来按照结构逻辑图具体讲解各个选择器的作用及用法; 基本选择器 基本选择器主要有以下5类...
    FoolishFlyFox阅读 555评论 0 8