CSS分为选择器和属性,
- 选择器:选择要应用属性值的标签
- 属性:应用在标签上改变标签的样式
选择器:
基本选择器
优先级:id选择器>类选择器>元素选择器>通用选择器
同等级选择器优先级从下到上
选择器类型 | 使用方法 | 在css文件中使用示例(以p标签为例) |
---|---|---|
元素选择器 | | p{ color: red; } 标签加中括号 |
类选择器 | | .pclass1{ color:blue; } 点加类名 |
id选择器 | | #pid1{ color:yellow; } 井号加id名 |
通用选择器 | 无 | |
组合选择器
组合选择器可以使用元素选择器、 id选择器或类选择器进行组合
选择器类型 | 使用格式 | 使用说明 |
---|---|---|
后代选择器 | li a { color: green; } | 选择li标签后代中的a标签 |
儿子选择器 | div>p { color: green; } | 选择div标签的儿子标签中的p标签 |
毗邻选择器 | div+p{color:black;} | 选择div标签后边相邻的p标签(同等级标签) |
弟弟选择器 | #i1~p{color:green;} | 选择id为i1的标签后边的p标签(同等级标签) |
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
不常用的
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
color: green;
}
不怎么常用的属性选择器
分组
当多个元素样式重复时可使用分组使用逗号隔开,组中的元素都使用统一的样式
div, p { color: red; }
一般使用如下形式,一个元素一行
div,
p { color: red; }
伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
使用方法 | 使用场景(before和after多用于清除浮动。) |
---|---|
p:first-letter { font-size: 48px; color: red; } | 常用的给首字母设置特殊样式: |
p:before { content:"*"; color:red; } | 在每个<p>元素之前插入内容 |
p:after { content:"[?]"; color:blue; } | 在每个<p>元素之后插入内容 |