web进阶之四：CSS选择器

2018-09-09 本文已影响5人甚得朕心

什么是选择器和其作用

实现对HTML页面中的元素实现一对一，一对多或者多对一的控制。

HTML页面中的元素就是通过CSS选择器进行控制的

比如：p这个选择器就表示选择页面中的所有的p元素(标签)，在选择器之后所设置的样式会应用到所有的p元素上。

各类选择器

由于网页实现的效果和功能不一样，所以要用到不同的样式，那么选择器也是如此，可以实现对不同元素的控制，从而达到对网页的多重显示。

元素选择器

元素选择器(标签选择器)，可以根据标签的名字来从页面中选取指定的元素。通常选择器会写在<head>标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
<style>
        p{
          color:black;
          font-family: sans-serif;
          }
</style>
</head>
<body>
        <h>我是元素选择器的介绍</h1>
    <p>我是</p>
</body>
</html>

效果图:

001.JPG

上图中可以看到:

标题是：我是元素选择器的介绍
而段落中的“我是”，字体成为了红色，因为我在元素选择中设置了颜色为红色。

类选择器

类选择器，可以根据元素的class属性值选取元素。不过得在<body>标签中定义类。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .hello{
            font-size:25px;
        }
        .p2{
            color: blue;
        }
        .p3{
            color:red;
        }
        span.p3{
            color:chartreuse;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>悯农</h1>
<!--标题-->
<p id="p1">床前明月光</p>
<!--
    我们可以为元素设置class属性
    它和id属性类似，只不过class属性可以重复
    拥有相同class属性值的元素，我们说他们是一组元素
     -->
<p class="p2 hello">我是p2类，但是还有个兄弟hello</p>
<!--可以同时为一个元素设置多个class属性值，上为值为p2和hello，下面只是类属性，值都为p2。多个值之间使用空格隔开-->
<p class="p2">我只是单个p2类，没有兄弟hello</p>
<p class="p2">床前明月光</p>
<p>我是p标签</p>
<p class="p3">我是p3类，没有兄弟</p>
<span class="p3">我是span标签中的p3类</span>
</body>
</html>

在上面的代码中我们看到，虽然有含有类的标签有5个，但是类属性相同的有2两个:

我只是单个p2类，没有兄弟hello
床前明月光
而我是p2类，但是还有个兄弟hello中，虽然也定义了一个属性p2，但是后面多加了一个属性hello。所以我们为了区别多属性和单一属性的区别，在内部样式中，给含有hello属性的标签，又添加了一个字体的大小，这样两个都有p2属性的标签，却在显示的时候不一样了。

001.JPG

看的比较仔细的小伙伴会发现，有两个属性相等的p3但是页面显示时结果却不一样，这是为什么呢？
*我是p3类，没有兄弟
*我是span标签中的p3类

其实不难发现，虽然属性是相同的，但是我们定的标签不一样呀！所以我们在写样式的时候，特意把标签也加上了，表明我们span.p3（即我是span标签中类属性值为p3的行），也是下面我们要讲到的（复合选择器）交集选择器。

ID选择器

ID选择器，可以根据元素的id属性值选取元素，虽然看着和类选择器有点相似，但是最大的区别就是，类属性可以定义多个相同的，就如同上面的代码一样，有多个一样的属性，如p2，但是id属性是不能重复的。

<!DOCTYPE html>
<html lang='en'>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='description' content='id选择器，选择器' >
    <meta name='keywords' content='id选择器，什么是id选择器'>
    <title>我这里是id选择器的介绍</title>
    <style>
        #p1{
        font-size:30px;
        color:red;
        }
        #p2{
        font-size:35px;
        color:blue;
        }
    </style>
</head>
<body>
        <h1>id选择器是这样的</h1>
        <p id='p1'>子曰：学而时习之。</p>
        <p id='p2'>子曰：学而时习之。</p>
        <!--这里同样的Id属性，但是，因为值不能相同，所以我们分别给了一个p!和p2-->
