CSS选择器

2016-07-28 本文已影响0人饥人谷_沈梦圆

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

①基础选择器

“*”：通用元素选择器，匹配页面任何元素
id 选择器(“#”)：#id 写法是英文或数字格式，中间不能有空格，页面上所有的 id 名称都不能一样
class 选择器（“.”）: 类选择器，.class 选择器选取带有指定类 (class) 的元素
element：标签选择器

②组合选择器

E,F：多元素选择器，用 , 分隔，同时匹配元素 E 或元素 F
E F：后代选择器，用空格分隔，匹配 E 元素所有的后代（不只是子元素 F ）,子元素向下递归
E>F：子元素选择器，用 > 分隔，匹配 E 元素所有直接子元素
E+F：直接相邻选择器，匹配 E 元素之后的相邻的同级元素 F（也就是选中了下一个元素）
E~F：普通相邻选择器，匹配 E 元素之后的同级元素 F （也就是选中了下面的所有同级元素）
.class1.class2/element#id:id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

③属性选择器

以某个属性作为选择依据（E[attr = value]）
例：div[id = test]，匹配 id = test 的 div

④伪类选择器

E:first-child：匹配元素E的第一个子元素
E:hover：匹配鼠标悬停其上的E元素
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:checked：匹配表单中被选中的radio或checkbox元素
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

⑤伪元素选择器

E::before：在E元素之前插入生成的内容
E::after：在E元素之后插入生成的内容

2.选择器的优先级是怎样的?（下面从高到低排列）

!important 在属性后面使用，会覆盖页面内任何位置定义的元素样式
作为 style 属性写在元素标签上的内联样式
id 选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义（例如 h1 默认的大小）

ps1：如果两个选择器规权值是一样的，那优先级是后面的覆盖前面的
ps2：CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高
ps3：id选择器的权值 > class选择器的权值 > 标签选择器的权值

3.class 和 id 的使用场景(增加 name )?

class 是指定标签的类名。
使用场景：CSS 操作时把一些特定样式放到一个 class 类中，需要此样式的标签，可以在添加此类。
id 指定标签的唯一标识。
使用场景：①根据提供的唯一 id 号，快速获取标签对象。 ②用于充当 label 标签 for 属性的值。
name 指定标签的名称。
使用场景：① form 表单。② input type='radio'单选标签。

引用：HTML name、id、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 元素和 h3 元素 */
}
#header .nav>li{  /* 选中 id="header" 下 class="nav" 中的所有 li 子元素*/
}
#header a:hover{  /* 选中 id="header" 下子元素鼠标悬停在 a 链接上时的样式设置*/
}

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

E:first-child：匹配元素E的第一个子元素
E:hover：匹配鼠标悬停其上的E元素
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:checked：匹配表单中被选中的radio或checkbox元素
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

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

first-child 定义匹配元素中第一个子元素，而 first-of-type 定义匹配父元素下使用同种标签的第一个子元素。下面我们给两个对比的例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link href="css/style.css" rel="stylesheet">
        <style>
        .box>h1:first-of-type{
            text-align: center;
        }
        </style>
    </head>
    <body>
    <div class="box">
        <div>
            <h1>我是标题1</h1>
        </div>
        <h1>我的标题2</h1>
        <p>我的段落1</p>
    </div>
    </body>
</html>

上面这串代码我们用到了 :first-of-type 我们在浏览器中得到如下图的效果：

first-of-type.png
接下来我们将上面代码中的 :first-of-type 修改为 :first-child 我们得到下面这个效果，可以很明显的看到我们的命令并没有生效。

first-child(1).png

当我们将代码修改为这样的时候：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link href="css/style.css" rel="stylesheet">
        <style>
        .box>h1:first-child{
            text-align: center;
        }
        </style>
    </head>
    <body>
    <div class="box">
        <h1>我的标题2</h1>
        <div>
            <h1>我是标题1</h1>
        </div>
        <p>我的段落1</p>
    </div>
    </body>
</html>

我们就可以得到我们想要的效果，如下图：

first-child(2).png

<strong>我们可以得到这样的结论，:first-of-type 会自动寻找 box 下的 h1 元素，无论中间穿插了多少别的元素；而 :first-child 它只能根据 box 中第一个子元素来进行命令，若第一个不是 h1 元素，则它就找不到 box 下的 h1 元素，命令无法生效。

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>

代码效果图如下：

代码显示.png

蓝色背景：由于 :first-of-type 是取同种标签的第一个元素，而 div 中 p 元素仅有一个，但是 h3 元素有两个选择第一个，所以出现 ccc 没有蓝色背景的情况
红色字体：:first-child 匹配 item1 的第一个子元素，可想而知仅为 p 变成红色字体

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

作用：使元素水平居中
作用元素：块级元素
能让什么元素水平居中：块级元素内部的行内元素

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

利用 can i use 即可查询

<strong>本文版权归作者和饥人谷所有，转载请注明出处