美文网首页
任务8-CSS选择器

任务8-CSS选择器

作者: 饥人谷_任磊 | 来源:发表于2016-07-20 00:25 被阅读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
  • 属性选择器
    在html中,通过给元素添加属性,给以元素添加一些附加的信息,属性选择器就可以通过定位属性来选取特定的元素。
选择器 含义
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的取值

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

伪类选择器数量较多,这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]最大的不同。

  • 伪元素选择器
    以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号,主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法,但是其他现代浏览器两种表示方法是都可以的,也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。
选择器 含义
E::first-line 用于匹配元素的第一行文本,常用于文本排版
E::first-letter 用来选择文本块的第一个字母,也是常用于文本排版方面
E::before,E::after 配合使用content属性可以E元素的前、后插入额外内容,尽管生成的内容不会成为DOM的一部分,但它同样可以设置样式。

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

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

  • 在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
  • 作为style属性写在元素标签上的内联样式
  • id选择器
  • 类选择器
  • 伪类选择器
  • 属性选择器
  • 标签选择器
  • 通配符选择器
  • 浏览器自定义
    总而言之判断CSS选择器规则优先级很简单,每个选择器本身有优先级,越具体优先级越高。
    如果优先级相同的话,根据在文档的位置来决定,后面的会覆盖前面的。

3.class 和 id 的使用场景?

  • 如果想要对多个元素使用某个样式时,就要用到class。
  • 如果只有一个元素需要加样式,或者页面上只有一个元素,那就应该使用id,id属性就是用来唯一的命名元素。

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

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

  • 使代码语义化,便于团队开发和维护。
    -方便你去修改代码,在页面没有达到你预期的效果时,良好的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查询属性的兼容性。


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

相关文章

  • 任务8-CSS选择器

    1.CSS选择器常见的有几种? 基础选择器 demo: 组合选择器 demo: 属性选择器在html中,通过给元素...

  • 任务8-CSS选择器

    课程目标 掌握常见 CSS 选择器的用法 对选择器优先级有一定认识 课程任务 1. CSS选择器常见的有几种? i...

  • 任务8-css选择器

    CSS选择器常见的有几种? 基本选择器 id选择器 标签选择器 类选择器 通用选择器 属性选择器,常见属性选择器E...

  • 任务8-CSS选择器

    2016/05/15 问答CSS选择器常见的有几种? 1.id选择器选择设置id的元素,如 #header{}2....

  • 任务8-CSS选择器

    1、CSS选择器常见的有几种? 基础选择器 eg: 效果: 组合选择器 eg: 效果: 属性选择器 eg: 效果:...

  • 任务8-CSS选择器

    一、CSS选择器常见的有几种? 1. 基础选择器 *:通用元素选择器,匹配页面任何元素 id选择器:选择指定id...

  • 任务8-CSS选择器

    1.CSS选择器常见的有几种? id选择器: 类选择器: 属性选择器: 分组选择器: 派生选择器: 标签选择器: ...

  • 任务8-CSS选择器

    一、CSS选择器常见的有几种? 1.元素选择器 h1{color:red;},p{color:blue;};2.分...

  • 任务8-CSS选择器

    CSS选择器常见的有几种?标签选择器id选择器class选择器伪类选择器组合选择器通配符选择器 选择器的优先级是怎...

  • 任务8-css常见样式

    块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块儿级元素 h1-h6 ,p,div,table,...

网友评论

      本文标题:任务8-CSS选择器

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