-moz-Document url-prefix()做什么?

在西蒙·科利森(Simon Collison)的 新的 旧响应的网页设计,在CSS中,有几种宣言: @-moz-document url-prefix() { .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } } 这实际上是做什么的?我已经搜索了 @-moz-Document url-prefix(),并发现了其在UserChrome中的使用而不是标准站点样式表的参考。 它通常具有一个URL作为参数,然后将声明的内容限制为该URL。但是,在Colly的网站上,没有任何参数。这表明该声明是在当前URL上运行的,或任何 URL,不是吗?所以is what we’re seeing here a way of targeting Mozilla-only browsers with certain rules? 答案 任何始于@-moz-是壁虎 - 引擎特定规则,而不是标准规则。也就是说,这是一个特定于Mozilla的扩展。 这url-prefix规则将包含的样式规则应用于其URL以其开头的任何页面。当没有URL参数时使用时@-moz-document url-prefix()它适用于全部 页面。这实际上是CSS黑客用于仅针对壁虎(Mozilla Firefox)。所有其他浏览器都会忽略样式。 看这里查看其他 Mozilla 特定扩展的列表。 来自: stackoverflow.com

-webkit-margin 在文本上添加不需要的边距

直到现在我才意识到这一点(而且这不仅出现在 webkit 浏览器中)。p标签,h1标签等…文本上方和下方有一个额外的空格。 在 Chrome 中我发现了这个: 用户代理样式表 -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; 这使得某些地方的对齐错误。 答案 您还可以直接修改这些属性,如下所示: -webkit-margin-before:0em; -webkit-margin-after:0em; 在 Chrome/Safari 中适用于我。 来自: stackoverflow.com

:Active Pseudo-Class在移动野生动物园中不起作用

在iPhone/iPad/iPod上的WebKit中,为AN:Active Pseudo-Class指定样式<a>当您点击元素时,标签不会触发。我如何才能触发它?示例代码: <style> a:active { background-color: red; } </style> <!-- snip --> <a href="#">Click me</a> 答案 <body ontouchstart=""> ... </body> 仅应用一次,而不是每个按钮元素都可以修复页面上的所有按钮。另外,您可以使用这个称为’的小JS库fastclick’。它加快了点击触摸设备上的点击事件,并处理此问题。 来自: stackoverflow.com

:after 元素中的 CSS 背景图像

我正在尝试创建一个 CSS 按钮并使用 :after 添加一个图标,但图像从未显示。 HTML: <a class="button green"> Click me </a> CSS: .button { padding: 15px 50px 15px 15px; color: #fff; text-decoration: none; display: inline-block; position: relative; } .button:after { content: ""; width: 30px; height: 30px; background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll; background-color: red; top: 10px; right: 5px; position: absolute; display: inline-block; } .green { background-color: #8ce267; } 你可以检查这个小提琴来明白我的意思。 感谢您的任何提示。 答案 有几件事 (a) 你不能同时拥有背景颜色和背景,背景永远会获胜。 (b) 无滚动不起作用,我不认为它是背景图像的有效属性。 .button:after { content: ""; width: 30px; height: 30px; background:red url("http://www....

: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; } ....

:not()伪级可以有多个参数吗?

我正在尝试选择input所有元素typeS除了radio和checkbox。 许多人表明您可以在:not,但使用type无论如何,我似乎都没有工作。 form input:not([type="radio"], [type="checkbox"]) { /* css here */ } 有任何想法吗? 答案 为什么:不只是使用两个:not: input:not([type="radio"]):not([type="checkbox"]) ~是的,这是故意的~ 来自: stackoverflow.com

: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

:第一子女无法正常工作

我正在尝试选择第一个h1内部div带有称为的课程detail_container。它可以使用h1是其中的第一个元素div,但如果是这样的话ul它行不通。 <style type="text/css"> .detail_container h1:first-child { color:blue; } </style> </head> <body> <div class="detail_container"> <ul> <li></li> <li></li> </ul> <h1>First H1</h1> <h1>Second H1</h1> </div> </body> </html> 我的印象是我拥有的CSS会选择第一个h1不管它在哪里div。我该如何使其工作? 答案 这h1:first-child选择器装置 选择父母的第一个孩子 当且仅当它是h1元素。 这:first-child这里的容器是ul,因此无法满足h1:first-child。 有CSS3:first-of-type对于您的情况: .detail_container h1:first-of-type { color: blue; } 但是,随着浏览器兼容性困扰和whatot,您最好先提供第一个h1一堂课,然后针对该课程: .detail_container h1.first { color: blue; } 来自: stackoverflow.com

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

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

