CSS选择器

2016-07-02 本文已影响128人婷楼沐熙

一.CSS选择器常见的有几种?

1.基础选择器

选择器	含义
*	选中所有的元素，一般使用的较少，像margin、padding之类的还偶尔可以用一下
#id	id选择器，用来匹配设定了的id的元素，它具有唯一性，一般在页面大的区块就会使用id选择器
.class	类选择器，用来匹配class包含的特定类的元素，不具有唯一性
element	适用于一般的标签选择器

下面写了一个小的例子：JS bin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基础选择器</title>
<style>
  *{
  margin：0px;
  padding: 0px;
   }
#logo img{
  height: 45px;
  }
.nav, .main{
  border: 1px solid #ccc
 }
p{
  color: red;
 }
</style>
</head>
<body>
  <div id="header">
    <a id="logo" href="#">![](https://img.haomeiwen.com/i2244513/733244a8395264f4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
    <ul class="nav">
      <li>视频</li>
      <li>导师</li>
      <li>课件</li>
      <li>报名</li>
    </ul>
  </div>
  <div id="content">
    <P>最有爱的前端互助社区</p>
    <ul class="main">
      <li>导师棒棒哒</li>
      <li>课程最实用</li>
    </ul>
  </div>
  <div id="footer">欢迎加入我们</div>
</body>
</html>

基础选择器示例

2.组合选择器

选择器	含义
E,F	多元素选择器，用`,`分隔，任何形式的选择器都可以作为其中的一部分，表示同时匹配元素E或者元素F，适用于当某些选择器具有相同的样式，可以简化代码
E F	后代选择器，中间用空格隔开，用于匹配元素E所有的后代F
E>F	直接子元素选择器，中间用`>`隔开，用于匹配E的最外层子元素，也就是直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通兄弟选择器，用于匹配E元素之后的所有的同一级的元素F

还是要动手去实践，看了许久没有搞懂，自己动手写一写豁然开朗，还是要改掉眼高手低的坏毛病。下面给出一个小的例子。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>组合选择器</title>
    <style>
    h3[class="title 1"], p{
  color:red;
}
#content a{
  text-decoration: none;
}
#header > p{
  text-align: center;
}
#content + a{
  background: #ff0;
}
#header ~ p{
  border: 1px solid #ccc;
}
    </style>
</head>
<body>
  <div id="header">
    <h3 class="title 1">我是标题1</h3>
    <h3 class="title 2">我是标题2</h3>
    <p class="paragraph 1">我是段落1</p>
    <div>
       <p>我是段落2</p>
    </div>
  </div>
  <div id="content">
    <a href="#">按钮1</a>
    <div class="button">
      <a href="#">按钮2</a>
    </div>
  </div>
  <a href="#">按钮3</a> 
  <p>我是段落3</p>
</body>
</html>

组合元素选择器示例

3.属性选择器
属性选择器比较常用的就是element[attribute="value"]，用于匹配属性为value的元素。下面写一个它的一个最简单的使用场景，就是应用于input输入。这样可以不用再对其设置class名称，直接选中需要的元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>属性选择器</title>
 <style>
input[type='text']{
  outline: none;
}
</style>
</head>
<body>
  <form name="myForm" method="post">
  用户名：<input name="username" type="text" placeholder="用户名"> <br/>
  密码：<input name="pwd" type="password" placeholder="密码" >  <br/>
  </form>
</body>
</html>

属性选择器使用场景之一

4.伪类选择器
为什么叫伪类呢？状态是动态变化的，当一个元素达到一个特定状态的时候，它可能得到一个伪类的样式；当状态改变的时候，它又会失去这个样式。所以说它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪类选择器和一般的DOM中的元素样式不一样，它并不会改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说却是不可见的。

选择器	含义
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:hover	匹配鼠标放置的E元素，必须要位于link和visited之后才能生效
E:active	匹配鼠标已经按下、但是还没有释放的E元素，必须要位于hover之后才能生效
E:lang(c)	匹配lang属性等于c的E元素，lang伪类可以为语言定义特殊的规则
E:focus	匹配获得当前焦点的E元素，比如说应用于form表单的输入框
E:first-child	匹配元素E的第一个子元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
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:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>伪类选择器</title>
<style>
a:link{
  color: #0f0;
}
a:visited{
  color: #ccc;
}
a:hover{
  color: red;
}
a:active{
  background: #00f;
}
q:lang(no){
  quotes: "~" "~"
}
input[type="text"]:focus{
  background: yellow;
}
p:first-child{
  font-weight: bold;
}
li:first-child{
  text-transform:uppercase;
}
span:last-child{
  color: red;
} 
.programming span:nth-child(2n){
  background-color: #ccc;
}
p:nth-of-type(2n+1){
  color: #ddee00;
}
.preference > span:first-child{ 
  border: 1px solid #44dd88;
}
.fruit > span:first-of-type{
 background: #00f;
}
</style>
</head>
<body>
  <a href="http://book.jirengu.com" target="myPage">饥人谷</a>
  <a href="http://www.w3cschool.com" target="myPage">w3cshool</a>
   <p>超人<q lang="no">会飞</q></p>
  <form name="myForm" method="post">
    姓名：<input name="username" type="text" placeholder="用户名" /><br/>
    密码：<input name="pwd" type="password" placeholder="密码" enable/><br/> 
  </form>
