任务8-CSS选择器

作者: _hello__world_ | 来源:发表于2016-08-02 14:06 被阅读0次

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

基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素(性能会比较差，用的少)
#id	id选择器，匹配特定id的元素
.class	类选择器，匹配class包含(不是等于)特定类的元素
element	标签选择器

eg:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础选择器测试</title>
</head>

<style type="text/css">

    * {
        padding: 0;
        margin: 0;
    }

    #container {
        width: 500px;
        height: 300px;
        border: 1px solid #ccc;
        margin:50px auto 0 auto;
    }

    .nav {
        color: red;
        border: 1px solid green;
        margin-top: 50px;
        text-align: center;
    }

    p {
        margin-top: 50px;
        color: pink;
    }

</style>

 <div id="container" >

    <div class="nav">
        我是nav
    </div>

    <p>
        我段落内容
    </p>

 </div>

<body>


</body>
</html>

效果：

Paste_Image.png

组合选择器

选择器	含义
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选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素

eg:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组合选择器测试</title>
</head>

<style type="text/css">

    * {
        padding: 0;
        margin: 0;
    }

    #container {
        width: 500px;
        height: 100%;
        border: 1px solid #ccc;
        margin:50px auto 0 auto;
    }

    .nav,p {
        color: red;
        border: 1px solid green;
        margin-top: 50px;
        text-align: center;
    }

    #container .text{
        font-size: 18px;
        color: #0000ff;
    }

    #container > .sub{
        font-size: 18px;
        color: rosybrown;
        margin-bottom: 50px;
    }

    #container + .relative-child{
        width: 500px;
        margin:100px auto 0 auto;
        font-size: 28px;
        background-color: #ff00ff;
    }

    #container ~ .relative-bor-child{
        width: 500px;
        margin:100px auto 0 auto;
        font-size: 28px;
        background-color: #006600;
    }

    .class1.class2 {
        color: #00ffff;
    }

    #footer.class3 {
        color: #440FFE;
    }

</style>

 <div id="container" >

    <div class="nav">
        |E,F    |多元素选择器，用,分隔，同时匹配元素E或元素F|
        <div class="text">|E F|后代选择器，用空格分隔，匹配E元素所有的**后代**（不只是子元素、子元素向下递归）元素F|</div>
        <div class="sub">sub text1</div>
        <div class="relative-child">relative-child text1</div>
    </div>
     <div class="sub">|E>F|子元素选择器，用>分隔，匹配E元素的所有**直接子元素**|</div>
    <div class="text">|E F|后代选择器，用空格分隔，匹配E元素所有的**后代**（不只是子元素、子元素向下递归）元素F|</div>
    <p>
        |E,F    |多元素选择器，用,分隔，同时匹配元素E或元素F|
    </p>
     <div class="relative-child">relative-child text1</div>
     <div class="relative-child">relative-child text1</div>
     <div class="sub">|E>F|子元素选择器，用>分隔，匹配E元素的所有**直接子元素**|</div>

     <div class="class1 class2">.class1.class2选择器</div>

     <div id="footer" class="class3">
         element#id选择器
     </div>

 </div>

<div class="relative-child">|E+F|直接相邻选择器，匹配E元素之后的相邻的同级元素F|</div>
<div class="relative-bor-child" style="width: 500px;margin:0px auto 0 auto;">|E~F|普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）|</div>
<div class="relative-bor-child"  style="width: 500px;margin:0px auto 0 auto;">|E~F|普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）|</div>

<body>


</body>
</html>

效果：

Paste_Image.png

属性选择器

选择器	含义
E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value]	匹配属性attr的值以value开头的元素
E[attr $= value]	匹配属性attr的值以value结尾的元素
E[attr *= value]	匹配属性attr的值包含value的元素

eg:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>属性选择器测试</title>
</head>

<style type="text/css">

    * {
        padding: 0;
        margin: 0;
    }

    #container {
        width: 500px;
        border: 1px solid #ccc;
        margin:50px auto 0 auto;
    }

    input[type="text"]{
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
        font-family: Verdana,Arial;
    }

    input[type="button"]{
        width: 220px;
        margin-left: 35px;
        display: block;
        font-family: Verdana,Arial;
        font-size: 18px;
    }

    input[data-class~="class1"]{
        width: 320px;
        margin-left: 35px;
        display: block;
        font-family: Verdana,Arial;
        font-size: 28px;
    }

    input[data-class^="tclass"]{
        width: 420px;
        margin-left: 35px;
        display: block;
        font-family: Verdana,Arial;
        font-size: 18px;
    }

    input[data-class$="tt"]{
        width: 440px;
        margin-left: 35px;
        display: block;
        font-family: Verdana,Arial;
        font-size: 18px;
    }

    input[data-class*="clsasst"]{
        width: 240px;
        margin-left: 35px;
        display: block;
        font-family: Verdana,Arial;
        font-size: 18px;
    }