</body>
</html>

id.JPG

切记，给标签定义id属性时，值一定不能为重复的。

复合选择器（交集选择器）

上面的类选择器中我们已经用到了。

 span.p3{
            color:chartreuse;
            font-size: 30px;
        }
<!--会选中页面中具有p3class的span元素-->

群组选择器(并集选择器)

群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

我们在实际的操作过程中通常会遇到一个场景，即元素很多，但是我们又想让他们的样式一样，总不能像我们介绍元素选择器那样，一个个的定义样式吧。

所以我们通常会使用群组选择器，这样代码更加简单，但是效果却不丢失。

<!DOCTYPE html>
<html lang='en'>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='description' content='id选择器，选择器' >
    <meta name='keywords' content='id选择器，什么是id选择器'>
    <title>我这里是id选择器的介绍</title>
     <style type="text/css">
        p,.p1{
        font-size:30px;
        color:red;
        }

    </style>
</head>
<body>
        <h1>id选择器是这样的</h1>
        <p>子曰：学而时习之。</p>
        <p>子曰：有朋自远方来。</p>
        <p class="p1">子曰：学而时习之</p>
</body>
</html>

这里我们用了群组选择器，把p元素和含有类属性值为p1的元素，都设置为相同的字体大小和颜色了。

并集选择器.JPG

通用选择器

通用选择器和我们学习过的其他编程语言一样，用了一个通配符会选中页面中所有的元素。

后代选择器

在介绍后代选择器的时候，我们首先得明白html中的族谱，如下所示:

族谱.JPG

通过观察族谱我们可以了解各个标签之间的关系:

祖先元素
---直接或间接包含后代元素的元素。
后代元素
---直接或间接被祖先元素包含的元素。
父元素
---直接包含子元素的元素。
子元素
---直接被父元素包含的元素。
兄弟元素
---拥有相同父元素的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素和后代元素选择器</title>
    <style type="text/css">
        /*为div中的span设置一个颜色为绿色*/
        /*
            后代元素选择器
                作用：选中指定元素的指定后代元素
                语法：祖先元素 后代元素{}
        */
        #d1 span{
            color: green;
            background-color:black;
        }
        /*选中id为d1的div中的p元素中的span元素,字体大小为50px*/
        #d1 p span{
            font-size: 50px;
        }
        /*为div的子元素span设置一个背景颜色为黄色*/
        /*
            子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
            IE6及以下的浏览器不支持子元素选择器
        */
        div > span{
            background-color: yellow;
        }
        h1>strong {
            background-color:red;
        }
    </style>
</head>
<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is really <em><strong>very</strong></em> important.</h1>
<div id="d1">
    <span>我是div标签中的span</span>
    <p><span>我是p标签中的span</span></p>
</div>
<div>
    <span>我是body标签中的span</span>
</div>
</body>
</html

在上面的代码中我们写了两个<div>标签，不同的是，我们给第一个增加了一个id属性值为d1。这样我们在写内部样式表的时候，就会看到区别。

在第一个我们用id选择器的特殊符号 # 选择了属性值为d1的标签div，并设置颜色为绿色
第二个我们用了后代选择器，即:#d1 p span 这样我们给整个span元素设置了一个字体大小为50px。
第三个，我们用了子代选择器，特别注意的是，我们在这里加了一个符号 >作为子代选择器的特殊用法。
后代选择器.JPG

伪类和伪元素

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

设置链接的状态-->伪类选择器

有时候我们在浏览网页的时候回看到，鼠标滑过的、点过的、和悬停的，和正常链接颜色都能是不一样的，其实这个也是通过伪类选择器来实现的。

伪类选择器用来表示特殊状态的。

正常链接
---a:link
访问过的链接
---a:visited（涉及用户的隐私了，只能定义字体颜色，像其他的字体大小都不能设置。）
鼠标滑过的链接
---a:hover
正在点击的链接
---a:active

