CSS常见面试题 (持续更新中)

面试经常会问到这些问题：

写出文字超出输入框的时候，如何将超出部分转化为省略号

这三句代码还是挺重要的：

white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；

三合一才可以出现溢出省略号.

CSS3都有哪些选择器

1、标签选择器

以标签名开头，选择所有div元素

div{
	margin: auto
}

2、类选择器

给标签取class名，以点（.）加class名开头，选择所有该class名的元素

<div class=""test></div>

.test{
	height:100px;
	weight:100px
}

3、id选择器

给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘test’”的元素

<div id=""test></div>

#test{
	height:100px;
	weight:100px
}

4、子选择器

以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

<div>
	<p></p>
	<p></p>
	<span></span>
</div>

div>p {
	margin:auto;
	padding:auto
}

5、包含选择器

以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)

<div>
	<p></p>
	<p></p>
	<span>
		<p></p>
	</span>
</div>

div p{
	margin:auto;
	padding:auto
}

6、兄弟选择器

只选择一个

<div>
	<p class='first'></p>
	<p></p>
	<p></p>
</div>

.first+p{
	margin:auto;
	padding:auto
}

8、全局选择器

以*开头(星号标在大括号前，修饰了包含body所有的标签)

<div>
	<p class='first'></p>
	<p></p>
	<p></p>
</div>

*{
	margin:auto;
	padding:auto
}

9、群选择器

以，分隔(逗号分隔开需要修饰的模块名)

<div>
	<p class='first'></p>
	<p></p>
	<p></p>
</div>

.first,span {
	margin:auto;
	padding:auto
}

10、属性选择器

[] ([type=text]修饰属性为type=text的模块)

<div>
<input type="text">
</div>

[type=text]{
	margin:auto;
	padding:auto
}

11、伪类选择器

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

(1) li:first-child{} (修饰第一个li)

li:first-child{
    border:1px solid red;
}

(2) li:last-child{} (修饰最后一个li)

li:last-child{
    border:1px solid red;
}

(3) li:ntd-child(n){} (修饰第n个li)

li:ntd-child(2){
    border:1px solid red;
}

(修饰第二个li)

(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

li:not(:first-child){
    border:1px solid red;
}