CSS各属性选择符区别

CSS2.1: ele[attribute] 匹配具有属性attribute的ele元素. ele[attribute = value] 匹配具有属性attribute且值为value的元素. ele[attribute ~= value] 匹配具有属性attribute且其中一个值为value的元素.(多个值用空格隔开) ele[attribute |= value] 匹配具有属性attribute且其中一个值为value的元素或者以"value-"开头的ele元素. CSS3: e…

CSS属性选择符

属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red;} </style> <body> <a href="" class="a">链接a</a> <a href="" id="b">链接b</a> </…

#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符 E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐…

强大的CSS 属性选择符配合 stylish 屏蔽新浪微博信息流广告

新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ads35,#v6_pl_content_biztips,div[feedtype="ad"],#v6_pl_rightmod_ads36,#v6_trustPagelet_recom_member,.gn_topmenulist_tips,div[tbinfo^="ouid=200…

CSS知识点：选择符

一.选择符的种类 1)通配选择符它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给某元素的所有的后代元素应用样式:p *{color:red;} 2)标签选择符顾名思义,通过标签来限定样式作用域 div{padding:5px;} 3)类选择符和面向对象中的类有着类似的功能,需要的时候调用即可,达到重用的目的.将样式定义成一个类,需要使用的地方调用即可. .myClass{f…

CSS那些事儿-阅读随笔1（CSS简介与选择符）

最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style Sheet(层叠样式表),是一种不需要编译的标记性语言,用于增强控制网页样式并允许将样式信息与网页内容分离.可以使用如何一种文本编辑器对其进行编辑. 2.CSS的作用 a.修饰页面文本.图片等元素,避免使用不必要的HTML元素. b.更有效地控制页面结构.页面布局(DIV+CSS). c.提高开发和维护效率…

CSS3初学篇章_3（属性选择符/字体样式/元素样式）

属性选择符选择符说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素. E[att$="val"] 选择具有att属性且属性值为以val…

CSS(二）选择符

2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元素进行选择. 应用:清除某个元素默认样式的时候,或者是统一某个元素样式的时候 2.id选择器语法:<标签 id="top-wrap"></标签> css:#id名字特点:id名字在单一一个页面内是唯一的应用:id名是划分网页外围结构的 3.类选择器…

css伪类选择符

1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) n从1开始3)E :nth-last-child(n) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效.4):first-of-type 以父元素为参照,选择器匹配属于其父元素的特定类型的首个子元素的所有元素. 5)标签 : only-of-type , 以父元素为参照,匹配只含…

学习CSS记录：选择符优先级

1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. -------------------------- 即: (1) important 最高 (可作用绝对覆盖属性功能,平时不建议使用) (2) style="color:red" 1000 (3)#mycolor 100 (4).mycolor 10 (5)P 1 注:p.mycolor 10+1 大于…

CSS选择符-----属性选择符

Element[att] 选择具有att属性的E元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[name]{ border:1px solid red; } </style> </head> <…

CSS伪对象选择符整理

1.E::selection 2.E::placeholder 1. E::selection 设置对象被选择时的样式. 需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性). 兼容性: <div class="_selection"> <p>1. Selecting master branch will publish your site from the ma…

css之属性及剩余的选择符

