- 选择器:会告诉浏览器,网页上的那些元素需要什么样的样式。
选择器都存在<html>--<head>--<style>中
元素选择器
- 根据标签的名字选取制定元素
语法:
标签名{}
比如:
p{
background-color:red;
}
(选中页面中所有p标签,改变背景颜色)
类选择器
- 根据元素的class属性值选取指定元素
语法:
.classname{}
比如:
.p2{
color: green;
} (存在于style中)
<p class="p2">哈哈,我是</p> (存在体标签中)
ID选择器
- 根据元素的id属性值选取指定元素
语法:
#id{}
比如:
#abc{
color:green;
}
<p id="abc">娃哈哈</p>
复合选择器 (交集选择器)
- 同时使用多个选择器,选择同时满足多个选择器的元素
语法:
选择器1 .选择器2{}
比如:
div.p{
color:red;
}
(满足div下属于p标签的颜色设置为红色)
群组选择器(并集选择器)
- 同时使用多个选择器,多个选择器同时指定的样式
语法:
选择器1,选择器2,选择器3{}
比如:
div,p,#abc{
color:red;
}
(div元素,p元素,id为abc的元素 颜色设置为红色)
通用选择器
- 同时选中页面中所有的元素
语法:
*{}
比如:
*{
color:red;
}
(所有元素设置为红色)
祖先元素 | 后代元素 | 父元素 | 子元素 | 兄弟元素 |
---|---|---|---|---|
直接或间接包含后代元素的元素 | 直接或间接被祖先元素包含的元素 | 直接包含子元素的元素 | 直接被父元素包含的元素 | 拥有相同父元素的元素 |
后代选择器
- 根据标签的关系,为处在元素内部的代元素设置样式
语法:
祖先 后代{}
比如:
div p{
color:red;
}
(div父元素下的p元素颜色设置为红色)
伪类和伪元素
- 有时候需要选择本身没有标签,但是仍然能够轻易被识别的网页部位,CSS 为他们提供了此类选择器
给链接定义样式
- 正常连接(没有被访问过的网页)
a:link- 访问过得链接
a:visited- 鼠标划过的链接
a:hover- 正在点击的链接
a:active
输入文本框
<input type="text">
- 获取焦点(输入点击文本框内时)
:focus- 指定元素前
:before- 指定元素后
:after- 选中的元素
::selection
网友评论