1、选择器css中的优先级，怎么把轮播图的图片改成用ajax请求的？
1. 清除浮动
我对清除浮动的理解是这样的，
要想清除浮动，首先要知道什么是浮动，我们在做app，pc端页面的时候，它里面有这个块元素和内联元素，尤其块元素在布局的时候，文档流的形式往下刷，这种形势下呢，每一个块元素都是独占一行的，要想改变这种现状，比如说，abc
我们给ab浮动，ab并列排列，ab浮动之后呢，对c会产生影响，这时候我们就要给c加上clearboth清除浮动，这样做就是要使ab浮动产生的影响，不要影响到c，这是清除浮动的作用，那么清除浮动往往与什么有关系呢，比如说与我们的一些特效，比如图片轮播比如tab切换，这些特效的时候，往往需要我们用浮动去控制他，所以这是我们在使用浮动当中，清除浮动的工作内容，另外，清除浮动有很多种方式，比较常见的有clearboth
overflowhidden,after伪类,最后，清除浮动有优势也有缺点，那么我认为他的缺点是，有时候在某些浏览器使用的时候会不起作用，会失效，当然说这个缺点不是不可以解决的，可以通过整理上下文，或者使用其他的清除浮动方式来解决。
这就是我对清除浮动的理解。
2. DIV CSS display (block none inline)属性的用法！
我对DIV CSS中display的看法是这样的：
display常见的值有四个block、none、inline、inline-block，常见的用法有两种，一种是元素的隐藏与显示之间的切换，这是none和block之间的切换，另一种是块元素和行元素之间的转换；
第一种用法主要用在一些效果当中，比如说table的切换，又比如说隔行变色，它都是用到这种用法，所以说它与效果有一些关系，另外的话是display:block和display:inline的切换，因为我们知道像span、a等行标签，在默认情况下改变宽高是没有效果的，这种时候我们就要把span等行元素转换成block元素，然后再设置宽高就会行之有效，另外有时候我们需要把像div、form表单等块元素转换成inline元素，也是有效的，总之一句话，我们为了实现元素之间的切换常用这个用法。display还有一种比较常用的用法是它经常加position、z-index、overflow:hidden去实现各种各样的效果，比如说页面的手风琴效果、图片无缝轮播的效果等，都是这些属性联合起来实现的。
以上就是我对display的看法。
3. 关于网页编码的理解！
我对网页编码的理解是这样的：
在国内，我们常用的编码有3种，分别是utf-8，GB2312，GBK。utf-8是国际标准字符集，它里面包含了一些国际上常用的一些语言，以及一些特殊符号、字符集等；但我们国家也有这种类似的语言协会，它概括的是GBK，叫做中文字符集，它涵盖了中文，把那些多余的比如希腊文、法文就去掉了，只保留一些常用的，如中文、英文字母，还有一些日文、韩文这些常用的语言，以及一些特殊符号；GB2312我们叫做简体中文字符集，是在GBK的范围上又提炼了一些。
以上就是我对网页编码的理解。
4. 了解外边距叠加的相关问题
我对外边距叠加的理解是这样的：
首先，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
触发条件：a)当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b)当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
以上就是我对外边距叠加的理解。
5. img的title和alt的异同！
我对img的title和alt的理解是这样的：
(1)、含义不同
alt：使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明，也就是图片显示不了的时候显示的文字。
title：图片正常显示时，鼠标悬停在图片上方显示的提示文字。
(2)、在浏览器中的表现不同
在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，当鼠标经过图片时title和alt的值都会显示。
以上就是我对img的title和alt的理解。
6. 请例举css中position的参数和作用？
我对css中position的理解是这样的：
position是用来定位的，常见的值有四个，它们分别是：static、absolute、fixed、relative。
static是相对于默认位置去定位的，fixed是相对于浏览器窗口定位的，而我们最常用的有两个，一个是absolute，一个是relative，relative是相对定位，是相对于自身的原来的位置定位的，不会对文档流产生影响，也就是说A和B两个元素堆叠放置的时候，如果给A元素relative属性，加top和left值以后对B是没有影响的，但A漂移走了；absolute是绝对定位，如果父元素有position属性，这个元素相对于父元素定位的，如果父元素没有position属性，这个元素相对于body定位的，而且它这个定位会对后面的元素产生元素，它是脱离文档流的，脱离文档流以后其他元素是会来补缺的，把这个位置填充掉。总而言之，position和display一样也是常用在各种特效当中，我们常用的就是absolute和relative,它经常和overflow:hidden、z-index、left、top等属性联合使用，去实现一些图片堆叠的效果，比如说常见的折页效果，轮播图等效果都用到这个属性。
position在使用的过程中有两个问题需要注意，第一、因为我们的浏览器分为IE和非IE浏览器，在标准的W3C盒模型下和IE盒模型下像素的解释是不一样的，这就说明一个问题，在定位的时候，如果同样都是left:100px，那到了IE6、IE7下就可能不是left:100px,而变成left:102px了，这可了不得，是致命的缺点，所以要在left前加*，来解决这一问题。第二，我们在使用position时最关键的一点是，在配合其他属性的时候一定要注意position是使用相对定位还是绝对定位，包括父元素是相对定位还是绝对定位。
以上就是我对css中position的理解。
7. css选择器的权重和优先规则！
对于优先级我是这么理解的，
包括选择器的样式，包括调用样式的一些方式的判断，决定了样式有一些执行次序的问题，从优先级的角度来说的话，谁的优先级最高呢，当然是内联的优先级最高，在这种情况下，比如说id
class派生有其他的一些优先级的排序方式，所以他的优先级一般是按照这样的排序方式来进行。当然在这个里面，执行完优先级以后，他还有一个权值的问题，内联样式的权值是1000，ID是100，class是10，标签是1，那么这些优先级包括这个权值的问题，两个结合起来，我们一般呢，在写项目的时候也有可能是这样的，一个元素又有id又有class或者又有一些其他的选择方式，那么在选中这些元素以后呢，他所有的选择方式其实是一种结合使用的方式，这个时候就要讲究优先的次序了，所以页面中写样式的时候他就会前后次序清晰，不会出现样式冲突这种现象
这就是我对样式优先级和权值的一个理解。
8. 内联和!important哪个优先级高？
我的理解是这样的：
首先，肯定是!important优先级高。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。
ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性， 但是IE 6.0仍然不能完全识别.!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!
以上就是我对这个问题的理解。
9. table标签中border，cellpadding,td 标签中colspan , rowspan分别起什么作用？
我是这样理解这个问题的：
table border:表格边框， table-cellpadding: 单元格填充
td colspan:单元格纵向合并（列与列）， table-rowspan: 单元格横向合并（行与行）
以上就是我对这个问题的理解。
10. 实现三列布局的三种方法，具体描述？
我是这样理解这个问题的：
(1)、绝对定位法
这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
(2)、margin负值法
首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
（3）自身浮动法
应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
以上就是我对这个问题的理解。
11. IE与宽度和高度的问题
我是这样理解这个问题的：
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
以上就是我对这个问题的理解。
12. 页面的最小宽度
我是这样理解这个问题的：
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类,
以上就是我对这个问题的理解。
13. DIV浮动IE文本产生3象素的bug
我是这样理解这个问题的：
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
*html #left{ margin-right:-3px; //这句是关键}
以上就是我对这个问题的理解。
14. 高度不适应
我是这样理解这个问题的：
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding 时。
解决方法2个：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}
为DIV加上border属性。
以上就是我对这个问题的理解。
15. 如何对齐文本与文本输入框
我是这样理解这个问题的：
加上 vertical-align:middle;
以上就是我对这个问题的理解。
16. web标准中定义id与class有什么区别吗
我是这样理解这个问题的：
id和class都是元素中的属性，这也是每个元素都有的属性，他们是应用的很多领域中的，第一个应用的领域是css领域，在css领域中，有id选择器和class选择器，id的优先级要高于class，id选择器是#加id，class选择器是 .
加class，此外id的权重是100，class的权重是10，id要大于class；除了这个领域外在原生js中也是有使用的，而且使用的范围还是很大的，一个是getElementById，一个是getElementsByClassName，而且在封装像jQuery等其他语言中，也是有封装类似于id、类似于class这种选择器的，另外他们最核心的区别是用id选择器只能选择单个元素，而用class选择器可以选择多个元素，在js中，如果用class选择的元素，往往是要遍历元素才有效，才能在页面渲染到这些数据，这就是他们俩之间的一些区别。所以在做项目的时候id和class我都用，但是我用的更多的是class，因为页面上雷同的元素太多了，所以class用的更多一些。
以上就是我对这个问题的理解。
17. LI中内容超过长度后以省略号显示的方法
我是这样理解这个问题的：
此方法适用与IE与OP浏览器
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
以上就是我对这个问题的理解。
18. 为什么web标准中IE无法设置滚动条颜色了
我是这样理解这个问题的：
解决办法是将body换成html
以上就是我对这个问题的理解。
19. 怎么样才能让层显示在FLASH之上呢
我是这样理解这个问题的：
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
以上就是我对这个问题的理解。
20. 怎样使一个层垂直居中于浏览器中
我是这样理解这个问题的：
要使一个层垂直居中于浏览器中，有4种方法
1. 行高，缺点，需要高度，只能文字
2. 定位+margin负值，缺点，需要高度
3. 弹性盒子，缺点，css3新增属性，不太兼容
4. 转table，缺点，ie6不支持，利用table垂直居中的特性，配合vertical-align，垂直居中
5. Css+定位
以上就是我对这个问题的理解。
21. Div居中问题
我是这样理解这个问题的：
div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
以上就是我对这个问题的理解。
22. 链接(a标签)的边框与背景
我是这样理解这个问题的：
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
以上就是我对这个问题的理解。
23. 超链接访问过后hover样式就不出现的问题
我是这样理解这个问题的：
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
以上就是我对这个问题的理解。
24. 游标手指cursor
我是这样理解这个问题的：
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
以上就是我对这个问题的理解。
25. UL的padding与margin
我是这样理解这个问题的：
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
以上就是我对这个问题的理解。
26. FORM标签
我是这样理解这个问题的：
这 个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.
以上就是我对这个问题的理解。
2、css怎么设置class的优先级？
样式权值设定
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
5 继承样式的权值为0.1
举例
< class a>
< class b>
<class c >
直接用 .c(类)选择器 它的权值只有10 ，
用 .a .b .c来选择，则它的权值为10+10+10。
3、css复合选择器有哪三种？
1、元素选择器 标签名{ }
2、id选择器 #id属性值{ }
3、类选择器 .class属性值{ }
4、选择器分组(并集选择器)
作用：通过它可以同时选中多个选择器对应的元素(通常用于集体声明)
语法：选择器1，选择器2，选择器n{ }
5、复合选择器(交集选择器)
作用：选择更准确更精细的目标元素并为其设置属性
语法：选择器1选择器2选择器n{ }
!注意选择器之间不能有空格，要紧挨在一起
6、通配选择器
作用：用来选中页面中所有的元素
语法：*{ }
7、后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{ }
8、子元素选择器
作用：选中指定父元素的子元素
语法：父元素>子元素
9、伪类选择器
伪类表示元素的一种特殊状态
:hover 移入时元素的状态
:visited 已被访问过后的元素的状态
:active 被点击时元素的状态
10、 属性选择器
作用：根据元素中的属性或属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
? [属性名=“属性值”]选取含指定属性值的元素
? [属性名^="属性值"] 选取属性值以指定内容开头的元素
? [属性名$="属性值"] 选取属性值以指定内容结尾的元素
? [属性名*="属性值"] 选取属性值包含指定内容的元素
11、兄弟元素选择器
+选择器
作用：选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个(作用在后一个)
~选择器
作用：选中后边所有的制定兄弟元素
语法：前一个~后边所有
4、和css中的选择器有什么区别？
这个是有区别的。
1、首先说两者是属于不同的两门语言，jquery是属于js的一个框架，则其选择器是js里面的选择器，css是另一门不同于js的语言，其选择器是css选择器，则两者在根本上是不同的。
2、但是两者是有交集的，都是作为网页或者浏览器解析的语言，而js可以通过修改浏览器的dom对象来实现对css修改或者是控制。
3、可以简单的这样区分两者，css选择器用语css当中，js选择器应用于js当中，只不过有时两者使用相同的id标识来选择对象。
}