</style>

 <div id="container" >

     <input type="text" value="E[attr = value]">
     <input type="text" value="E[attr = value]">
     <input type="button" value="E[attr = value]">
     <input type="button" value="E[attr = value]">
    <br>
     <input type="text" data-class="class1 class2" value="E[attr ~= value]">
     <input type="text" data-class="class2 class1" value="E[attr ~= value]">

     <br>
     <input type="text" data-class="tclass1 class2" value="E[attr ^= value]">
     <input type="text" data-class="tclsasstt" value="E[attr $= value]">
     <input type="text" data-class="tclsasstt2" value="E[attr $= value]">
 </div>

<body>

</body>
</html>

效果：

Paste_Image.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

eg:

<style>
    .div1{
        width: 600px;
        margin: 0 auto;
    }
    .div1 p:first-of-type
    {
        background:#ff0000;
    }
    .div1 p:last-of-type{
        font-weight: bold;
    }


    .btn{
        width: 60px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border: 1px solid blue;
        border-radius: 5px;
        cursor: pointer;
    }
    .btn:hover{
        background: blue;
        color: white;
    }
    .btn:active{
        background: lightblue;
    }

</style>

<div class="div1">
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>

    <div class="btn">按钮</div>
</div>

效果：

Paste_Image.png

伪元素选择器

选择器	含义
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

eg:

<style>
    ul, li{
        list-style: none;
    }
    a{
        color: black;
        line-height: 20px;
        text-decoration: none;

    }
    a::before{
        content: '\f04';
        color: red;
    }
    a::after{
        content: ' hello';
        color: green;
    }
</style>
<ul class="list">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
</ul>

效果：

Paste_Image.png

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

从高到低分别是

在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
style内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高，越接近下层，则越优先

3、class 和 id 的使用场景?

class标签比较灵活，可以单独使用，也可以和其它元素组合使用，比id选择器更加方便些，所以实际开发中用的更频繁。
id选择器主要用于唯一重要的元素，以及外部结构区块。一般html文档会有很多区块，其中的主要结构区块都是用id选择器，结构语义化更清晰。

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

为了防止css之间发生冲突和覆盖问题，导致页面混乱。
代码易于维护和扩展

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

/* 选择id="header"的元素 */
#header{
}

/* 选择class="header"的元素 */
.header{
}

/* 选择祖先元素为class="header"的class="logo"元素 */
.header .logo{
}
/* 选择class中同时含有header和mobile的元素 */
.header.mobile{
}

/* 选择祖先元素为class="header"的p元素和选择祖先为class="header"的h3元素 */
.header p, .header h3{
}

/* 
选择祖先为class="header" 且直接父元素为class="nav"的所有li元素 
*/
#header .nav>li{
}

/* 选择祖先为class="header"的a元素的伪类:hover */
#header a:hover{
}

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

:visited
:hover
:link
:active
:focus
:enabled
:disabled
:checked
:root
:first-of-type
:last-of-type
:nth-last-of-type
:nth-of-type()
:first-child
:last-child
:only-child
:nth-child()
:empty

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

:first-child匹配的是某父元素的第一个子元素，是html结构上的第一个子元素,嵌套关系下的第一个子元素，也是会被匹配。
:first-of-type匹配的是某父元素下相同类型子元素中的第一个，不限制是第一个子元素，只要是该类型元素的第一个就可以。

eg:

<style>

    .content {
        width: 600px;
        margin: 0 auto;
    }
    ul, li{
        list-style: none;
    }
    a{
        color: black;
        line-height: 20px;
        text-decoration: none;
    }

    .class1:first-child{
        color: #ffffff;
        font-size: 39px;
    }

    .class1:first-of-type{
        background-color: #00ffff;
    }

</style>

<div class="content">

    <p class="class1">aa</p>
<ul class="list">
    <li class="class1">链接1</li>
    <li><a href="#">链接2</a></li>
    <li class="class1"><a href="#">链接3</a></li>
</ul>

    <p class="class1">aa</p>
    <h3 class="class1">bb</h3>
    <h3 class="class1">ccc</h3>
    <span class="class1">aa</span>

</div>

效果：

Paste_Image.png

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>

蓝色背景：样式里面设置了first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。
红色字：first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色。

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

text-align: center作用是使元素水平居中
作用在块级元素上，让块级元素内部的行内元素（如文本、input、图片）水平居中

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

到Can I use查看
e:

Paste_Image.png

** 本教程版权归作者和饥人谷所有，转载须说明来源！ **

任务8-CSS选择器

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

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

3、class 和 id 的使用场景?

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

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客