选择器普及
2018-10-22 本文已影响0人
鬼会画符
- 选择器：会告诉浏览器，网页上的那些元素需要什么样的样式。
选择器都存在<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
