CSS 第1篇

作者: 泰格_R | 来源:发表于2016-08-09 22:44 被阅读32次
    1.CSS选择器常见的有几种?

    1.id选择器 #id{ } “#id”选中元素
    2.类选择器 .class{ } “.类名称”选中元素
    3.标签选择器 div{ } “标签名”选中元素
    4.通配符选择器 { } ""选中所有元素
    5.组合选择器:
    分组选择器 E,F “,”逗号隔开,同时选中E,F元素
    后代选择器 E F 空格隔开,选中E元素下的所有F元素(无论F元素嵌套多少层一样会被选中)
    直接子选择器 E > F “>”隔开,选中E元素下的直接子元素F,即E元素下的第一层级子元素F
    相邻兄弟选择器 E + F “+”隔开选中E元素后的直接相邻元素F
    通用相邻选择器 E ~ F “~”隔开选中E元素后的所有同级元素F
    6.伪类选择器
    7.伪元素选择器
    E::first-line 选中E元素内容的第一行
    E::first-letter 选中E元素内容的第一个字母
    E::before 在E元素之前插入conten内容
    E::after 在E元素之后插入content内容
    before和after是可以插入额外内容的位置,需要配合content属性使用
    8.属性选择器
    input[type="text"] {
    width:150px;
    }


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

    css选择器优先级核心:每个选择器本身有优先级,作用范围越具体优先级越高。
    CSS优先级从高到低分别是:
    1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    2.作为style属性写在元素标签上的内联样式
    3.id选择器
    4.类选择器
    5.伪类选择器
    6.属性选择器
    7.标签选择器
    8.通配符选择器
    9.浏览器自定义
    当CSS样式的规则由多个选择器组成时,id选择器的权值为1000,class选择器为100,标签选择器为10,按权值求和的记过高低决定哪个优先。当两个css规则的权值相同时,谁更具体用谁,也就是权值高的选择器作用的越具体优先级越高。当两个选择器规则和权值都是一样,后面样式会覆盖前面的!
    div {color: #333;}
    div {color: #666;}
    这样div文案的颜色明显会是#666


    3.class 和 id 的使用场景?

    id在页面上是唯一标识,class在页面上标识某一类型的样式,具有普遍性,可以重复使用。某元素的class名可以写成class="intro other",即可以有多个class名,代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局(标记大框架),class一般在局部页面布局中使用,用于样式定义,因为命名时可将class名称写成一样,所以只需要对该class写一次样式,就能让有相同样式的元素复用。


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

    提高代码可读性,便于维护


    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{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
    #header a:hover{}  /*选中id=header元素下的所有a元素,并使用hover伪类*/ 
    

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

    【1】结构伪类选择器
    E:first-child 选中E所在父元素下的第一个子元素,且该子元素是E元素
    E:last-child 选中E所在父元素下的最后一个子元素,且该子元素是E元素
    E:root 选中E所在根节点的元素,对于HTML即选中HTML元素
    E:nth-child(n) 选中E所在父元素下的第n个子元素,且该子元素是E元素
    E:nth-last-child(n) 选中E所在父元素下的倒数第n个子元素,且该子元素是E元素
    E:nth-of-type(n) 选中E所在父元素下的同类型元素中的第n个E元素
    E:nth-last-of-type(n) 选中E所在父元素下的同类型元素中的倒数第n个E个元素
    E:first-of-type 选中E所在父元素下的同类型元素中的第一个E元素
    E:last-of-type 选中E所在父元素下的同类型元素中的最后一个E元素
    E:only-child匹配父元素内仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
    E:only-of-type匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    E:empty匹配没有子元素的元素,且该元素无任何文本节点
    E:not(F) 匹配不符合当前选择器的任何元素
    【2】动态伪类选择器 顺序L-V-H-A
    link-visited-hover-active

    a:link{
     color:red;
     }
     
     a:visited{
     color:blue;
     }
     
     a:hover{
     color:gree;
     font-size:20px;
     }
     
     a:active{
     color:gold;
     }
    
     a:focus{
     color:gold; //a元素获得焦点后的样式
     }
    

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

    E:first-child 指定元素E,找其父元素下的第一个E元素
    E:first-of-type 指定E类型的元素,找其父元素下的E类型元素的第一个


    8.运行如下代码,解析下输出样式的原因。
    <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>
    
    Paste_Image.png
    .item1:first-child{color:red;}class=item1元素的父元素div下的第一个子元素item1字体红色<h3>bb<h3>,<h3>ccc<h3>虽然class=item1但他们不是其父元素下的第一个子元素。
    .item1:first-of-type{background:blue;}class=item1元素的父元素下的同类型元素中的第一个class=item1的元素。<p class=item1>aa</p>的父元素div下的同类型元素(p,h3)分别选中第一个即aa,bb加蓝色背景。
    9.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

    设置元素内的文本水平居中对齐。text-align应用在块级元素上(div或p),对该块级元素(div/p)其内部的行内元素(文字、图片、input框)可设置对齐方式。
    text-align有5个值:left/right/center/justify/inherit,左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候,每行中的字间距可能不一致。


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

    caniuse.com网站输入属性查看


    版权声明:本教程版权归覃宴峰和饥人谷所有,转载须说明来源!!!!

    相关文章

      网友评论

        本文标题:CSS 第1篇

        本文链接:https://www.haomeiwen.com/subject/sqbdsttx.html