时间戳

首页 > 技术文章 > CSS-选择器

CSS-选择器

yyn120804 2017-01-14 22:07 原文

 

（一）选择器的概念

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

（二）选择器的类型

      选择器的分组：

      你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组，所有的标题都是绿色的。

例如：h1,h2,h3,h4,h5,h6{

                                   color:green;

                                  }      

      1.标签选择器

        最常见的CSS选择器是元素选择器，换句话说，文档的元素就是最基本的选择器。

         标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

      2.类选择器

        类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法：

.类选器名称{css5代码;}

注意：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

<span>胆小如鼠</span>

第二步：使用class="类选择器名称"为标签设置一个类，如下：

<span class="stress">胆小如鼠</span>

第三步：设置类选器css样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/
例如：

<style type="text/css">
.stress{
color:red;
}
.setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

类选择器和标签选择器相比，类选择器可以在任何地方、任何一个标签中使用，而标签选择器只能用于本标签

类选择器的几种用法：
                   （1）例如：.center{text-align:center;}
                           在这个例子中，所有拥有center类的元素均居中。
                  （2）和id选择器一样，class也可被用作派生选择器
                       例如：.fancy td{color:#f60;background-color:#666};
                       在这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为fancy的元素可能是一个表格或者div）
                    (3)元素也可以基于它们的类而被选择[选择器之间没有空格，则表示且]
                       td.fancy{color:#f60;background-color:#666;}//选择td元素并且是有类名为fancy的td元素
                       切记：这个例子和上一个例子的区别是，td 和.fancy之间没有空格!
                       在这个例子中，类名为fancy的单元格将是带有灰色背景的橙色。你可以将fancy类分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景橙色文字
                       那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落页不会带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不
                           会受这条规则的影响。这是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的单元格（即使用td元素来选择fancy类）。

3.ID选择器

      在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

3、ID是唯一的，而类可以应用于多个元素。（即：id 属性只能在每个 HTML 文档中出现一次）

    id选择器可以为标有特定id的HTML元素指定特定的样式。

   例如：

   

   id选择器和派生选择器

   在现代布局中 ，ID选择器常用于建立派生选择器

   例如   #sidebar  p{

                                 font-style:italic;

                                 text-align:center;

                                 margin-top:0.5em;

                            }

          上面的样式只会应用于出现id是sidebar元素内的段落里。这个元素很可能是div或者表格单元，尽管它也可能是一个表格或者其它块级元素。它甚至可能是一个内联元素，比如<em></em>或<span></span>,不过这样的用法是违法的，因为不能在内联元素内嵌入<p>

 

  派生选择器

  派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更简洁。

  在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器，这个由于他们依赖于上下文关系来应用或规免某项规则。在CSS2中称为派生选择器，但无论怎么称呼它们，它们的作用都是相同的。

  派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。例如：你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

      li  strong{

                       font-style: italic;

                       font-weight: normal;

 

                  }

    请注意标记为<strong>的蓝色代码的上下文关系：

1 <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
2 
3 <ol>
4 <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
5 <li>我是正常的字体。</li>
6 </ol>

    在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

    派生选择器包括 【1】后代选择器；【2】子元素选择器【3】相邻元素选择器

   

    4.子选择器

   还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

   如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

   例如：如果你希望选择只作为h1元素子元素的strong元素，可以这样写：

   h1>strong{color:red;}

  这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong元素不受影响。例如：

   

例如：

      

   语法解释

   子选择器用了大于号（子结合符）

   子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

 

  后代选择器

    后代选择器又称为包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

   根据上下文选择元素

    我们可以定义后代选择器来创建一些格则，使这些规则在某些文档结构中起作用，而在另一些结构中不起作用。

   

   当然，你也可以在h1中找到的每一个em元素上放上一个class属性，但是显然后代选择器的效率更高。

   语法解释

   在后代选择器中，规则左边的选择器一端包括两个或者多个用空格分隔的选择器。选择器之间的空格是一种结合符。每个空格结合符可解释为：“...在...找到”,"...作为...的一部分"，“...作为...的后代”，但是要求必须从右向左读选择器。

   因此，h1 em选择器  可解释为“作为h1元素后代的任何em元素”。如果要从左向右读选择器，可以换成以下说法“包含em的所有h1会把以下样式应用到该em”.

   例如：假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

            解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：       

       div.sidebar {background:blue;}
       div.maincontent {background:white;}
       div.sidebar a:link {color:white;}
       div.maincontent a:link                                                                                 例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

              

       注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

      总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

 

CSS 相邻兄弟选择器【相邻不是同胞】

      相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

      选择相邻兄弟

      如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

      例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

  h1 + p {margin-top:50px;}

     这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

 请记住用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

 

 

   通用选择器

    通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

 * {color:red;}

 在body中不需要书写任何代码 

  伪类和伪元素【二者都脱离文档流，dom文档】

    I.伪类[也是一种类选择器.伪类似于.class.class的用法，只不过.class.class是存在于在dom文档中，而.class:伪类选择器中的伪类选择器是不存在HTML中的。例如:p:hover{color:red}.这个就是选中p元素，并且是当鼠标移动到其上面的p元素]

    由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。在dom文档中找不到。

  语法

   伪类的语法：

   selector:pseudo-class {property:value;}//选中selcetor元素并且:伪类选择器。即选中selector元素并且这个元素是伪类选择器代表的一种状态或者特点。例如：p:first-child{font-size:18px;}//选中p元素并且p元素是第一个子元素（其父元素的）

   CSS类也可以使用伪类：

   selector.class:pseudo-class {property:value;} 
   anchor伪类

     

    伪类和CSS类

    

     :first - child伪类【且！选取一个元素并且这个元素是第一个子元素】

     定义和用法

        :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器

      提示：最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素

       例如：选择属于其父元素的首个子元素的每个 <p> 元素

     匹配第一个 <p> 元素

        

     在这个例子中，p:first-child选取了一些p元素，这些p元素的特点是：其是其父类元素的第一个子元素。

                   

 

    匹配所有<p> 元素中的第一个 <i> 元素

     

   匹配所有作为第一个子元素的<p> 元素中的所有 <i> 元素

     

 

  hover

 关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

  

  伪元素

   CSS伪元素是用来添加一些选择器的特殊效果。

   CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

  语法

   伪元素的语法：

   selector:pseudo-element {property:value;}

   CSS类也可以使用伪元素：

   selector.class:pseudo-element {property:value;}

  :first-letter伪元素【代表文本的首个文字或者字母。设置伪元素的主要目的就是补选择器的短板。】

   "first-letter" 伪元素用于向文本的首字母添加特殊样式。

    在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

    

   :first-line 伪元素【这个伪元素代表第一行】

   "first-line" 伪元素用于向文本的首行设置特殊样式。

    在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

 

     注意："first-line" 伪元素只能用于块级元素

 

  :before 伪元素

   定义和用法

   :before伪元素在元素内容的最前面添加内容

   这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用display属性改变这一点。

   :before 选择器向选定的元素前插入内容。

   :before是伪元素，并且它生成包含放置在元素中的内容之前的生成内容的伪元素。

   使用content 属性来指定要插入的内容。

   默认情况下，生成的伪元素是内联的，但这可以使用属性显示更改。

   

 例二：

   

  

 （http://www.mamicode.com/info-detail-1167116.html）

   例如，我们的元素p的内容为

ello Worl 
  <style type="text/css"></style>
    <title>Title</title>
</head>
<body>
<p>ello Worl</p>
</body>

   即：

  现在需要给 ello的前面加H  Worl的后面加d

 <style type="text/css">
        p:before{
            content: 'H';
        }
        p:after{
            content: 'd';
        }
    </style>
    <title>Title</title>
</head>
<body>
<p>ello Worl</p>

   结果为：

    

   我们通过浏览器的审查元素看到的结果为：

 （这就是为什么我点击小米或者别人网站的审查元素看到的那么多的：：before    ：：after。坑爹啊）

     p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。作为一只合格的程序猴子，捍卫"Hello World"的完整存在是必要的。

   CSS2 - :after 伪元素

    ":after"伪元素可以在元素内容之后插入新内容；

    具体用法和before类型。。。

    

 

    既然笔记主要针对是:before和:after，那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

     1.结合border写个对话框的样式。

     本兽将上面这句话拆成2部分：结合border，写个对话框的样式。

<style type="text/css">
        .triangle{
            position: relative;
            width: 100px;
            height: 36px;
            border-radius: 5px;
            border: 1px solid black;
            background: rgba(245,245,245,1)
        }
        .triangle:before{
            content: "";
            display: block;
            width: 0px;
            height: 0px;
            position: absolute;
            top: 10px;
            left: -12px;
            border-top: 6px solid ;
            border-right:6px solid ;
            border-bottom: 6px solid;
            border-left: 6px solid;
            border-color: transparent black transparent transparent;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="triangle"></div>

通过以上代码，我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是，在对话框的四周的边框不是完整的，而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有，该怎么办呢？让召唤:after穿着棉大衣来救场吧~

  <style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能，重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

好了，完整的一个对话框样式呈现在眼前了，至于对话框的小三角形的方向，相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧，没错，就是改下position的位置，改下border显示颜色的方位~ (本兽不喜欢贴图片，体谅下额，需要的可以拷贝代码直接运行看效果，造轮子不仅仅是造轮子，也能让人加深印象，更好的理解)

 

伪类和伪元素的区别：
首先，阅读 w3c 对两者的定义：
1.CSS 伪类用于向某些选择器添加特殊的效果。                       向   某些选择器    添加     特殊效果
2.CSS 伪元素用于将特殊的效果添加到某些选择器。               将   特殊的效果   添加到  某些选择器
可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

 

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较

 

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 

CSS Code复制内容到剪贴板
  1. :Pseudo-classes   
  2. ::Pseudo-elements  

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

 

CSS 属性选择器

    对带有指定属性的 HTML 元素设置样式。

    可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性

   CSS [attribute] 选择器

    [attribute] 选择器用于选取带有指定属性的元素。   

   例一

   下例选择所有带有 target 属性的 <a> 元素；

   

<html>
<head>
<style>
a[target]{background-color:yellow;}
</style>
</head>
<body>

<h1>CSS [attribute] 选择器</h1>

<p>带有 target 属性的链接获得颜色背景：</p>

<a href="https://www.w3school.com">w3school.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

     结果如图所示：

     

 

    CSS [attribute="value"] 选择器 

     [attribute="value"] 选择器用于选取带有指定属性和值的元素。

     下例选取所有带有 target="_blank" 属性的 <a> 元素：

   

 

   CSS [attribute~="value"] 选择器

     [attribute~="value"] 选择器选取属性值包含指定单词的元素。

    下例选取 title 属性包含 "flower" 单词的所有元素：

     

    上例中，如果写为[title="flower"]{border:5px solid yellow;}

    显示结果如下：

        

 

      上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

         

   CSS [attribute|="value"] 选择器

    [attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

   下例选取 class 属性以 "top" 开头的所有元素：

   注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

         

 

     CSS [attribute^="value"] 选择器

      [attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

     下例选取 class 属性以 "top" 开头的所有元素：

     提示：值不必是完整单词！

 

     

 

    CSS [attribute$="value"] 选择器

      [attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

     下例选取 class 属性以 "test" 结尾的所有元素：

      提示：值不必是完整单词！

      

     

    CSS [attribute*="value"] 选择器

      [attribute*="value"] 选择器选取属性值包含指定词的元素。

     下例选取 class 属性包含 "te" 的所有元素：

      提示：值不必是完整单词！

   

   设置表单样式

    若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

    

     注释：|   属性值的开头是top,并且必须是完整或单独的单词，[class|='top']   比如 class="top" 或者后跟连字符的，比如 class="top-text"。 比如class="tops",class="left top"等都不可以;

             ^   属性值的开头是top,但可以是完整的或者单独的单词也可以是单词中的一部分（范围更广一些），比如 class="top" 或者后跟连字符的，比如 class="top-text"或 比如class="tops"

                 但是比如class=" left top"就不行，因为属性class属性值有两个，必须是以top作为属性作为开头"，再比如class=“top  left”就可以。

            $   属性值结尾是某个子字符串。跟^一样，只不过是结尾。

   CSS 选择器

    在 CSS 中，选择器是选取需设置样式的元素的模式。

   请使用我们的 CSS 选择器测试工具，它可为您演示不同的选择器。

    

   

  

  

推荐阅读