和有什么区别

两者都是空间的意思,但是有什么区别吗? 答案 一是不间断空格另一个是常规空间。 此外,正如 Svend 在他的评论中指出的那样,不间断的空格不会折叠。 来自: stackoverflow.com

_self,_top和_ parent在锚标签目标属性中的区别

我知道_blank与锚定标签一起使用时,打开一个新选项卡,而且我在使用框架时使用的是自定义的目标,但我想知道_parent,,,,_self和_top。 答案 尽管这些答案很好,但恕我直言,我认为它们没有完全解决这个问题。 锚固标签中的目标属性告诉浏览器锚点目标的目标。它们最初是为了操纵和将锚定在文档框架系统上的创建。这是在CSS借助HTML开发人员的帮助之前。 尽管target="_self"是浏览器默认的,最常见的目标是target="_blank"这将在新窗口中打开锚(通常通过浏览器设置将其重定向到选项卡)。这"_parent",,,,"_top"和framename对于那些不熟悉iFrame网站构建作为趋势的日子的人来说,标签是一个谜。 target="_self"这会在同一帧中打开一个锚点。frame和frameset在HTML5中,标签已过时,人们假设此窗口功能相同。相反,如果将此锚嵌套在框架中,它将以一种沙盒方式打开,仅在该框架中。 target="_parent"如果将它们彼此嵌套在框架的下一个层次中 target="_top"这损坏了其嵌套的所有帧,并将链接打开为浏览器窗口中的顶部文档。 target="framename这最初已被弃用,但在 HTML5 中又重新出现。name是通过使用该方法替换的正确方法id识别标签。 <!--Example:--> <html> <head> </head> <body> <iframe src="url1" name="A"><p> This my first iframe</p></iframe> <iframe src="url2" name="B"><p> This my second iframe</p></iframe> <iframe src="url3" name="C"><p> This my third iframe</p></iframe> <a href="url4" target="B"></a> </body> </html> 来自: stackoverflow.com

:not(:first-child) 和 :not(:first-of-type) 不起作用

我有一个树系统。 <div id="someDivID"> <div class="theBody"> <div class="someContainer"> <div id="someItem" class="someItemClass"> Test </div> </div> <div class="someContainer"> <div id="someItem2" class="someItemClass"> Test2 </div> </div> </div> </div> 还有我的CSS: #someDivID { width: 400px; } #someItem, #someItem2 { border: 1px solid #000; padding: 1px; margin-bottom: 2px; clear: both; overflow: auto; } .someItemClass { background-color: #0077FF; } .someItemClass:not(:first-of-type) { margin-top: 50px; } 现在,我的.someContainer已经有了背景颜色,但是第二个.someContainer没有上边距。:first-of-type有用。:first-child也不行。 这是我的 jsfiddles: 和first-of-type:http://jsfiddle.net/JoshB1997/zsu2o3cg/ 和first-child:http://jsfiddle.net/JoshB1997/zsu2o3cg/1/ 答案 那是因为他们不是兄弟姐妹。 如果将 :not 选择器更改为父 div,它将起作用。 .someContainer:not(:first-of-type) { margin-top: 50px; } #someDivID { width: 400px; } #someItem, #someItem2 { border: 1px solid #000; padding: 1px; margin-bottom: 2px; clear: both; overflow: auto; } ....

:touch CSS 伪类或类似的东西?

