CSS基础知识-选择器的种类及优先级

作者: 该帐号已被查封_才怪 | 来源:发表于2016-06-23 23:03 被阅读416次

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

常见的有

1、id选择器

见自己编写的如下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #licai {
        background-color: red;
        font-size: 60px;
    }
</style>
</head>

<body>
    <h1 id="licai">这是id选择器</h1>
    <h1>这不是id选择器</h1>
</body>
</html>

2、class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .licai {
        background-color: red;
        font-size: 60px;
    }
</style>
</head>

<body>
    <h1 class="licai">这是class选择器</h1>
    <h1>这不是class选择器</h1>
</body>
</html>

3、属性选择器

3.1 属性名加属性值型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
input[type="password"]
{
  margin: 10px;
  width: 200px;

}
</style>
</head>

<body>
 <form name="MyfirstForm" action="http://www.baidu.com" method="get" >
    用户名<input name="username" type="text" placeholder="请输入用户名"> <br>
    密码<input name="MyPassword" type="password" placeholder="请输入密码" >
 </form>
</body>
</html>

3.2纯属性名型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
img[title]
{
  border: 2px solid red;
}

</style>
</head>

<body>
 <div id="pic" > 这里是匿名者的图片
    ![Anonymous](http:https://img.haomeiwen.com/i2166980/53ed3d75ce5ae54c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ![AnonymousPicture](http:https://img.haomeiwen.com/i2166980/3494a3e338066626.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ![AnonymousPicture](http:https://img.haomeiwen.com/i2166980/3494a3e338066626.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 </div>
</body>
</html>

4、分组选择器

用“,”隔开，表示该组元素属性都会作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.fenzu,p
{
  border: 2px solid red;
}

</style>
</head>

<body>
<h1 class="fenzu"> 这是h1标题</h1>
<h1> 这也是h1标题</h1>
<div> 
    <h1>这是div里的h1</h1>
    <p> 这是div里的p </p>   
</div>
</body>
</html>

5、派生选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.paisheng h1
{
  background-color: #999;
}

</style>
</head>

<body>
<h1> 这是h1标题</h1>
<div class="paisheng"> 
    <h1>这是div里的h1</h1>  
    <h1> 这也是div里的h1标题</h1> 
    <p> 这是div里的p </p>  
</div>
</body>
</html>

6、伪类选择器

比如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
#weilei
{
  width: 200px;
  color: #999;
  background-color:red;
  transition-property:width;
  transition-duration:3s;
}

#weilei:hover
{
    width: 400px;
}

</style>
</head>
<body>
<div id="weilei"> 
    这是伪类选择器
</div>
</body>
</html>

又例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
h1::selection
/*
1、::selection只支持color/background/cursor/outline四种属性；
2、firefox支持替代::-moz-selection;
*/
{
    color: red;
    background: blue;   
}
</style>
</head>
<body>
<h1> 选中后字体变红色背景变蓝色</h1>
<p> 选中后不变色</p>
</body>
</html>

7、伪元素选择器

:after、:before等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
ul,li
{
    list-style:none;
}
li:before
{
    content: "这是前置字  ";
    color: red;
    background-color: green;
    
}
li:after
{
    content: "  这是后置字 ";
    color: yellow;
    background: blue;
    font-weight: bold;
}
</style>
</head>
<body>
<ul>
    <li>我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”</li>
    <li>我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”</li>
    <li>我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”</li>
    <li>我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”</li>
</ul>
</body>
</html>

8、组合选择器

比如E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style type="text/css">
.inside+h1
{
background: red;
}
</style>
</head>
<body>
<div class="outside">
  这是外层DIV
  <h1>
      这是h1大标题
  </h1>
  <div class="inside">
      这是外层DIV里的div
  <h1>
      这是中层div的h1标题1
  </h1>
  <p> 这是中层div里的段落</p>
  <h1>
      这是中层div的h1标题2
  </h1>
       <div> 这是内层div
          <h1> 这是内层div的h1标题</h1>
       </div>
  </div>
<h1>
这也是h1大标题
</h1>
<h1>
  这还是h1大标题
</h1>

</div>
</body>
</html>

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

选择器优先级由高到低分别为：
!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。
选择器注明的越具体，某些情况下则其优先级也越高；若重复写了则以最后的为准；

三、class 和 id 的使用场景?

class使用场景：需要某些特定样式的标签则放在同一个class中，需要此样式的标签可再添加此类。（class不可被javascript中的GetElementByID函数所调用）
id使用场景：1、根据提供的唯一id号快速获取标签对象，如：document.getElementById(id) ；2、用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点

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

划定适当的命名空间可：
1、提高代码的可读性；
2、便于维护管理；
3、保持代码的可拓展性；

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

详见注释：

#header{
} /* 这是id选择器header*/
.header{
}/*这是类选择器header*/
.header .logo{
}/*这是类选择器header后的类logo*/
.header.mobile{
}/*  满足类header及类mobile */
.header p, .header h3{
}/* 类选择器中的header 段落p 和类选择器中的标题h3 */
#header .nav>li{
}/*id选择器中的header后的类选择器nav的直接子元素li */
#header a:hover{
}/*id选择器header后的a标签hover伪类*/

