今天在做DEMO的时候偶然发现 自己对CSS选择器的使用并不熟练 遂即在W3school上把内容又看了一遍
下面做些整理
1.元素选择器 直接使用标签即元素选择
html {color:black;} h1 {color:blue;} h2 {color:silver;}h2, p {color:gray;} 同时应用在h2和p
2.通配符选择器* {color:red;} 使文档中所有元素的 color 属性值指定为 red 3.类选择器.important {color:red;} 等同于 *.important {color:red;} 结合元素选择器来使用 p.important {color:red;}只设置p里面类名为important的颜色变红 多类选择器 IE7之前无法处理多类选择器<p class="important warning"> 可以设置.important.warning{color:red}或者.warning.important{color;red}效果一样 即类名顺序不限 但是一定要匹配!
<p class="important urgent ">如果设置 .important.warning{color:red}结果是不能匹配的 样式设置无效
4.ID选择器#intro {font-weight:bold;}ID选择器与类选择器的区别
1)与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
2)不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。 (有多类选择器 但没有多ID选择器)
3)ID能包含更多含义
HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
5.属性选择器*[title] {color:red;} 把包含标题(title)的所有元素变为红色a[href][title] {color:red;} 同时有 href 和 title 属性的 HTML 超链接的文本设置为红色a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} 只选择有特定属性值的元素,属性与属性值必须完全匹配 如下图 提供了属性选择器更多规范6.后代选择器h1 em {color:red;} 即h1元素中有em元素,需要注意的是两个元素之间的层次间隔可以是无限的,无论em的嵌套层有多深,只要是h1的后代元素,都可以被找到 7.子元素选择器 如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。 在具体例子中分析<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> very very变红 <h1>This is <em>really <strong>very</strong></em> important.</h1> 无变化h1 > strong {color:red;}
8.相邻兄弟选择器h1 + p {margin-top:50px;}选择紧接在 h1 元素后出现的第一个段落,h1 和 p 元素拥有共同的父元素。
9.伪类 伪类名称对大小写不敏感。
1)超链接 L-V-H-A即 a:link 未访问默认,a:visited 访问后,a:hover 鼠标放在上面,a:active 鼠标按下。 必须遵循严格的顺序H在L-V后,A在H后。
2):focus 获得焦点 IE8以上支持
3):first-child 首个子对象,容易误解,特别注意。
<div><p>These are the necessary steps:</p> 变粗
<ul><li>Intert Key</li> 变大写
<li>Turn key<strong>clockwise</strong>
</li> 无变化 <li>Push accelerator</li> 无变化 </ul> <p>Do<em>not</em>
push the brake at the same time as the accelerator.</p> 无变化 </div>p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;4):lang :lang 伪类使你有能力为不同的语言定义特殊的规则</pre>根据以前的理解,若是p:first-child,那么第一个p里的文本会变化,第二个p里的DO也会变化,因为他们是p的first-child,但是事实并不如此。重新思考之后知道,所谓first-child根本不是这个意思。p的父元素是div,li的父元素是ul。p:first-child的意思是 div里面的第一个p元素li:first-child的意思是是 ul里面的第一个li元素这么理解起来 再根据事实情况,仿佛正是合理的
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
q:lang(no){quotes: "~" "~"}
结果是一些文本~段落中的引用~一些文本。
10.伪元素
:first-line伪元素用于向文本的首行设置特殊样式。 只能用于块级元素
:first-letter 伪元素用于向文本的首字母设置特殊样式 只能用于块级元素
:before 伪元素可以在元素的内容前面插入新内容
:after 伪元素可以在元素的内容之后插入新内容