CSS通过选择符来选择某个对象,并对其进行修饰。
选择符的类别很多,我们究竟应该在编写程序时如何筛选,我之前在这里列举了几条基本需要注意的事项。
元素选择符
作用的范围是html标记
a{……} div{……} p{……}
类选择符
可以作用于一个或多个元素,使得这些元素有相同的样式。
.red{……} .blink{……} .but1{……}
使用前提,需要为html元素进行标记class属性 <a class="red" src="……">……</a>
id选择符
作用于网页中具有唯一标识的元素。
#red{……} #blink{……} #but1{……}
使用前提,需要为html元素进行标记id属性
<a id="red" src="……">……</a>
—总结:以上三个是最基本的选择符,其作用的优先级是:
id>类>tag标签
但是这三个都小于内联样式
<a style="……" id="red" src="……">……</a>
—注意:id本身是唯一标识的,class是将一个样式作用于很对对象。
但是在区分意识不强的情况下,有些人可能会这样
同时赋予div属性.png
同时赋予div属性.png
按照理论来说,浏览器应该只识别第一个标识id的,但是刚刚的代码,我在浏览器内分别作了测试后,发现浏览器对这两个元素均进行了渲染,但是当我在js内写脚本 document.getelementByID('q').style 进行设置时,发现js解释器只找到了第一个。
?通配选择符
作用于所有html标签,缺点呢,这里写过,不赘述啦
*{……}
后代选择符
<div>111<p>11<span>1</span></p></div> div span{……}
发现div与span内有一个或多个空格,span并不是div的直接子元素,而是孙子辈的。当时不是不接受儿子辈的。
子元素选择符
<div>111<p>11<span>1</span></p></div> div span{……} div>p{……}//子元素选择器
对比后代元素选择器,通过 > 号来制定父子关系
—注意:推荐使用子元素选择符,原因,猛戳这里
?选择符分组
将每个选择符用 , 分隔开,{}内的样式作用于前面的每个选择器的选择结果
p,.red,h1{……}
标签制定式选择符
p.red{……}//类为red中的p标签
组合选择符
p .red #big{……}
仔细看之间没有逗号,只是空格,意思是为id为big,且他包含在类为red的元素内,并且这个类也包含在p标签内。
伪类选择符
a:hover{……}
这里有详细的介绍伪类。
—总结:以上是用的比较多的选择器。
相邻兄弟选择符
选择紧邻在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
h1 + p {margin-top:50px;}//中间是加好,不太好记
意思是选择一个段落p,且紧邻他的上级兄弟元素为h1
伪元素选择符
:first-line 伪元素
用于向文本的首行设置特殊样式。 p:first-line {color:#ff0000; }
:
first-letter 伪元素
用于向文本的首字母设置特殊样式,作用于 块级 元素。 p:first-letter {color:#ff0000; }
伪元素可以与其他伪元素综合使用,也可以和其他选择器一起使用。
以上文本修饰的文元素的优先级还是挺高的,大于id、大于内联。而且二者相比,-letter又大于-line。
:before 伪元素
在元素的内容前面插入新内容
:after伪元素:
在元素的内容后面插入新内容
h1:before { content:url(logo.gif); }
这个的前后面指的是这样的
<h1><img src="" />是在我内容的前面插入</h1>
属性选择符
选择有某个属性的元素。
[title]{color:red;}
标签内具有属性的title的元素。