如果上面的都想实现，那就得按照上面的顺序，一次写，因为颜色的继承也是有优先级的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*
            伪类专门用来表示元素的一种特殊的状态
            比如：访问过的超链接、普通的超链接、获取焦点的文本框
            当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
        */
        /*
            为没访问过的链接设置一个颜色为黄色
                :link   表示普通的链接（没访问过的链接）
        */
        a:link{
            color: yellow;
            font-size: 50px;
        }
        /*
            为访问过的链接设置一个颜色为红色
                :visited    表示访问过的链接
            浏览器是通过历史记录来判断一个链接是否访问过
            由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色，比如用户点进去一个小网页，却说没有访问过，但是网页字体却变了，是不是就露馅了。
        */
        a:visited{
            color: red;
        }
        /*
            :hover  表示鼠标移入的状态，即: 悬停状态
        */
        a:hover{
            color: skyblue;
        }
        /*
            :active 表示超链接被点击的状态 即：点击了但是没有移开
        */
        a:active{
            color: black;
        }
        /*
            :hover和:active也可以为其它元素设置
            IE6中，不支持对超链接以外的元素设置:hover和:active
        */
    </style>
</head>
<body>
            <a class="abc" href="http://www.baidu.com">访问过的链接</a>
            <br /><br />
            <a class="bcd" href="http://www.hao123.com">没访问过的链接</a>
            <p>我是一个段落</p>
</body>
</html>

其他的伪类和页面内的文本框