我的列表项在悬停时遇到了一个小问题。
菜单栏底部有一个小的嵌入阴影，定义在 li 项上。在 li:hover 底部的小插图变为所有 4 个侧面的插图阴影。
我对菜单的 react 非常满意，除了 li:lastchild。在悬停时，它首先删除底部和右侧的嵌入阴影，然后打印新的 4 面嵌入阴影。所有其他 li 元素只是将阴影从单个底部更改为所有 4 个侧面，而不重置阴影。
我知道 css 阴影部分写得不是很干净。但是因为悬停必须更改阴影而不是替换，所以我不能简单地在多个选择器上提交语句。 (如果你们知道如何做到这一点，请随时发表评论!)
所以我的问题是，我如何在 li:lastchild 上获得不同的嵌入阴影，它会在悬停时改变而不是被替换？
cedepen上的代码
<ul class="hoofd-menu menu">
<li class="menu-item"><a href="#">Menu Item I</a></li>
<li class="menu-item"><a href="#">Menu Item II</a></li>
<li class="menu-item"><a href="#">Menu Item III</a></li>
<li class="menu-item"><a href="#">Menu Item IV</a></li>
<li class="menu-item"><a href="#">Menu Item V</a></li>
<li class="menu-item"><a href="#">Menu Item VI</a></li>
</ul>
<style>
.menu li {
margin: 0 0 0 -4px;
padding: 15px 15px;
}
/* Menu Item Hover effect */
.menu li {
box-shadow:
0 -9px 5px -5px rgba(0,0,0, 1) inset,
/* dark shadow
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px 0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
li:last-child.menu-item {
box-shadow:
-9px 0px 5px -5px rgba(0,0,0, 1) inset,
/*dark shadow right */
0px -9px 5px -5px rgba(0,0,0, 1) inset,
/*dark shadow
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px 0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
li:first-child.menu-item {
box-shadow:
0px -9px 5px -5px rgba(0,0,0, 1) inset,
/* dark shadow
*/
-2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - left
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px
0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
.menu li:hover {
cursor:
pointer;
box-shadow:
-1px -1px 10px 4px rgba(0,0,0, 1) inset, /* dark shadow
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px 0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
.menu li:hover>a {
text-shadow:
-1px -1px 3px rgba(0,0,0, 0.2);
/* text shadow
*/
}
li:hover:last-child.menu-item {
box-shadow:
-1px -1px 10px 4px rgba(0,0,0, 1) inset, /* dark shadow
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px 0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
li:hover:first-child.menu-item {
box-shadow:
-1px -1px 10px 4px rgba(0,0,0, 1) inset,
/* dark shadow
*/
-2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
/* white - top
*/
2px 2px 3px
0px rgba(255,255,255, 0.2);
/* white - bottom
*/
}
/******************************************************************************************/
/* Round corners
*/
/******************************************************************************************/
li:first-child.menu-item {
-moz-border-radius-bottomleft:
5px;
border-bottom-left-radius:
5px;
-moz-border-radius-topleft:
5px;
border-top-left-radius:
5px;
}
li:last-child.menu-item {
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius:
5px;
-moz-border-radius-topright:
5px;
border-top-right-radius:
5px;
}
/******************************************************************************************/
/* Color palette
*/
/******************************************************************************************/
a
{color: #0861a5;}
a:hover
{color: #d98500;}
.menu li:hover>a,
.menu a
{color: #dddddd;}
body
{background-color: #b8d3e2;}
.menu li
{background-color: #87a0af;}
.menu
{font-family:
Arial, Helvetica, sans-serif}
a
{text-decoration:
none;}
a, .menu li>a {
transition:
1.5s ease 0.2s;
-moz-transition:
1.5s ease 0.2s;
-webkit-transition: 1.5s ease 0.2s;
-o-transition:
1.5s ease 0.2s;
}
a:hover, .menu li, .menu li:hover>a {
transition:
0.4s ease 0.6s;
-moz-transition:
0.4s ease 0.6s;
-webkit-transition: 0.4s ease 0.6s;
-o-transition:
0.4s ease 0.6s;
}
ul, li, ol {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
ul {
margin: 100px 50px;
}
/* algemeen menu*/
.menu ul {
list-style-type: none;
}
.menu li {
display: inline;
}
</style>
最佳答案
如果要使用 box-shadow 进行转换，则 box-shadow 的元素必须成“对”并且必须匹配阴影的“类”。像素和颜色可以转换，关键字不能。
你的基本元素是.menu li {
box-shadow:
0 -9px 5px -5px rgba(0,0,0, 1) inset,
2px -2px 3px 0px rgba(255,255,255, 0.2),
2px 2px 3px 0px rgba(255,255,255, 0.2);
}
你可以正确过渡到这个:
.menu li:hover {
box-shadow:
-1px -1px 10px 4px rgba(0,0,0, 1) inset,
2px -2px 3px 0px rgba(255,255,255, 0.2),
2px 2px 3px 0px rgba(255,255,255, 0.2);
}
因为第一个元素是 inset 和两种情况，而其他 2 不是在这两种情况下。
最后一个 child 是li:last-child.menu-item {
box-shadow: -9px 0px 5px -5px rgba(0,0,0, 1) inset,
0px -9px 5px -5px rgba(0,0,0, 1) inset,
/* PROBLEM HERE
*/
2px -2px 3px 0px rgba(255,255,255, 0.2),
2px 2px 3px 0px rgba(255,255,255, 0.2);
}
并且第二个元素是插入的，并且与未插入的悬停中的第二个元素不匹配。这是失败的部分。
一旦了解问题出在哪里，就有几种解决方案。可能更容易的是只设置 1 个同时具有 x 和 y 偏移的插图:li:last-child.menu-item {
box-shadow: -9px -9px 5px -5px rgba(0,0,0, 1) inset,
/* combined shadows */
2px -2px 3px 0px rgba(255,255,255, 0.2),
2px 2px 3px 0px rgba(255,255,255, 0.2);
}
结果可能不完全是前一个，但这是可以转换的
上一篇：css - Zurb Foundation-Sass列不在行中
下一篇：jquery - 制作人造进度条
}