CSS选择器加号+的作用是什么:此选择器能够匹配指定元素后面紧邻的兄弟元素。代码实例如下: 蚂蚁部落#items{ width:900px; height:auto; margin:0 auto; padding:5px 0; clear:both;}#items ul, #items li{ list-style:none;}#items li{ width:500px; height:28px; text-align:left; padding-left: 0px; line-height:28px; border-bottom:dashed 1px #CCC; cursor:pointer;}.first + li{ color:red;} ...
每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 一、基本选择器 1. 通配选择器 「*」 ...
子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的标签进行样式设定(标签必须为段落标签下的第一代子元素, 意思即中间不包含别的标签嵌套), 这个时候就要使用子选择器. 代码示例: p>span{ font-size:20px; } " > "就称之为子选择器, 它的作用就是将标签选择器下的第一代子元素的标签中的文本样式设置为字号20px, 但是这种显然不是很灵活...
css使用伪对象选择器设置元素内容:本章节分享一段代码实例，它实现了使用css的伪对象选择器设置内容的功能。这里只是做一下简单的演示，更多内容可以参阅相关阅读。代码实例如下: 蚂蚁部落#antzone:after{ content:"softwhy.com"; color:blue;}蚂蚁部落的url地址是: 上面的代码可以为div元素添加后续内容，然后设置后续内容的颜色。相关阅读:（1）.:after可以参阅CSS的伪对象选择符E:after/E::after一章节。（...
1.通配选择器 匹配所有元素 *{color:red;} 2.标签选择器 匹配所有p元素 p{color:red;} 3.ID选择器 匹配ID="div1"的元素 #div1{color:red;} 4.类选择器 匹配class="red"的元素，CSS和HTML对大小写不敏感，但ID是大小写敏感的。 .red{color:red;} 应用多个class，类名中间用空格隔开，class="red green"。元素将应用red和green的所有规则，重复规则只有一个生效，但不取决...
p[name]{background:red;} 只使用属性名p[name=ghr]{background:red;} 指定属性名，并指定了该属性的属性值p[name~=old]{background:red;}此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词p[name^=g]{background:pink;}属性值是以g开头的p[name$=M]{background:#CC0;}属性值是以M结尾的p[name*=d]{background:#C3C;}属值中包含了valuep[name|=b]{background:#C3C;}属性值是value或者以“value-”开头的值（比...
CSS选择器复习 通用选择器：* 选择到所有的元素 选择子元素：> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素 伪元素选择器： ::first-line 匹配文本块的首行 ::first-letter 选择文本块的首字母 伪类选择器： :before, :after在元素内容前面、后面添加内容(相当于行内元素) CSS3结构选择器 :nth-child 选择指定索引处的子元...
一. 以“字符串”开头 两种用法的区别是： a. 以字符串开头，需要用"-"分割开， b. 以字符串开头，不需要任何分隔符 1. 资料 a） b) 2. html代码 横线分割字符串本身全字母字符串 下划线分割字符串 3. css代码 a) [class|="dot"]{ border: 1px solid #000;} b) [class^="dot"]{ border: 1px solid #000;} 4. 效果： a) b...
标签：HTML+CSS 什么是选择器？ 每一条css样式声明（定义）由两部分组成，形式如下： 选择器{ 样式;} 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素 标签选择器 标签选择器其实就是html代码中的标签。如下面代码中的、、、、。例如下面代码： p{font-size:12px;line-height:1.6em;} 上面的css样式代码的作用：为p标签设置12px字号，...
什么是:before和:after？ 该如何使用他们？ :before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。下面我们先跑个简单的代码测试下效果： p:before{ content:"H" /*:before和:after必带技能，重要性为满5颗星*/ } p:after{ content:"d" /*:before和:after必带技能，重要性为满5颗星*/ ...
设计师似乎喜欢用 浮动 label 模式来设计华丽的效果，虽然我不确定我是否百分百喜欢这种方式，但我忍不住快速实现了一个这样的 demo。这个版本用上了一些我最近才看见的现代 CSS 表单样式技巧，特别是 :placeholder-shown选择器。 先说重点：不管从形状或者形式上，这都 不是一种最佳实践。这个 demo 的实现适用于某些浏览器的较新版本 - 尤其是 Chrome/Opera 和 Safari/WebKit。但它在 Firefox 上运行得一塌糊涂。要注意了，我...
CSS 选择器是一种模式，用于选择需要添加样式的元素。平时使用最多也是最简单的就是 #id、.class 和标签选择器，在 CSS 中还有很多更加强大更加灵活的选择方式，尤其是在 CSS3 中，增加了很多新的选择器，使得选择元素更加便捷，所以必须理解这些选择器，只有先理解了，多用几次，自然而然就记住了。 1、* 【CSS2】 通配符，选择页面所有元素。 1 *{2 margin:0;3 padding:0;4 } 上面代码的作用是...
CSS选择器包括标签选择器、ID选择器、类选择器、伪类和伪对象选择器、子选择器、相邻选择器、属性选择器、通用选择器、包含选择器、分组选择器、指定选择器等选择器，分为标签选择器、ID选择器、类选择器、特殊选择器这四类。 以下是我总结的5种常用的CSS选择器。 1、标签选择器 eg: p{ color:#333; } a{ display:block; } 优点：能快速为页面中同类型的标签统一...
1.常用的选择器：①元素选择器 指定希望应用样式的元素.比如：p {color:#fff;}②后代选择器 寻找特定元素或者元素的后代. 比如：body p{color:#ccc;} 这个选择器和子选择器body>p的区别是：body>p是指body下作为子元素的所有节点P,而后代选择 是body下面所有的节点P，可以说子元素选择器是一种特殊的后代选择器。 ③类选择器 指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据它用作什...
1.相邻兄弟选择器 P+b : 同一个父元素下p标签后面的第一个兄弟元素b； 2.通用兄弟选择器 p~b : 同一个父元素下p标签后面的所有兄弟元素b； 3.属性选择器 将元素属性用于选择器中，从而获取指定元素属性或者值得元素； 语法： [属性] ： 匹配 "指定属性" 的 "所有" 元素； 元素[属性] ： 匹配 "指定属性" 的 "指定" 元素； input[type] : 获取具备type属性的input； input[id] : 获取具备id属性的i...