一: CSS选择器概述
选择器用于选择要进行CSS修饰的HTML片段, 主要有基本选择器和高级选择器两种
二: 基本选择器
2.1 标签选择器
- 直接使用标签名选择,会选中页面中所有的同名标签
html/css
<div> <p>这是一个段落标签</p> <span>这是一个span标签</span> </div>
p{
font-family: 华文行楷;
}
span{
font-family: 华文行楷;
}
或者多个标签选择器选择 中间使用逗号分隔
p,span{
font-family: 华文行楷;
}
2.2 id选择器
- 同一个页面id唯一
- 每个标签都可以设置id
- id命名规则,字母,数字,下划线,区分大小写
- 使用#号选择
html
<div> <p id="p1">这是一个段落标签</p> <span id="span1">这是一个span标签</span> <h1 id="h"> 这是一个h标签</h1> </div>
css
#p1{
background-color: green;
}
#span1{
font-family: 华文行楷;
}
#h{
color: red;
}
2.3 类选择器
- class选择器,将样式归类
- 同一个标签可以有多个类
- 使用点号选择
HTML
<div> <p class="blue big_size">这是一个段落标签</p> <span class="big_size xiahx">这是一个span标签</span> <h1 class="blue xiahx"> 这是一个h标签</h1> </div>
CSS
.blue{
background-color: blue;
}
.big_size{
font-size: 20px;
}
.xiahx{
text-decoration: underline;
}
三: 普通选择器注意点
- 尽可能的使用class,
- class要尽可能的小,可以为每个标签设置多个class
- id少用,JS时用
四: 高级选择器
4.1 后代选择器
- 空格隔开
- 使用频率比较多
HTML
<div class="father">I am father <div class="son">I am son <div class="son"> I am son too</div> </div> </div>
CSS
.father .son{
font-size: 21px;
}
4.2 子代选择器
- 使用>表示
4.3 并集选择器
- 多个选择器使用逗号分隔
比如下面这个例子中,将页面所有的标签去除margin 和 padding
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
4.4 交集选择器
- 使用点号来表示交集选择
- 第一个选择器是标签选择器,第二个选择器是类选择器
HTML
<div>I am a pure div <div class="active">I have a active class</div> </div>
CSS
div.active{
font-size: 21px;
}
五: 属性选择器
根据标签的属性进行选择
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 }
六 伪类选择器
- 主要作用于a标签
- link 没有访问过的
- visited访问过后的样式
- hover 鼠标悬停时的样式
- active 鼠标按住时的样式
6.1 link
HTML
<div class="box"> <ul> <li class="item"> <a href="#">百度一下</a> </li> </ul> </div>
CSS
.box ul li.item a:link{
color: red;
}
6.2 visited
CSS
.box ul li.item a:visited{
color: yellow;
}
6.3 hover
CSS
.box ul li.item a:hover{
color: blue;
font-size: 21px;
}
6.4 active
CSS
.box ul li.item a:active{
color: green;
font-size: 30px;
}
7 伪元素选择器
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}