今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att] 选择具有att属性的E元素. input[type]{color: #red;} <input type="radio"> E[att="val"] 选择具有att属性且属性值等于val的E元素. input[type="radio"]{color: #red;} <input type="radio"&…

css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

通配选择符* { sRules } 类型选择符E { sRules } td { font-size:14px; width:120px; } 属性选择符 E [ attr ] { sRules } E [ attr = value ] { sRules } E [ attr ~= value ] { sRules } E [ attr |= value ] { sRules } h[title] { color: blue; }/* 所有具有title属性的h对象*/ span[cl…

前端之css的基本使用（一），行内、内部、外部样式，语法格式、注释、选择符、属性等

一.行内.内部.外部样式 1.行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background-color: orange;color: red;"> <h1 style=…

css 选择符

css参考手册:css.doyoe.com 在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的 -webkit 代表chrome.safari私有属性 -moz 代表firefox浏览器私有属性 -ms 代表IE浏览器私有属性 -o 代表opera浏览器私有属性 css语法结构 css语法由三部分构成:选择符.属性.值 Selector{Propert…

CSS选择符详解之关系选择符篇

原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,“关系”这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.…

css那些事儿1 css选择符与管理

结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库缓存消息队列的路线如果没有大型项目平台的建设机会是很难能够大纵深的切入,恰恰前端通过编写微信公众号作为一个切入点,希望不会再也找不到工作,再也无法跳巢的尴尬境地. 1 css语法选择符{属性:value}css的语法非常简单. 2 css常见简写 color:#ffffff ;color:rgb(255,255,255);rg…

CSS选择符总结(Selectors)

一.通配选择符(Universal Selector): 语法:* 说明:1.*表示通配符,表示所有的 2.格式:*{样式列表} 3.用于整个页面或网站字体.边距.背景等例子:除了规定div标签内包含的元素使用div大括号内指定的样式,其它的都使用*大括号内指定的样式. <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <hea…

CSS全览_选择符+特指+单位+字体

CSS全览_选择符+特指+单位+字体目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体作者: https://www.cnblogs.com/xiaxiangx/ 1. CSS样式 CSS( Cascading Style Sheet) CSS3由多个独立的模块构成, 原因是各模块可以独立演进, 这样做的缺点是" CSS3规范 "不能涵盖一切 CSS两种形式: 置换元素和非置换元素, 词如其名, 置换元素表示内…

CSS基础篇之选择符2

属性选择符: 选择符版本描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素. E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素. E[att$="val"] CSS3 选…

CSS选择符详解

一.类型选择符什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} 二.群组选择符对于XHMTL对象,可以对一组同时进行了相同的样式指派. 使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构. 使用时应该注意”逗号”是在半角模式下,并非中文全角模式. 如下: h1,h2,h6,p,span { font-si…

编写高效的CSS选择符（节选）

最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. 编写高效选择符指南避免使用通配规则除了传统意义上的通配选择符之外,相邻兄弟选择符.子选择符.后代选择符和属性选择符都可以归纳为“通配规则”.推荐仅用ID.类和标签选择符. 不要限定ID选择符在页面中一个指定的ID只能对应一个选择符,所以没有必要添加额外的限定符. 不要限定类选择符不要用具体的…

CSS选择符类型

一.标签选择符:针对某一类标签,可以以标签作为选择符 <style type="text/css"> p{color:#F00; font-size:36px;} </style> </head> <body> <p>0.5秒三分绝杀!波特兰上演波什时刻第N次拯救热火</p> <h1>玩命暴扣扳平+助攻绝杀三分热火太幸运有这颗队魂</h1> <p>热火今夜还一功臣必须赞 11…

CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）

在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符.如下例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-test</title> <st…

JQuery学习笔记【CSS选择符】--02

Jquery的程序入口: <html> <head> <title></title> <script type="text/javascript“ src="JQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //这里就是JQuery程序入口了: alert(&…

css选择符权重

css选择符权重目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表选择器权重内联样式 1000 ID 0100 CLASS 0010 属性选择符 0010 TAG 0001 伪元素 0001 伪类 0001 inhref 0000 群组选择符不变后代选择符相加 CSS选择符冲突处理 1.权重不同:选择符的css发生冲突时,拥有高权值的css选择符将会显示 2.权重相同:选择符权重一样,将会按照加载顺序进行覆盖(就近原则) 3.…

CSS和html如何结合起来——选择符及优先级

1.选择符兼容性统配选择符 * 元素选择符 body 类选择符 .class id选择符 #id 包含原则符 p strong (所有后代) 子代选择符 p>strong (紧跟子代) lte IE7 相邻选择符 h1+p (h1后面第一个p元素) lte IE7 属性选择符 button[class] (带有class属性的button) lte IE7 button[cl…

CSS选择符、伪类、层叠

主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式行内样式嵌入样式链接样式上下文选择符祖父孙 p em {color:red;} 父子 p > em {color:red;} 紧邻同胞 h2 + p {color:red;} 一般同胞 h2 ~ a {color:red;} 通用 * {color:red;} ID 类选择符 .class1 {color:red;} #id1 {color:red;} 属性选择符选择带有属性名的标签 img[title] {co…

css 选择符中的 >,+,~,=,^,$,*,|,:,空格的意思

一,作为元素选择符 * 表示通配选择符 * {} // 所有元素二,作为关系选择符空格表示包含选择符 a div{} // 被a元素包含的div > 表示子元素选择符 a > div{} // a元素的div子元素,不包括孙辈 + 表示紧贴之后的元素 a + div{} // 紧贴在a元素之后的div ~ 表示元素后面的所有兄弟元素 a ~ div{} // a元素后面的所有div兄弟元素三,作为属性选择符 = 表示等于 div[class="test"] {} /…

【CSS各属性选择符区别】的更多相关文章