选择器
在网页中需要选择相应的标签进行样式的修改,就需要对标签进行定位,而选择器就是为了定位标签元素而生的。
基础选择器
基础选择器是最简单的选择器。
标签选择器
使用html名称作为选择器,按照标签名称分类,为页面中某一类标签统一css样式。
div {
color:red;
}
类选择器
想差异化选择不同标签,需要使用类选择器。
.类名 {
color:red;
}
例子:
定义类选择器
.red {
color:red;
}
html标签中对应class属性相同的标签会变化。
<div class="red">
变红色啦
</div>
多类名时中间用空格隔开。
<div class="red green">
变色啦
</div>
id选择器
给特定id的标签使用指定样式。
例子:
定义id选择器
#red {
color:red;
}
html标签中对应class属性相同的标签会变化。
<div id="red">
变红色啦
</div>
通配符选择器
所有标签修改样式。
* {
color:red;
}
属性选择器
修改带有指定属性的html标签。
标签[属性] {
color:red;
}
标签[属性=属性值] {
color:red;
}
例子:
input[value] {
color:red;
}
<input type="text" value="waiting"></input>
<input type="text"></input>
复合选择器
复合选择器建立在基础选择器之上的,对于基础选择器进行组合的。
选择器分为以下4种:
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
后代选择器
后代选择器又名包含选择器,可以选择父元素里面的子元素,其语法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成外层标签的后代。
语法
元素标签1 元素标签2 ... {
color:red;
}
这里的元素标签可以使用选择器定位。
例子:
现有html如下:
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有个需求就是假如要使ol中li变成红色,其他不变。这个需求用后代选择器再适合不过了。
ol li{
color:red;
}
子选择器
只能选择作为某一元素最近一级的子元素,就是选亲儿子的元素。
语法
元素1>元素2 ... {
color:red;
}
例子:
<div class="ok">
<a>aaa</a>
<p>
<a>aaa</a>
</p>
</div>
如果使用父选择器
.ok a{
color:red;
}
那么所有a标签内的文字都会变红。
如果使用子选择器
.ok>a{
color:red;
}
只有亲儿子中a标签才会变红。
并集选择器
并列修改。
元素1,元素2 {
color:red;
}
将元素1和元素2的标签并列修改为红色。
伪类选择器
用于向某些选择器添加特殊效果,比如给链添加特殊效果。
链接伪类选择器
- a:link:选择所有未被访问的链接。
- a:visit:所有已被访问的链接
- a:hover:选择鼠标指针位于其上的链接。
- a:active:选择活动链接。
focus伪类选择器
用于获取标点的表单元素,更改样式。
input:focus{
background-color:yellow;
}