CSS之选择器相关
一、选择器的作用
选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
2.id选择器:
在使用id选择器到时候需要注意一下三点:
(1)同一个页面中id不能重复。
(2)何的标签都可以设置id
(3)id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 #box{
2 background:green;
3 }
4
5 #s1{
6 color: red;
7 }
8
9 #s2{
10 font-size: 30px;
11 }
3.类选择器:
类选择器在使用前需要在标签中加入class类=" ",在style样式中需要 "." + 类名来使用
.lv{
color: green; }
.big{
font-size: 40px;
}
.line{
text-decoration: underline; }
公共类的简化使用:
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</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.属性选择器:
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
2.伪类选择器:
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{ color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{ color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{ color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{ color: yellowgreen;
}
3.伪元素选择器:
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
} /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
最新文章
- c#中 命令copy 已退出,返回值为1
- 怎么解决ABBYY找不到_FRBatch.pac的问题
- Javascript 正则表达式_5
- 无废话版本-Asp.net MVC4.0 Rasor的基本用法
- 基于visual Studio2013解决C语言竞赛题之0502最小数替换
- Fun<;>;,匿名方法,Lambda表达式 冒泡排序C#
- Popular Products
- 安装Pomelo
- Django_中国化
- obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器
- 类ArrayList
- USSD 杂记
- 第三十七节、人脸检测MTCNN和人脸识别Facenet(附源码)
- [物理学与PDEs]第3章第1节 等离子体
- python locust 性能测试:HttpSession
- 【linux】shell代码,获取当前路径,创建文件夹
- http://www.360doc.com/userhome.aspx?userid=5054188&;cid=235
- CentOS 6 安装Redmine
- Android输出日志Log类
- lintcode-160-寻找旋转排序数组中的最小值 II
热门文章
- 单机prometheus vs 集群kube-prometheus+prometheus-operator
- HDU 2089 不要62 数位DP模板题
- 《第一本Docker书》学习笔记——第3章 Docker入门
- 【Leetcode_easy】937. Reorder Log Files
- oracle 存储过程详细介绍(创建,删除存储过程,参数传递等)
- eNSP基于接口地址池的dhcp服务
- social engineering toolkit
- __init__调用之二
- servlet02
- ajax后台跳转无效的原因