任务8_CSS选择器

课程目标

• 掌握常见 CSS 选择器的用法
• 对选择器优先级有一定认识

学习建议

• 从学 CSS 开始，课程视频里的代码需要边听、边暂停、边跟着写

预习视频

• 课程视频-CSS-常见选择器
• 课程视频-CSS选择器
• 课程视频-CSS-伪类选择器|权重

课程任务

问答

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

• 基础选择器

选择器	名称	含义
*	通用元素选择器	匹配页面任何元素（这也就决定了我们很少使用）
#id	id选择器	匹配特定的id元素
.class	类选择器	匹配class包含特定类的元素
element	标签选择器	——

以下为实例：

*{
}/*通用元素选择器*/
#id-selected{
}/*id选择器*/
.class{
}/*类选择器*/
p{
}/*标签选择器*/

• 组合选择器

选择器	名称	含义
E,F	多元素选择器	同时匹配E元素和F元素
E F	后代选择器	选择E元素的所有后代F元素（不是子元素，子元素向下递归）
E>F	子元素选择器	选择E元素的所有直接子元素F
E+F	直接相邻选择器	匹配E元素之后的相邻同级元素F
E~F	普通相邻选择器（弟弟选择器）	匹配E元素之后的所有同级元素F（不论相邻与否）

小知识点：“h1.class名称”表示这个选择器既是h1又有class的名字，这样可以区分两个class名字一样但是标签不一样的情况。

以下为实例：

    
    




    

        
child1
        

            
child2-1
            
child2-2
        
        
child3
        
child4
    
    

        
div1
        
div2
        
div3
        
div4
    

以上代码的输出结果为：

组合选择器输出结果

• 属性选择器

选择器	名称	含义
E[attr]	匹配所有具有属性为attr的元素	div[id]能选择所有具有id属性的div
E=[attr=value]	匹配所有属性为value的元素	div[type=text]匹配id=text的div
E[attr~=value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素	——
E[attr ^= value]	匹配属性attr的值以value开头的元素	——
E[attr $= value]	匹配属性attr的值以value结尾的元素	——
E[attr *= value]	匹配属性attr的值包含value的元素	——

其中，E=[attr=value]较为常用

以下为实例：

以下为输出结果

属性选择器输出结果

• 伪类选择器

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:last-child	匹配元素E的最后一个子元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:only-child	匹配父元素下仅有的一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:nth-of-type(n)	与E:nth-child类似，但是仅匹配同种标签的
E:nth-last-of-type	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:link	匹配所有未被点击的链接
E:visited	匹配所有以被点击的链接
E:active	匹配被鼠标点击并未释放的E元素
E:hover	匹配鼠标悬停至上的E元素
E:focus	匹配获得焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，根元素就是HTML元素
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看做是子元素
E:not(selector)	匹配不符合当前选择器的任何元素

以下为实例：

    
    




    

        

            导航1
            导航2
            导航3
            导航4
        
    
    

        

            
侧边栏
            
            中心区块
            

                

                    用户名：
                    
                
                

                    男
                    女
                    刘梓晨
                

            
        
        

            

                我是底部
            
        

以下为输出结果：

伪类选择器输出结果

• 伪元素选择器

选择器	含义
E::first-line	匹配E元素的第一行
E::first-letter	匹配E元素的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

其中，n的取值为

• 1，2，3，4，5
• 2n+1, 2n, 4n-1
• odd, even

以下为实例：

    
    
    



    

        

            
这是第一行

                这是第二行
            
            
这是第三行
            
这是第四行
        
    

以下为输出结果：

伪元素选择器输出结果

** 二、选择器的优先级是怎样的? **

• CSS规则由单个选择器组成：

  1. 在属性后面加!important会覆盖页面上任何位置定义的属性样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义

• CSS选择器由多个选择器组成：

• “一万个calss的权重加起来也没有一个if的权重高”

• 权值高的选择器作用的越具体，权重越高

** 三、class 和 id 的使用场景? **

• class名称可以重复，可设置样式后赋予不同的元素
• id名称不能重复，对页面排版进行结构化布局用
• id是唯一的，更多的是留给JS用

** 四、使用CSS选择器时为什么要划定适当的命名空间？ **

• 代码易于写作与维护，易于让人读懂
• 避免命名不规范而导致的出错

** 五、以下选择器分别是什么意思? **

#header{
}/*匹配id=header的元素*/
.header{
}/*匹配class=header的元素*/
.header .logo{
}/*后代选择器，匹配calss=header元素的后代中的class=logo的元素*/
.header.mobile{
}/*匹配calss="header mobile"的元素*/
.header p, .header h3{
}/*多元素选择器，匹配class=header元素的后代中的p元素及h3元素*/
#header .nav>li{
}/*后代选择器，匹配id=header元素后代中的class=nav的元素后代中的直接子元素li*/
#header a:hover{
}/*后代元素选择器，匹配id=header元素中的所有a链接鼠标悬停在其上的效果*/

** 六、列出你知道的伪类选择器 **

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:last-child	匹配元素E的最后一个子元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:only-child	匹配父元素下仅有的一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:nth-of-type(n)	与E:nth-child类似，但是仅匹配同种标签的
E:nth-last-of-type	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:link	匹配所有未被点击的链接
E:visited	匹配所有以被点击的链接
E:active	匹配被鼠标点击并未释放的E元素
E:hover	匹配鼠标悬停至上的E元素
E:focus	匹配获得焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，根元素就是HTML元素
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看做是子元素
E:not(selector)	匹配不符合当前选择器的任何元素

** 七、:first-child和:first-of-type的作用和区别 **

详见：饥人谷知识点二：关于伪类选择器:first-child和:first-of-type

** 八、运行如下代码，解析下输出样式的原因。 **

 
 
aa
 
bb
 
ccc
 

分析如下：

.item1:first-child{
 color: red;
}

以上代码匹配作为子元素的首个item1，所以aa的颜色为红色

.item1:first-of-type{ 
background: blue;
}

以上代码匹配作为子元素的所有标签的第一个item1，其中aa为第一个p，bb为第一个h3，所以aa和bb的背景色为蓝色

详见：饥人谷知识点二：关于伪类选择器:first-child和:first-of-type

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align: center是让块级元素内的元素（文本或图片）居中，只能作用在块级元素。

附块级元素与行内元素的分类：

• 块级元素：div、p、h1…h6、table、tr、ul、li、dl、dt、form
• 行内元素：a、span、img、input、button、em、textarea

** 如果遇到一个属性想知道兼容性，在哪查看? **

通过网址 http://caniuse.com/ 去查询其兼容性

比如想要查代码inline-block的兼容性

inline-block的兼容性

---

本教程版权归本人和饥人谷所有，转载须说明来源