CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
前几天遇到一个页面需求是这样的： 一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 需求： 没有文字，没有聚焦——点赞 没有文字，聚焦——灰色发送 有文字——红色发送 如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。 <input type="text"...
一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名，其中的两个类名的属性产生冲突，并不是根据html中类名的顺序来决定DOM元素的属性， 而是根据css样式中的顺序来决定DOM元素的属性，它取决于css样式表中后读取到的属性。 例如： html <div class="function hidden show"></div> css: .show{ d...
CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理
我都好久没更新了！ 遇到一个效果，之前没有考虑清楚，设置了固定高度，到了后边，产品要加长，我就觉得设计得从新弄张长点的背景图！这不多余么？ 其实分析原图还是可以再切分，再细化到不用改设计图，让我们前端页面各种适应，做到重复利用。 于是就有了这个问题和如下的一连串问题。 .最外层父元素{height:auto;background:url(../images/hot_c_bg_g.png) rep....
【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说） 2.width:auto也是以“占满参考元素宽度”为目标。但不同的地方在于，它能根据margin和padding的值动态地调整width的值。当参考元素的宽度一定时，子元素...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 1.2 网页的基本构成元素
本节书摘来异步社区《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》一书中的第1章，第1.2节，作者： 何新起 , 任慎存 , 田月梅，更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.2 网页的基本构成元素 不同性质的网站，构成网页的基本元素是不同的。网页中除了使用文本和图像外，还可以使用丰富多彩的多媒体....
《HTML 5与CSS 3 权威指南（第3版·上册）》——3.2 新增的非主体结构元素
<header> <nav> <ul> <li><a href="courses.html">课程</a></li> <li><a href="fees.html">学费</a></li> ...
《HTML 5与CSS 3 权威指南（第3版·上册）》——3.1 新增的主体结构元素
本节书摘来自华章出版社《HTML 5与CSS 3 权威指南（第3版·上册）》一 书中的第3章，第3.1节，作者：陆凌牛，更多章节内容可以访问云栖社区“华章计算机”公众号查看。 3.1 新增的主体结构元素 在HTML 5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。需要说明的是，本章所讲的内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍....
《HTML 5与CSS 3 权威指南（第3版·上册）》——2.2 新增的元素和废除的元素
本节书摘来自华章出版社《HTML 5与CSS 3 权威指南（第3版·上册）》一 书中的第2章，第2.2节，作者：陆凌牛，更多章节内容可以访问云栖社区“华章计算机”公众号查看。 2.2 新增的元素和废除的元素 本节将详细介绍HTML 5中新增和废除了哪些元素。 2.2.1 新增的结构元素 在HTML 5中，新增以下与结构相关的元素。（1）section元素section元素表示页面中的一个内容区块....
《HTML 5与CSS 3权威指南（第3版·下册）》——19.5 通用兄弟元素选择器
<p>p元素为div元素的子元素</p> <p>p元素为div元素的子元素</p> p元素为div元素的兄弟元素 p元素为div元素的兄弟元素 p元素为div元素的兄弟元素 p元素为div元素的子元素 p元素为div元素的兄弟元素
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
CSS更多元素相关
开发与运维
集结各类场景实战经验，助你开发运维畅行无忧
+关注