我正在尝试制作一个按钮,这样当用户单击它时,它会在按住鼠标按钮的同时更改其样式。 有没有办法在移动浏览器(iPhone、iPad、Android,希望还有其他浏览器)上复制这种效果? <style type="text/css"> #testButton { background: #dddddd; } #testButton:active, #testButton.active { background: #aaaaaa; } </style> ... <button type="button" id="testButton">test</button> ... <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script> <script type='text/javascript'> $("*").live("touchstart", function() { $(this).addClass("active"); }).live("touchend", function() { $(this).removeClass("active"); }); </script> :active 伪类适用于桌面浏览器,而 active 类适用于触摸浏览器。 我想知道是否有一种更简单的方法来做到这一点,而不涉及 Javascript。 答案 不存在这样的事情:touch在 W3C 规范中,http://www.w3.org/TR/CSS2/selector.html :active我想应该可以。 订购于:active/:hover伪类对于它的正确运行很重要。 这是上面链接的引用 交互式用户代理有时会更改呈现以响应用户操作。 :hover 伪类在用户指定元素(使用某些指点设备)时应用,但不会激活它。 :active 伪类在用户激活元素时应用。 :focus 伪类在元素具有焦点时应用(接受键盘事件或其他形式的文本输入)。 来自: stackoverflow.com

:不(:空)CSS选择器不起作用?

我和这个特定的CSS选择器有一段时间,当我添加时不想工作:not(:empty)对此。其他选择器的任何组合似乎都可以正常工作: input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } 如果我删除:not(:empty)部分,它的工作正常。即使我将选择器更改为input:not(:empty)它仍然不会选择输入文本的输入字段。这是坏的还是我只是不允许使用:empty在一个:not()选择器? 我唯一能想到的是,浏览器仍在说该元素是空的,因为它没有孩子,只是每句话的"价值"。做:empty选择器对输入元素没有单独的功能,而不是常规元素?这似乎不可能,因为使用:empty在字段上并输入某些内容将导致其他效果消失(因为它不再为空)。 在Firefox 8和Chrome中进行了测试。 答案 成为一个void元素, 一个<input>考虑元素空的通过"空"的HTML定义,因为所有void元素的内容模型总是空的 。:empty伪级,无论它们是否具有价值。这也是为什么它们的值在开始标签中由属性表示的,而不是在开始和结束标签中的文本内容。 另外,从选择器规格: 这:empty伪级代表根本没有孩子的元素。就文档树而言,只有元素节点和内容节点(例如DOM文本节点,CDATA节点和实体参考),其数据的长度非零长度必须被视为影响空虚; 最后,input:not(:empty)在适当的HTML文档中永远不会匹配任何内容。(它仍然可以在定义一个假设的XML文档中使用<input>可以接受文本或子元素的元素。) 我认为你不能造型空虚<input>仅使用CSS动态字段(即每当字段为空时应用的规则,并且一旦输入文本就不会)。您可以选择最初 空字段,如果他们有空value属性 (input[value=""])或完全缺乏属性(input:not([value])),但仅此而已。 来自: stackoverflow.com

:悬停但 :不在特定类别上

如何应用悬停效果a元素,但不是a元素与类active? a:hover(not: .active) 似乎缺少了一些东西。 答案 函数符号已打开:not(), 不是:hover: a:not(.active):hover 如果你喜欢放:hover首先,这很好: a:hover:not(.active) 哪个伪类在前或在后并不重要;:hover最后,因为我倾向于将用户交互伪类放在结构伪类后面。 来自: stackoverflow.com

:最后一个孩子没有按预期工作?

问题出在 CSS 和 HTML 中。链接到 jsFiddle与示例代码。 HTML <ul> <li class"complete">1</li> <li class"complete">2</li> <li>3</li> <li>4</li> </ul> CSS li.complete:last-child { background-color:yellow; } li.complete:last-of-type { background-color:yellow; } 这些 CSS 行中的任何一行都不应该以last li element with the “complete” class? jQuery 中的此查询也不针对它: $("li.complete:last-child"); 但这一个确实: $("li.complete").last(); li { background-color: green; } li.complete:first-child { background-color: white; } li.complete:first-of-type { background-color: red; } li.complete:last-of-type { background-color: blue; } li.complete:last-child { background-color: yellow; } <ul> <li class="complete">1</li> <li class="complete">2</li> <li>3</li> <li>4</li> </ul> 答案 这last-child选择器用于选择父元素的最后一个子元素。...

.autocomplete 不是函数错误

