标签选择器(如:body,div,p,ul,li)
.类选择器(如:class="head",class="head_logo")
ID选择器(如:id="name",id="name_txt")
全局选择器(如:*号)
.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
.继承选择器(如:div p,注意两选择器用空格键分开)
伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器,下面是这三种选择器的基本用法1、标签名选择器 一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。
1
2
div {color:redborder:1px blue solid}
p {color:#000}
2、类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。
1
2
<div class="test">测试代码</div>
.test {color:redborder:1px blue solid}
3、id选择器,id选择器是唯一的,只可以获取独一无二的一个元素。
1
2
<div id="test">测试代码</div>
#test {color:redborder:1px blue solid}
按照从上到下,从右到左的顺序解析。例如:.list a {color:blue}先解析到 a 标签,并将页面上所有 a 标签的字体颜色都按照 color:red 进行渲染(蓝色),再解析到 .list ,将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色。是的,你没有看错,浏览器解析CSS从来就是这么苦逼。
这里分享下在css中为字符串中的每一行设置样式的方法。
操作设备:联想电脑
操作系统:win10
代码编辑器:zend studio 10.0
1、首先新建一个html文件,命名为test.html,在test.html文件内,使用p标签创建一行字符,用于测试。
2、在test.html文件内,给p标签添加一个class属性,用于样式的设置。
3、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。
4、在css标签内,通过class属性和“:first-letter”选择第一个字符,使用color属性设置它为红色。
5、最后在浏览器打开test.html文件,查看实现的效果。