CSS选择器

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

CSS选择器:

1. 通配选择器:

      * {
        margin: 0;
        padding: 0;
      }

这种选择器在全局属性设置中比较常见,用途不多,一般会提前规定。

2. id选择器:



  
    
    task8
    
  
  
    
  

id选择器一般用于独一无二的区块或者重要元素。

3. 类选择器:



  
    
    task8
    
  
  
    
    

大标题

类选择器用的比较多,因为可重复使用。

4. 标签选择器:



  
    
    task8
    
  
  
    
    

大标题

标签选择器用的不多,一般与其他选择器配合使用。

5. 伪类选择器:



  
    
    task8
    
  
  
    
    

大标题

这是一段链接

6. 属性选择器:



  
    
    task8
    
  
  
    
    

大标题

账号: 密码:
1 2

7. 后代选择器:



  
    
    
    
  
  
    

我是大标题

我也是大标题

我还是

我是事实

这个概念比较模糊,见效果图:

CSS选择器_第1张图片
后代选择器

8. 伪元素选择器:








I'm the king of the world. ——《泰坦尼克号》

效果图:

CSS选择器_第2张图片
伪元素选择器

9. 组合选择器:

组合选择器就是将各类选择器运用连接符组合使用,具体使用情况不尽相同,看需求,例如E+F、E~F、.E.F、等等。


2. 选择器的优先级是怎样的?

  1. !important
  2. style内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器默认样式
  • 而具体情况是,选择器越具体,越接近下层,则越优先。
  • 如果对同一个元素设置了不同样式,则:
  1. 内联样式
  2. style中越往下的样式

3. class 和 id 的使用场景?

class标签更加灵活,通常不会单独使用,而是和其他元素组合使用,由于其可重复使用的优点,在html文档中经常大量使用,相较于id选择器更加方便些。
id选择器主要用于特殊且重要的元素,以及外部结构区块。一般html文档会有很多区块,其中的主要结构区块都是用id选择器,结构语义化更清晰。





    
    



    
    

标题2

这是一个段落。

效果图:

CSS选择器_第3张图片
class和id使用场景

4. 使用CSS选择器时为什么要划定适当的命名空间?

  1. 提高代码可读性;
  2. 便于维护管理;
  3. 保持代码的可拓展性;
  4. 避免结构冲突。

5. 以下选择器分别是什么意思?

#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{/* 选择祖先为class="header"
             且直接父元素为class="nav"的li元素 */
}
#header a:hover{/* 选择祖先为class="header"的a元素的伪类:hover */
}

6. 列出你知道的伪类选择器

  • :hover
  • :link
  • :active
  • :first-of-type
  • :first-child
  • :nth-of-type()
  • :nth-child()
  • :last-of-type
  • :last-child
  • :focus
  • :visited

7. :first-child和:first-of-type的作用和区别?

作用:

  • first-child匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
  • first-of-type匹配的是某父元素下相同类型子元素中的第一个,不限制是第一个子元素,只要是该类型元素的第一个就可以。

eg:



  
    
    
    
  
  
    

我是事实

我是事实

我是事实

我还是

我是事实

我是事实

效果图:

CSS选择器_第4张图片
first-of-type效果图

如果把first-of-type换成first-child

    

效果图:

CSS选择器_第5张图片
first-child效果图

图中发现,值得注意的是
即使是嵌套关系下的第一个子元素,也是会被匹配。


8. 运行如下代码,解析下输出样式的原因。





    
    




    

aa

bb

ccc

效果图:

CSS选择器_第6张图片
代码效果图
  • 蓝色背景:样式里面设置了first-of-type,也就是第一个类型的元素将应用为蓝色背景,而第一个类型就是p和h3,h3有2个,取第一个。
  • 红色字first-child是指后代中第一个子元素,第一个子元素是p,所以只是p应用了红色字。

9. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

text-align: center作用是使元素水平居中,作用在块级元素上,让块级元素内部的行内元素水平居中。


10. 如果遇到一个属性想知道兼容性,在哪查看?

在can i use网站查询。
eg:

CSS选择器_第7张图片
can i use

本文版权归本人和饥人谷所有,转载请注明来源,谢谢!

你可能感兴趣的:(CSS选择器)