:之前和背景图像......它应该工作吗?

我有一个 div 并申请:before和:after图像作为内容。div调整大小,但似乎不起作用。:before和:after应该在工作吗? 当前代码: HTML: <div id="videos-part">test</div> CSS: #videos-part{ background-color: #fff; height: 127px; width: 764px; margin: -6px 0 -1px 18px; position: relative; } #videos-part:before{ width: 16px; content: " "; background-image: url(/img/border-left3.png); position: absolute; left: -16px; top: -6px; } 答案 @米奇;height在你的before伪类 CSS: #videos-part:before{ width: 16px; content: " "; background-image: url(/img/border-left3.png); position: absolute; left: -16px; top: -6px; height:20px; } 来自: 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选择器用于选择父元素的最后一个子元素。...

. css文件导入.less文件

您可以将 .css 文件导入到 .less 文件中吗…? 我对 less 非常熟悉,并将其用于我的所有开发。 @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; 所有导入都是其他 .less 文件,并且一切正常。 我当前的问题是:我想将 .css 文件导入到 .less 中,该文件引用 .css 文件中使用的样式,如下所示: @import "../style.css"; .small { font-size:60%; .type; } // other styles here .css 文件包含一个名为的类.type但是当我尝试编译 .less 文件时,出现错误NameError: .type is undefined .less 文件不会导入 .css 文件,而只会导入其他 .less 文件吗…? 答案 您可以通过指定选项强制将文件解释为特定类型,例如: @import (css) "lib"; 将输出 @import "lib"; 和 @import (less) "lib.css"; 将导入lib.css归档并将其视为较少。 来自: stackoverflow.com

.NET Gridview 主题示例

我正在寻找 .net gridView 主题(css 文件)的示例,以获得网格的想法。 我的网格必须具有双页式外观(底部 我在网上找到的唯一一款是玻璃黑(http://weblogs.asp.net/kevinbrammer/archive/2008/02/24/glassy-black-gridview-theme.aspx) 还有其他网站可以让我学习吗? (如果它包含源代码示例,我会更高兴,但如果没有 - 它也很好,css和html是可读的) 答案 Gridview 呈现为 HTML 表格。 查看这些链接。 Update 24/15 - mattberseth.com dead - updated links with archive.org http://icant.co.uk/csstablegallery/index.php?css=69 https://web.archive.org/web/20110303235607/http://mattberseth2.com/demo/有很多带有代码下载的 gridview 自定义。 寻呼 使用滑块分页 使用排序图标排序 还有一些主题 https://web.archive.org/web/20140702022550/http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html https://web.archive.org/web/20150201190248/http://mattberseth.com/blog/2007/11/5_gridview_themes_based_on_goo.html 来自: stackoverflow.com

'segoe ui'字体和字体面和本地字体

如果将其安装在用户计算机中,我想在网站中使用" SEGOE UI"字体。 我已经宣布了所有样式@font-face为了使用font-weight属性要更改字体的厚度(这是一个非常酷的功能!)。 问题是我不能与Segoe UI Bold(我认为名字错了)。任何想法? 这里是一个例子。(4)和(5)将相同:http://jsfiddle.net/kxHQR/1/ @font-face { font-family: 'Myname'; font-style: normal; font-weight: 700; src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib'); } @font-face { font-family: 'Myname'; font-style: normal; font-weight: 600; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); } @font-face { font-family: 'Myname'; font-style: normal; font-weight: 400; src: local('Segoe UI'), local('SegoeUI'); } @font-face { font-family: 'Myname'; font-style: normal; font-weight: 300; src: local('Segoe UI Light'), local('SegoeUI-Light'); } /* ... */ BODY { font-family: 'Myname'; } ....