今天我们来给大家说一下属性选择器和伪类选择器的使用方法和相关的联系以及区别，下面给大家举一个小列子。属性选择器： [attr~="value"] 单词 单词空格单词 单词必须value有效[attr|="value"] value打头 或者 value-单词注意：属性选择 都是用则很难规则表达式来判别 选择元素，效率要高一些伪类选择器：：before：after:lang(val) val/val-单词：nth-child(n) n从1开始算起 odd基数 even偶数:nth-of-type...
这是通过css3伪类实现的3d按钮，html代码为： <p id="container_buttons"><p><a class="a_demo_three">点我！</a></p><p><a class="a_demo_three second_button">来嘛，别害怕！</a></p><p><a class="a_demo_three third_button">秋叶网络博客（www.mizuiren.com）</a></p></p>css代码为： #container_buttons{cursor:pointer;}.a_demo_three {background-color:#3bb3e0;font-family: Open Sans, sans-serif;font-size:12...
：hover的使用，即当鼠标指针移入元素时，所做出的样式设置示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}ul li{width: 300px;margin-top: 10px;background: #ff0000;}ul li:hover{background: #000000;}</style></head><body><ul><li></li><li></li><li></li></ul></body></html> 以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的...
css中：focus伪类的使用，即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>:focus</title><style>*{margin: 0;padding: 0;}input:focus{background: #cbcbcb;}</style></head><body><input type="text"/></body></html>以上通过：focus给input输入框进行了得到焦点时的样式的设置示例二：focus使用于页面的导航栏时，代码示例如下：<!DOCTYPE html><html lang="en"><head><...
：hover的使用，即当鼠标指针移入元素时，所做出的样式设置示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}ul li{width: 300px;margin-top: 10px;background: #ff0000;}ul li:hover{background: #000000;}</style></head><body><ul><li></li><li></li><li></li></ul></body></html> 以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样...
错误写法 将visited写在hover和active之后，例如：.ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color:#00891f;color:#FFF;text-shadow: 0 1px 0 #00a325;} .ui-page-theme-a .digilinx-ui-btn:hover{background:#00891f;border-color:#00721a;color:#FFF;text-shadow: 0 1px 0 #00891f;} .ui-page-theme-a .digilinx-ui-btn:active{background:#00721a;border-color:#005c15;color:#FFF;text-shadow: 0 1px 0 #0...
在学习CSS的过程中，特别容易搞混淆两个概念：伪类和伪元素。w3c中对两者的定义为：CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不...
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格...
CSS3新增的:not()伪类选择符，匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线，案例如下：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>使用:not() 最后一行li不添加边框</title> <style type="text/css">/* 使字体在所有设备上都达到最佳的显示 */ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegi...
利用伪类组合，可以用css代替js以达到目的，少些一下js.textarea:empty:before {display: block;content: 请输入;color: #ababab;font-size: 15px;text-align: left; }<br>//表示：当textarea元素为空时即没有输入时，有“请输入”这句提示语显示.textarea:focus:before {display: none; }<br>//当textarea元素聚焦时，刚刚用before伪类加的“请输入”就会隐藏<br><br>.textarea:empty:after { content: 请认真填写。;color: #abab...
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。1. 语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class {property: value}（选择符:伪类 {属性: 值}）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的...
伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。区别总结如下：CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。属性描述:acti...
这篇文章主要为大家详细详解<a> 的四种状态css伪类,具有一定的参考价值，感兴趣的小伙伴们可以参考一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>colajia</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /...
伪元素我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；2. 图片： content: url(/path/to/benjamin.png) – 图片...
（一）CSS选择器： 1.标签选择器：通过HTML的标签名直接选择该标签 2.类选择器：通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器：通过#选择器的名称{} 来对添加了ID属性的标签进行选择，ID是在HTML文档中唯一的 4.通用选择器：通过*{}来选择HTML文档中所有的标签 5.后代选择器： 选择器1（空格）选择器2 来选择一个标签中对应的所有子标签 ...