六、列出你知道的伪类选择器

:hover /:active/ :link /:visited/::selection/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)

七、:first-child和:first-of-type的作用和区别

E:first-child的作用是选择E的父元素中的所有第一个子元素的E标签；
E:first-of-type的作用是选择E的父元素中的第一个E类型的标签；

根据字面意思可以很好的理解这两者的区别：E:first-child首选是E的父元素中的第一个子元素，在这些子元素中选中E标签；E:first-of-type首选是E的父元素的第一个同类型的（E）标签；举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
 h1:first-of-type
 {
    color: red;
 }
</style>
</head>
<body>
    <h1>这是body里的第一个子元素</h1>
    <h1>这是body里的第二个子元素</h1>
    <div>这是body里的第三个子元素 <br/>
        <a href="#">这是body中的div中里的第一个子元素</a>
        <h1>这是body中的div中里的第二个子元素</h1>
        <h1>这是body中的div中里的第三个子元素</h1>
    </div>
    <h1>这是body里的第四个子元素</h1>

</body>
</html>

上述代码的运行结果为:“这是body里的第一个子元素”及“这是body中的div中里的第二个子元素”字均变为红色；若将<style>中的 h1:first-child 改成h1:first-of-type，则该代码运行结果为仅“这是body里的第一个子元素”字变为红色；运行结果可见我上传至jsbin中的 http://jsbin.com/hacato/edit?html,output 及http://jsbin.com/turibag/edit?html,output

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

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

运行结果为aa变红，aa、bb背景色均变为蓝色，ccc不做任何变化；
原因为：

.item1:first-child{
  color: red;
}

上述代码的作用是选择item1中的父元素中的第一个子元素并使其字体变为红色；当运行到<p class="item1">aa</p> 时，aa变为红色，因为此时段落p是item1父元素div中的第一个子元素，而h3中的bb及h3中的ccc的父元素也是div，但div中的第一个子元素为p，因此bb及ccc字体颜色均为默认值即不会变成红色；

.item1:first-of-type{
  background: blue;
}

上述代码的作用是选择item1中的父元素中的第一个同类型标签并使其背景色变为蓝色；当运行到<p class="item1">aa</p>时，因p为item1的父元素div的第一个类型的标签，且p也为item1类，因此p中的aa背景色会变成蓝色；当运行到<h3 class="item1">bb</h3>时，同理，h3中的bb背景色也会变成蓝色；当运行到<h3 class="item1">ccc</h3>时，因父元素div中的第一个h3类型的元素已经存在，故h3中的ccc背景色还是默认的；
故：运行结果为aa变红，aa、bb背景色均变为蓝色，ccc不做任何变化；

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

作用是使得文本或者img标签等一些内联对象（或与之相似的元素）居中；其可作用在块级元素（比如p，h1等）中的内行元素对象上；如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
div{
    text-align: center;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
   ![](http:https://img.haomeiwen.com/i2166980/347883c49bd3e5d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 </div>

上述代码可将div中的p及h3中的文本和图片均进行居中了。

另margin:0 auto 是设置块级元素（或类似元素）的居中，注意与text-align:center的区别，可详见：http://www.cnblogs.com/zhwl/p/3529473.html

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

可在caniuse.com和w3school.com.cn等网站进行查询。

十一、补充：关于 :nth-child选择器

    <div class="parent">
        <div class="children first"></div>
        <div class="children second"></div>
        <div class="children third"></div>
        <div class="children fourth"></div>
    </div>

上述代码要实现.second同样效果的选择器，可采用以下方法：

1、

    .parent :nth-child(2) {  /* :nth-child(2)前有空格！ 意义是父元素中的第二个子元素*/
        height: 200px;
        border-color: blue;
    }

2、

    .children:nth-child(2) {  /* :nth-child(2)前无空格！ 意义是属于其父元素中的第二个子元素.children*/
        height: 200px;
        border-color: blue;
    }

3、

    .parent  .children:nth-child(2) {  /* :nth-child(2)前无空格！ 意义是属于 .parent元素中的第二个子元素.children*/
        height: 200px;
        border-color: blue;
    }

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

CSS基础知识-选择器的种类及优先级

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

1、id选择器

2、class选择器

3、属性选择器

4、分组选择器

5、派生选择器

6、伪类选择器

7、伪元素选择器

8、组合选择器

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

三、class 和 id 的使用场景?

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

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

六、列出你知道的伪类选择器

七、:first-child和:first-of-type的作用和区别

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

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

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

十一、补充：关于 :nth-child选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

css+css3

web细节

饥人谷技术博客

前端攻城狮