CSS之选择器相关
一、选择器的作用
选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
1 body{ 2 color:gray; 3 font-size: 12px; 4 } 5 /*标签选择器*/ 6 p{ 7 color: red; 8 font-size: 20px; 9 } 10 span{ 11 color: yellow; 12 }
2.id选择器:
在使用id选择器到时候需要注意一下三点:
(1)同一个页面中id不能重复。
(2)何的标签都可以设置id
(3)id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 1 #box{ 2 2 background:green; 3 3 } 4 4 5 5 #s1{ 6 6 color: red; 7 7 } 8 8 9 9 #s2{ 10 10 font-size: 30px; 11 11 }
3.类选择器:
类选择器在使用前需要在标签中加入class类=" ",在style样式中需要 "." + 类名来使用
1 .lv{ 2 color: green; 3 4 } 5 .big{ 6 font-size: 40px; 7 } 8 .line{ 9 text-decoration: underline; 10 11 }
公共类的简化使用:
1 <div> 2 <p class="lv big">段落1</p> 3 <p class="lv line">段落2</p> 4 <p class="line big">段落3</p> 5 </div>
高级选择器:
高级选择器中包括:子代选择器、后代选择器、并集选择器和交集选择器.
1.子代选择器:
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }
2.后代选择器:
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
1 .container p{ 2 color: red; 3 } 4 .container .item p{ 5 color: yellow; 6 }
3.并集选择器:
这种选择器比较常见,用起来也很方便,只在多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
1 a,b,c,d{ 2 color: #008000; 3 text-decoration: none; 4 5 }
4.交集选择器:
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>这样的标签。它表示示两者选中之后元素共有的特性。
1 h4{ 2 width: 100px; 3 font-size: 14px; 4 } 5 .active{ 6 color: red; 7 text-decoration: underline; 8 } 9 /* 交集选择器 */ 10 h4.active{ 11 background: #00BFFF; 12 }
其他选择器:
其他选择器中包括:属性选择器、伪类选择器、伪元素选择器等等。重点介绍这三个。
1.属性选择器:
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
1 /*根据属性查找*/ 2 /*[for]{ 3 color: red; 4 }*/ 5 6 /*找到for属性的等于username的元素 字体颜色设为红色*/ 7 /*[for='username']{ 8 color: yellow; 9 }*/ 10 11 /*以....开头 ^*/ 12 /*[for^='user']{ 13 color: #008000; 14 }*/ 15 16 /*以....结尾 $*/ 17 /*[for$='vvip']{ 18 color: red; 19 }*/ 20 21 /*包含某元素的标签*/ 22 /*[for*="vip"]{ 23 color: #00BFFF; 24 }*/ 25 26 /**/ 27 28 /*指定单词的属性*/ 29 label[for~='user1']{ 30 color: red; 31 } 32 33 input[type='text']{ 34 background: red; 35 }
2.伪类选择器:
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte
1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 }
3.伪元素选择器:
1 /*设置第一个首字母的样式*/ 2 p:first-letter{ 3 color: red; 4 font-size: 30px; 5 6 } 7 8 /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ 9 p:before{ 10 content:'alex'; 11 } 12 13 14 /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/ 15 p:after{ 16 content:'&'; 17 color: red; 18 font-size: 40px; 19 }