一、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> <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" > 这里是匿名者的图片    </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>  </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; }**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
作者：该帐号已被查封
链接：https://www.jianshu.com/p/df3179ea043a
共同学习，写下你的评论
评论加载中...
作者其他优质文章
