任务8-CSS选择器

2016-07-20  本文已影响20人  饥人谷_任磊

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

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

demo：

* {
    font-family: '微软雅黑';
}

#id-selector{
    color: #333;
}

.class-selector{
    background: #f1f1f1;
}

p {
    height: 50px;
    line-height: 50px;
}
选择器 含义
E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有的直接子元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符, .和#本身充当着分隔符的元素
element#id id和class选择器和选择器在连写的时候中间没有分隔符, .和#本身充当分隔符的元素

demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组合选择器demo</title>
        <style type="text/css">
            .title1,p{
                color: red;
            } /* 多元素选择器，标题1和段落1、2被选中  */
            #box p{
                font-size: 30px;
            }/* 后代选择器，段落1、2被选中  */
            #box>p{
                text-align: center;
            }/* 子元素选择器，只有段落1是box的直接子元素，段落2是box的子元素的向下递归  */
            .button+a{
                color: green;
            }/* 普通相邻选择器，确认 2被选中 */
            #box~p{
                font-family: "微软雅黑";
            }/* 弟弟选择器，段落1、2都是box的子元素或者子元素向下递归，只有段落3与box同级  */
        </style>
    </head>
    <body>
        <div id="box">
            <h1 class="title1">我是标题1</h1>
            <h1 class="title2">我是标题2</h1>
            <p>我是段落1</p>
            <div id="box2">
                <p>我是段落2</p>
            </div>
        </div>
        <div id="box3">
            <div class="button">
                <a href="#">确认1</a>
            </div>
            <a href="#">确认2</a>
        </div>
        <p>我是段落3</p>
    </body>
</html>
组合选择器.png
选择器 含义
E[attr] 用来选择有某个属性的元素，不论这个属性的值是什么。
E[attr = value] 用来选取具有属性attr并且属性值为val的元素。
E[attr ~= value] 当某个元素的某个属性具有多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。
E[attr ^= value] 用来选择属性attr的属性值是以val开头的所有元素。
E[attr $= value] 刚好跟E[attr^=val]相反，用来选择具有attr属性且属性值以val结尾的元素。
E[attr *= value] 用来选择具有属性attr并且只要属性值中包含val字符串的元素

以E[attr = value]为例写一个demo：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>demo</title>
       <style type="text/css">
           a[id="button"]{
               color: red;
           }/*选择id属性为button的a链接，1和3被选中 */
       </style>
   </head>
   <body>
       <div id="box">
           <a id="button" href="#">确认1</a>
           <a class="button" href="#">确认2</a>
           <a id="button" href="#">确认3</a>
       </div>
   </body>
</html>
属性选择器.png
选择器 含义
E:first-child 匹配元素E的第一个子元素
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: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: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(selector) 匹配不符合当前选择器的任何元素

n的取值

伪类选择器数量较多，这5种动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」更为常见一点。

针对[E:first-child]和E:first-of-type用一个demo理解一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style type="text/css">
            ul>li:first-child{
                font-size: 30px;
            }/*选取ul元素的第一个子元素li，显然不存在。*/
            ul>p:first-child{
                color: red;
            }/*选取ul中的第一个子元素p,1被选中*/
            ul>li:first-of-type{
                color: green;
            }/*选取ul中的第一个li元素,3被选中*/
        </style>
    </head>
    <body>
        <ul>
            <p>1</p>
            <p>2</p>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>
伪类选择器.png

总结一下：

[E:first-child]匹配父元素的第一个子元素且这个子元素必须为E。
E:first-of-type匹配父元素下使用同种标签的第一个子元素且这个子元素必须为E。E:first-of-type不会去管这个E元素是不是第一个子元素，这是与[E:first-child]最大的不同。

选择器 含义
E::first-line 用于匹配元素的第一行文本，常用于文本排版
E::first-letter 用来选择文本块的第一个字母,也是常用于文本排版方面
E::before,E::after 配合使用content属性可以E元素的前、后插入额外内容，尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。

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

CSS的优先级从低到高的顺序为：

3.class 和 id 的使用场景?

另外在页面中定位元素位置的时候也需要使用id属性，在后面的学习中应该会用到。

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

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

#header{
} /* 选择id="header"的元素*/
.header{
}/*选择class="header的元素"*/
.header .logo{
}/*选择class="heade"元素下的所有class="logo"的子元素 */
.header.mobile{
}/*选择class中同时有herder和mobile的元素*/
.header p, .header h3{
}/*选择class="header"元素下的所有的p元素和h3元素*/
#header .nav>li{
}/*选择id=“header”元素下的class="nav"元素下的直接子元素li元素*/
#header a:hover{
}/*选择id=“header”元素下的所有子元素a的伪类hover*/

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

问答1中已列出

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

问答1中已列出

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style>
            .item1:first-child {
                color: red;
            }/*寻找各个元素中的第一个子元素，其中class=item1就会被匹配，只有这个p元素满足条件*/
            
            .item1:first-of-type {
                background: blue;
            }/*寻找各个元素中的同种标签下的的第一个子元素，其中class=item1会被匹配，p元素和第一个h3元素满足条件*/
        </style>
    </head>
    <body>
        <div class="ct">
            <p class="item1">aa</p>
            <h3 class="item1">bb</h3>
            <h3 class="item1">ccc</h3>
        </div>
    </body>
</html>
运行结果.png

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

text-align: center的作用是文本居中，作用在块级元素上，让内部的行内元素比如文本或者图片水平居中。

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

可以去Can I Use查询属性的兼容性。

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

上一篇 下一篇

猜你喜欢

热点阅读