<div>
<p>学习步骤：</p>
<ul>
<li>听课</li>
<li>做<strong>作业</strong></li>
<li>总结</li>
</ul>
<p>记住<em>不要</em> 眼高手低</p>
</div>
  <div class="programming">
    <span>前端</span>
    <span>java</span>
    <span>c++</span>
  </div>
  <div class="preference">
    <span>旅游</span>
    <span>交<span>知心</span>朋友</span>
    <span>运动</span>
  </div> 
  <h1 class="fruit">
    <p>香蕉</p>
    <p>西瓜</p>
    <p>葡萄</P>
  <span>橙子</span>
  </h1>
</body>
</html>

结果截图
代码github地址
结果预览
在上面的代码中，大部分的伪类选择器应该都举了例子。关于E:first-child这一类和E:first-of-type这一类需要注意的地方，在我的另外一篇博客里有详细的说明。因为写的比较长，就分开写了，需要看看的可以点击伪类选择器之E:first-child系列和E:first-of-type系列。这里就不作详细说明了。
5.伪元素选择器
伪元素就是用于向某些选择器设置特殊效果。如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，那就是伪类。在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号作区分。

选择器	含义
E:first-line/E::first-line	匹配E元素内容的第一行，仅能被用于块级元素
E:first-letter/E::first-letter	匹配E元素内容的第一个字母或者第一个字，仅能被用于块级元素
E:before/E::before	在E元素之前插入生成的内容
E:after/E::after	在E元素之后插入生成的内容

这里重点讲一下E::before和E::after这两个伪元素。他们特有的属性 content，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容，不会出现在DOM当中。除此之外还有：

[String] 使用引号包括一段字符串，将会向元素内容中添加字符串。
attr() 调用当前元素的属性，可以方便地将图片的 Alt 提示文字或者链接的 Href 地址等等显示出来。
url() / uri() 用于引用媒体文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>伪元素选择器</title>
<style>
a:after { content:"(" attr(href) ")"; }
a::before { content: url(http://www.jirengu.com/data/upload/2016/0321/16/56efb29eadb87.png); }
h1:before { content: "↗"; 
  }
p::first-line{
  color: red;
}
p::first-letter{
  border: 1px solid #ccc
}
</style>
</head>
<body>
  <a href="http://book.jirengu.com">饥人谷</a>
  <h1>前端</h1> 
  <p>学习</p>
</body>
</html>
</body>
</html>

二.选择器的优先级是怎样的?

优先级从高到低依次为：

在属性后面使用 !important,会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式。
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
总的来说，定位的越精准，优先级就越高。优先级高的样式会覆盖优先级低的。

三.class 和 id 的使用场景?

class名称是可以重复的，所以它一般用于给多个元素赋予同样的样式。如果还需要同样的样式，添加一个同名的class类就可以，这样能简化代码。
在一个页面中id名称不能重复，它一般用于划分大的区块。

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

使用语义化的命名可以使代码容易读懂。
便于维护和多人协作。
浏览器可能会因为不规范的命名产生不同的样式。

五.以下选择器分别是什么意思?

#header{
}    /* id选择器，选择id名称为header的元素 */
.header{
}   /* class选择器，选择class名称为header的元素 */
.header .logo{
}   /* 后代选择器，选择class名称为header元素的后代元素中class名称为logo的所有元素 */
.header.mobile{
}   /* 类选择器，选择class类同时具有header和mobile的元素 */
.header p, .header h3{
}   /* 多元素选择器，选择header中的p和h3元素 */
#header .nav>li{
}   /* 后代选择器，选择id为header的后代元素中class为nav的直接子元素（也就是nav的最外层子元素，即第一代子元素）li */
#header a:hover{
}   /* 后代元素选择器，选择id为header的所有后代元素a的鼠标悬停的效果 */

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

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

这部分在上面提到的另外一篇博客中已经做了详细说明。

结果分析

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

text-align: center是让块级元素居中，只能作用在块级元素，比如说一个div或者段落上面，对内部行内元素（比如文字或者图片）生效。

示例

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

可以在Can I use上面查看。比如说输入inline-block，对应的在各个浏览器的兼容性就会显示出来。

截图

啊啊啊，这两篇博客真的花了我好长时间，还好一些常用选择器的基本含义是差不多理解了。学习的速度可以不追求那么快，但基础一定要打牢。继续加油吧，菇凉。