获取焦点
——:focus
选中的元素(就是鼠标选择时)p::selection{}
——::selection

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*文本框获取焦点以后，修改背景颜色为黄色，即点进去就是获取焦点*/
        input:focus{
            background-color: yellow;
        }
        /*
        为p标签中选中的内容使用样式可以使用::selection伪类
        注意：这个伪类在火狐中需要采用另一种方式编写
        选中就是你用鼠标选中p标签内的内容。
        */
        /*兼容大部分浏览器的*/
        p::selection{
            background-color: orange;
        }
        /*兼容火狐的*/
        p::-moz-selection{
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>请在这里输入想要查找的内容</p>
    <input style="color: yellow">
</body>
</html>

给段落或者行首定义样式

首字母(还有行内首个汉字)
——:first-letter
首行(给整个段落内的整个首行)
——:first-line
指定元素前
——:before
指定元素后
——:after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style type="text/css">
        /*使用伪元素来表示元素中的一些特殊的位置*/
        /*为p中第一个字符来设置一个特殊的样式
          颜色为红色，字体大小为20px
        */
        p:first-letter{
            color: red;
            font-size: 20px;
        }
        /*为p中的第一行设置一个背景颜色为黄色*/
        p:first-line{
            background-color: yellow;
        }
    </style>
</head>
<body>
<p>
    锄禾日当午,<br>
    汗滴禾下土。<br>
    谁知盘中餐,<br>
    粒粒皆辛苦。 <br>　　
</p>
</body>
</html>

效果如图所示，注意看首个汉字。

伪元素.JPG

其他选择器

属性选择器可以挑选带有特殊属性的标签即：
可以根据元素中的属性或属性值来选取指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*
        属性选择器
            作用：可以根据元素中的属性或属性值来选取指定元素
            语法：
                [属性名] 选取含有指定属性的元素
                [属性名="属性值"] 选取含有指定属性值的元素
                [属性名^="属性值"] 选取属性值以指定内容开头的元素
                [属性名$="属性值"] 选取属性值以指定内容结尾的元素
                [属性名*="属性值"] 选取属性值包含指定内容的元素
         */
        /*为所有具有title属性的p元素，设置一个背景颜色为黄色*/
        p[title]{
            background-color: yellow;
        }
        /*!*为title属性值是hello的元素设置一个背景颜色为黄色*!*/
        p[title="hello"]{
            background-color: red;
        }
        /*!*为title属性值以ab开头的元素设置一个背景颜色为黄色*!*/
        p[title^="ab"]{
            background-color: blue;
        }
        /*!*为title属性值以c结尾的元素设置一个背景颜色*!*/
        p[title$="c"]{
            background-color:brown;
        }
        /*!*为title属性值包含c的元素设置一个背景颜色*!*/
        p[title*="f"]{
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--
    title属性，这个属性可以给任何标签指定
    当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
 -->
<p title="hello">我是一个title属性值为hello的段落</p>
<p>我是一个普通的p标签段落</p>
<p title="abb">我是以ab开头的段落</p>
<p title="abccfd">我是属性值中有f的段落</p>
<p title="dabc">我是以c结尾的段落</p>
</body>
</html>

我们首先样式的第一个

p[title]{
background-color: yellow;
}
为所有具有title属性的p元素，定义背景元素为黄色

所有属性为title的p标签.JPG

接下来我们一共展示以下的集中属性值不同的样式

属性值为hello的p元素 ---> p[title="hello"]
属性值中以ab开头的p元素 ---> p[title^="ab"]
属性值以c结尾的p元素 ---> p[title$="c"]
属性值中包含f的p元素 ---> p[title*="f"]

不同样式的属性值.JPG

子元素选择器

子元素选择器我们在上面的选择器中有点设计，它主要的用途就是可以给一个元素的子元素设置样式。而且是直接的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素</title>
    <style type="text/css">
        /*为div的子元素span设置一个背景颜色为黄色*/
        div > span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="d1">
        <span>我是div标签中的span</span>
        <p><span>我是p标签中的span</span></p>
    </div>
    <div>
        <span>我是body标签中的span</span>
    </div>
</body>
</html

通过我们写的代码可以看到，我在div标签下，有很多span的元素，但是我想让除了父代元素是p标签的所有span标签变成黄色，那么我们这里就用了子代选择器通过加了一个大于号 >来实现。

子元素选择器.JPG

为了满足很多人的不同想法，其实还有很多其他的子元素选择器

:first-child
选择第一个子标签
:last-child
选择最后一个子标签
:nth-child
选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
选择指定类型的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
/*由于在body中有p元素，在div中也有p标签，如果不用如下的写法，那么第一个都会变色。*/
        body>p:first-child{
            background-color: yellow;
        }
        p:last-child{
            background-color: red;
        }
/*even为选中了偶数行，odd为选中奇数行
   也可以在里面写相应的数字，那就成了制定行了。
*/
        p:nth-child(even){
            background-color: blue;
        }
    </style>
</head>
<body>
<!--<span>我是span</span>-->
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是span</span>
<div>
    <p>我是一个p标签</p>
</div>
</body>
</html>

:first-of-type
:last-of-type
:nth-of-type
            /*和child类似，只不过child是在所有的子元素中找*/
            /*而type是在当前类型的子元素中找，下面的例子即在p标签内的第一个和最后一个
            这个大家可以自己写着看看有啥不一样。
          */
        p:first-of-type{
            background-color: yellow;
        }
        p:last-of-type{
            background-color: red;
        }

兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。
用法：

查找后边一个兄弟元素
---兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
---兄弟元素 ~ 兄弟元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟元素选择器</title>
    <style type="text/css">
        /*
        为span后的一个p元素设置一个背景颜色为黄色
        后一个兄弟元素选择器
            作用：可以选中一个元素后紧挨着的指定的兄弟元素
            语法：前一个 + 后一个
         */
        span + p{
            background-color: yellow;
        }
        /*
        选中后边的所有兄弟元素
            语法：前一个 ~ 后边所有
        */
        span ~ p{
            background-color: yellow;
        }
    </style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>

在这段代码中我们大家要注意的就是

兄弟即同一个父类元素。
在查找兄弟后面那个兄弟元素时，必须是紧跟着的就是要查找的，如果中间加一个其他的，那是不会被选中的。
查找后面的兄弟元素时，那就是只要是在后面，那我们就选中。

否定伪类

既然我们能选中伪类，那么我们也能不选中其中的某个值。
否定伪类可以帮助我们选择不是其他东西的某件东西。
语法:
:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。