前几天遇到一个页面需求是这样的：一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求：没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。<input type="text" class="input" required> <div class="like">点赞</div> <div class...
在分析before和after伪元素之前，我们先看一个实例， 这个实例使用了css伪类元素affter制作了一个自定义的input check样式。实例如下：CSS input checkbox自定义样式.compare_button .checkboxcss {cursor: pointer;position: absolute;width: 15px;height: 15px;top: 0;left: 0;background: #f7f7f7;border: 2px solid #f5b34f;border-radius: 5px; } .compare_button {position: relative; } .compare_button .checkboxcss:after...
伪类可以通过link,hover等方法给选择器添加特殊效果，伪元素通过：first-line添加首行样式，：first-letter添加首字母样，以下将详细介绍这两方面的内容伪类它是选择html文档的某些部分的方式，表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态，原则上不属于html文档树本身及其元素或者是属性，其实CSS伪类是用来添加一些选择器的特殊效果，与伪元素不同，伪类可以出现在选择器链中的任何位置。例a：link 表示未访问...
本篇文章介绍的内容是关于CSS设置主动控件的样式，下面我们来看一下具体的内容。我们先来看一下语法格式：:focus{(样式描述) }通过指定元素，类和ID来描述它，如下所示：设置特定标签时(标签名):focus{ （样式描述） }设置特定类时.(class名):focus{ （样式描述） }设置特定ID时#(id名):focus{ （样式描述） }代码示例：编写以下代码。FocusSelector.cssinput {background-color:#D0D0D0; } input:focus {background-color:#FFD0D0...
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。 1.伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements and pseudo-classes to per...
伪类作用于整个元素，比如： a:link{color:#111;} a:hover{color:#222;} div:first-child{color:#333;} 尽管这些条件都不是基于Dom的，但结果没一个都是作用于一个完整的元素，比如整个链接，段落，div等等； 伪元素作用于元素一部分，比如： p::first-line{color:#555;} p::first-letter{color:#666;} 伪元素作用于元素的一部分，一个段落的第一行或...
css伪元素和伪类对于刚学习css的同学来说可能会容易混淆，官方文档中解释：CSS 伪类用于向某些选择器添加特殊的效果，CSS 伪元素是用于将特殊的效果添加到某些选择器。那么，css伪元素和伪类的区别究竟在哪？本文将给大家细细的说道说道。首先可以明确两点，第一：两者都与选择器相关，第二：就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪类作用:active将样式添加到被激活的元素:focu...
下面的代码用到上面的图片，大家注意保存下。CSS伪类实现的鼠标滑动链接 @charset "utf-8"; /* CSS Document For www.gxlcms.com*/ body { text-align:center; font-size:12px; color:#777777; font-family:Verdana, Arial, Verdana, sans-serif,"宋体"; background-color:#FFFFFF; margin:0; padding:0; } #Nav { margin:0; float:left; padding:5px 5px; text-align:center; width:280px; border:1px solid #77...
下面的代码用到上面的图片，大家注意保存下。CSS伪类实现的鼠标滑动链接 @charset "utf-8"; /* CSS Document For www.gxlcms.com*/ body { text-align:center; font-size:12px; color:#777777; font-family:Verdana, Arial, Verdana, sans-serif,"宋体"; background-color:#FFFFFF; margin:0; padding:0; } #Nav { margin:0; float:left; padding:5px 5px; text-align:center; width:280px; border:1px solid #77...
这次给大家带来CSS3的default伪类选择器使用详解，使用CSS3的default伪类选择器的注意事项有哪些，下面就是实战案例，一起来看一下。一、CSS3 :default伪类选择器简介CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处于 selected 状态，此时这个 <option> 可以看成是处于默认状态的表单元素（例如下面示意代码的“选项4”），理论上可...
选择器 p[name^=“my”]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以“my”开头的元素标签 p[name$=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以“my”结尾的元素标签 p[name*=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含“my”结尾的元素上 选择器 > 、 + 、~ 选择器>表示受影响的元素是第一个元素的子元素。 选择器+这 个选择器引用紧跟元素之后的元素...
前言今天主要谈谈css的伪类和伪元素。其实，关于伪类和伪元素，我在小工具CSS 选择器演示 中，写了不少伪类和伪元素，大家可以去看一下！伪类和伪元素的理解官方解释伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在...
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来： 这是最基本的样式：1 2 li{3 list-style-type: none;4 float: left;5 width: 60px;6 height: 60px;7 background-color: #979698;8 margin-left: 10px;9 text-align: center; 10 line-height: 60px; 11 border-radius: 50%; 13 ...
1. :link 向未被访问的链接添加样式 :visited 向已被访问的链接添加样式 :hover 当鼠标悬浮在元素上方时，向元素添加样式 :active 向被激活的元素添加样式(被点击) 以上四种伪类应用于超链接时，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后，a:link和a:visited两者的顺序没有规定 1.1 超链接:<style> a:link{color:red; } a:visited...
伪类选择器 内联元素 第一个问题 #nav li a:link{ display:block; width:90px; height:37px; background:url(images/nav_bg.gif);}#nav li a:hover{ background:url(images/nav_on.gif);} 这段代码中为什么第二个不写#nav li这样的关系就不能用呢？不写的话不是说明页面内所有的a：hover属性都可以用吗？ 第二个问题 #g1{ background:red;} 第一行 第二行 第三行 ...