一、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" > 这里是匿名者的图片
</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;
}
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
