web进阶之四：CSS选择器

什么是选择器和其作用

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

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

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

各类选择器

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

元素选择器

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

    
    



        我是元素选择器的介绍
    
我是

效果图:

001.JPG

上图中可以看到:

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

类选择器

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

    
    
    


悯农

床前明月光

我是p2类，但是还有个兄弟hello

我只是单个p2类，没有兄弟hello
床前明月光
我是p标签
我是p3类，没有兄弟
我是span标签中的p3类

  在上面的代码中我们看到，虽然有含有类的标签有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属性是不能重复的。

    
    
    
    
    


        
id选择器是这样的
        
子曰：学而时习之。
        
子曰：学而时习之。
        

id.JPG

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

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

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

 span.p3{
            color:chartreuse;
            font-size: 30px;
        }

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

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

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

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

    
    
    
    
     


        
id选择器是这样的
        
子曰：学而时习之。
        
子曰：有朋自远方来。
        
子曰：学而时习之

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

并集选择器.JPG

通用选择器

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

后代选择器

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

族谱.JPG

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

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

    
    
    


    
This is very very important.
    
This is really very important.

    我是div标签中的span
    
我是p标签中的span


    我是body标签中的span

在上面的代码中我们写了两个

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

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

伪类和伪元素

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

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

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

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

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

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

    
    
    


            访问过的链接
            


            没访问过的链接
            
我是一个段落

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

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

    


    
    
    


    
请在这里输入想要查找的内容
    

给段落或者行首定义样式

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

    
    
    



    锄禾日当午,

    汗滴禾下土。

    谁知盘中餐,

    粒粒皆辛苦。 
　　

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

伪元素.JPG

其他选择器

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

    
    
    



我是一个title属性值为hello的段落
我是一个普通的p标签段落
我是以ab开头的段落
我是属性值中有f的段落
我是以c结尾的段落

我们首先样式的第一个

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

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

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

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

不同样式的属性值.JPG

子元素选择器

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

    
    
    


    

        我是div标签中的span
        
我是p标签中的span
    
    

        我是body标签中的span
    

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

子元素选择器.JPG

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

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

    
    
    



    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    
我是一个p标签
    我是span

    
我是一个p标签

: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;
        }

兄弟选择器

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

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

    
    
    


我是一个p标签
我是一个p标签
我是一个p标签
我是一个span
我是div
我是一个p标签
我是一个p标签
我是一个p标签

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

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

否定伪类

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