下面是我的代码 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 我的 Html 代码是 <div class="ui-widget"> <input name="searcharea" class="selectarea" id="searcharea" type="text" value="" placeholder="Area"> </div> 我的功能是 <script> $(function(){ $( "#searcharea" ).autocomplete({ source: "suggestions.php" }); $( "#searchcat" ).autocomplete({ source: "suggestions1.php" }); }); </script> 我已将此页面包含到带有我网站的搜索代码的单独文件中,并将其嵌入到各个页面中,在我的索引页面上,它建议我源文件中的值,但在其他页面上,它给我在线打字错误 $( "#searcharea" ).autocomplete({ 我的网站链接是:http://www.jodhpuryp.in/ 这是我的自我建议箱的来源http://api.jqueryui.com/autocomplete/ 谁能告诉我,为什么我在索引页面上工作时在网站的其他页面上收到此错误。任何帮助都会受到赞赏。谢谢 答案 发现问题,我为我的谷歌翻译器添加了另一个 jquery 文件,它们相互冲突,导致无法加载自动完成功能。 来自: stackoverflow.com

“ .addeventListener不是函数”为什么会发生此错误?

我会收到" .addeventListener不是函数"错误。我被困在这一点上: var comment = document.getElementsByClassName("button"); function showComment() { var place = document.getElementById('textfield'); var commentBox = document.createElement('textarea'); place.appendChild(commentBox); } comment.addEventListener('click', showComment, false); <input type="button" class="button" value="1"> <input type="button" class="button" value="2"> <div id="textfield"> </div> 答案 代码的问题在于,您的脚本是在可用的HTML元素之前执行的。因为那var comment是一个空数组。 因此,您应该在 html 元素可用后移动脚本。 还,getElementsByClassName返回HTML集合,因此,如果您需要将事件侦听器添加到元素中,则需要执行以下操作 comment[0].addEventListener('click' , showComment , false ) ; 如果您想将事件侦听器添加到所有元素中,那么您需要循环通过它们 for (var i = 0 ; i < comment.length; i++) { comment[i].addEventListener('click' , showComment , false ) ; } 来自: stackoverflow.com

“ x-ua兼容” content =“ ie = 9; ie = 8; ie = 7; ie = edge'

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> 这句话究竟是什么意思呢? 一些示例使用,分开IE版本,而有些则使用;;哪个是对的? 命令IE=9; IE=8; IE=7; IE=EDGE我想知道这一点。 Edit : 我在用<!DOCTYPE html> 答案 如果您支持IE,则对于Internet Explorer 8及以上版本,这是: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> 迫使浏览器作为该特定版本的标准。IE7及以下不支持它。 如果您使用半彩色分开,它将为不同版本设置兼容性级别。例如: <meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" /> 渲染IE7和IE8为IE7,但IE9为IE9。它允许不同级别的向后兼容性。但是,在现实生活中,您只能选择其中之一: <meta http-equiv="X-UA-Compatible" content="IE=8" /> 这可以更轻松地进行测试和维护。尽管通常使用仿真的更有用的版本是: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 为了这: <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 它迫使浏览器按照最新版本的标准所限制。 了解更多信息,在MSDN上有足够的阅读,,,, 来自: stackoverflow.com

“./”(点斜线)在 HTML 文件路径位置中指什么?

我知道../意思是Go上一条路,但是什么意思./确切的意思是? 我最近正在浏览一个教程,它似乎只是指同一位置的一个文件,所以有必要吗? 答案 ./是该文件夹在职的文件位于: 所以在/index.htm ./是根目录 但在/css/style.css ./是css文件夹。 记住这一点很重要,因为如果你将 CSS 从/index.htm到/css/style.css路径将会改变。 来自: stackoverflow.com

“<!DOCTYPE html>”是什么意思?

我使用了一个名为"ECOTree"的出色的 javascript 组织树生成器,但是当我放置时绘图不起作用<!DOCTYPE html>。 您可以在下面站点的sample1.htm 中看到该错误。http://www.codeproject.com/script/Articles/ViewDownloads.aspx?aid=16192 (为了遵循我的项目规则,我必须定义<!DOCTYPE html>) 答案 <!DOCTYPE html>是明确的文件类型声明。 从链接页面: DOCTYPE 声明(DTD 或文档类型声明)执行以下几项操作: 在网页上执行 HTML 验证测试时,它会告诉 HTML(超文本标记语言)验证器网页编码应符合哪个版本的 (X)HTML 标准。 它告诉浏览器如何以符合标准的模式呈现页面。 #2 is a very important reason for using it. <!DOCTYPE html>,具体来说,是HTML5 的正确声明,并且从现在到不久的将来应该会经常使用。 死链接 到切换到他们的标准(合规)模式,即使它们不支持 HTML5。 以下是更多信息: 使用 Doctype 激活浏览器模式 & 选择文档类型(同一页) 万维网联盟(他们制定网络标准) 来自: stackoverflow.com

“<html xmlns=http://www.w3.org/1999/xhtml>”有什么作用?

我简直不敢相信我的网站上发生了什么。 <html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html> <html> <head> 一切正常。 这条线怎么能解决所有问题呢?! 答案 你搞混了超文本标记语言和XHTML。 通常是一个<!DOCTYPE>声明用于区分 HTMLish 语言的版本(在本例中为 HTML 或 XHTML)。 不同的标记语言会有不同的行为。height:100%。 XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> table { height:100%;background:yellow; } </style> </head> <body> <table> <tbody> <tr><td>How tall is this?</td></tr> </tbody> </table> </body> </html> …并将其与以下内容进行比较:(注意明显缺乏<!DOCTYPE>宣言) HTML(怪异模式) <html> <head> <style type="text/css"> table { height:100%;background:yellow; } </style> </head> <body> <table> <tbody> <tr><td>How tall is this?</td></tr> </tbody> </table> </body> </html> 您会注意到表格的高度截然不同,两个文档之间的唯一区别是标记的类型!...

“select”标签的占位符?

我想知道如何实现placeholder效果与select标签,如果有默认选择的选项(例如"请选择一个选项:"),那就太好了。 我尝试了一些变体,但到目前为止它们还没有工作,我确信它可以实现,因为我在某个地方看到过它(不记得在哪里)。 我已经尝试过这个: 1) <fieldset> <select data-placeholder="Please select a product" id="s1" class="global"> <option value="Some">Some</option> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> </fieldset> 2) <fieldset> <select id="s1" class="global"> <option data-placeholder="true" value="Some">Some</option> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> </fieldset> 两者都不起作用,也许有一个 jQuery 方法可以做到这一点? Quick edit: 我不想只禁用其中一个选项并使其生效selected因为它仍然会与其他项目一起显示在下拉列表中。 答案 这里有两种类型的占位符,可重新选择的和隐藏的: 演示:http://jsfiddle.net/lachlan/FuNmc/ 可重新选择的占位符: <select> <option value="" selected>Please select</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> 隐藏占位符: <select class="empty"> <option value="" selected disabled>Please select</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> CSS 更改第一项的颜色:...

“transform3d”不适用于位置:固定子项

我遇到的情况是,在正常的 CSS 情况下,固定的 div 将准确定位在指定的位置(top:0px,left:0px)。 似乎这并不受人尊敬的如果我有父母,有一个translate3d变换。 我附上了JSFiddle举一个例子,我希望黄色框位于页面的顶angular而不是容器元素的内部。 您可以在下面找到小提琴的简化版本: #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; height: 20px; left: 0px; background: rgba(200,180,80, .8); margin: 5px; padding: 5px; } <div id="container"> Blue: Outer, <br> Purple: Middle<br> Yellow: Inner<br> <div id="outer"> <div id="middle"> <div id="inner"> Inner block </div> </div> </div> </div> 我怎样才能让translate3d与固定位置的孩子一起工作?...