CSS-选择器

时间  2019-11-18 标签 css 选择器

 

（一）选择器的概念css

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

选择器{
    样式;
}

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

（二）选择器的类型浏览器

      1.标签选择器微信

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

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

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

      2.类选择器字体

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

语法：编码

.类选器名称{css样式代码;}

注意：

一、英文圆点开头

二、其中类选器名称能够任意起名（但不要起中文噢）

使用方法：

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

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

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

  3.ID选择器

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

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

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

    4.子选择器

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}:.food为子类选择器的名称，li是指定做用于某个元素的第一代标签中的<li>标签。在body中具体应用为：
<某个元素 class="food">...<span>...</span>...<li>....<span>...</span>...</li>   在这里，li元素里面的内容则改变样式，其他的都不会改变。
例如：

<style type="text/css">

.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{
border:1px
solid red;
}
</style>
</head>
<body>
<p class="first">三年级时，<span>我仍是一个<span>胆小如鼠</span>的小女孩</span>，上课历来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>

 

 包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你能够理解为做用于子元素的第一代后代。然后代选择器是做用于全部子后代元素。后代选择器经过空格来进行选择，而子选择器是经过“>”进行选择。

总结：>做用于元素的第一代后代，空格做用于元素的全部后代。

 

 

通用选择器

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

* {color:red;}

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

伪类和伪元素

伪类

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

 

语法

 

伪类的语法：

 

selector:pseudo-class {property:value;}

 

CSS类也可使用伪类：

 

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

anchor伪类

 

 

伪类和CSS类

 

:first - child伪类

定义和用法

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

例如：选择属于其父元素的首个子元素的每一个 <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 选择器向选定的元素前插入内容。

: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"的完整存在是必要的。
既然笔记主要针对是: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 相邻兄弟选择器

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

 

选择相邻兄弟

若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器（Adjacent sibling selector）。

例如，若是要增长紧接在 h1 元素后出现的段落的上边距，能够这样写：

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

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

语法解释

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

注释：与子结合符同样，相邻兄弟结合符旁边能够有空白符。

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

联系我们 沪ICP备13005482号-10