目录
在 CSS 中，对于元素的修饰是通过选择器来获取到的，它有很多选择器。
基本选择器
包含选择器
属性选择器
伪类选择器
基本选择器使用的频率是最高的，它分为以下几种：
ID选择器
标签选择器
类选择器
通用选择器
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>ID选择器</title> ? ?<style> ? ? ? ?#div1 { ? ? ? ? ? ?color: blueviolet; ? ? ? } ? ?</style> </head> <body> <div id="div1">这是第一个块元素</div> <div>这是第二个块元素</div> </body> </html>
ID 选择器的优先级是最高的，因为页面中的 ID 不能重复，即是唯一的。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>标签选择器</title> ? ?<style> ? ? ? ?div { ? ? ? ? ? ?color: blueviolet; ? ? ? ? ? ?font-size: 20px; ? ? ? } ? ?</style> </head> <body> <div id="div1">这是第一个块元素</div> <div>这是第二个块元素</div> <span>这个span元素</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>类选择器</title> ? ?<style> ? ? ? ?.container { ? ? ? ? ? ?color: blueviolet; ? ? ? ? ? ?font-size: 18px; ? ? ? } ? ?</style> </head> <body> <div>这是第一个块元素</div> <div class="container">这是第二个块元素</div> <span class="container">这个span元素</span> </body> </html>
注意：
使用类样式是通过 class 属性来指定的
在编写样式时，需要前面有个小圆点
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>通用选择器</title>
? ?<style>
? ? ? * {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?color: blueviolet;
? ? ? }
? ?</style>
</head>
<body>
<div>这是第一个块元素</div>
<div>这是第二个块元素</div>
<span>这个span元素</span>
</body>
</html>
通用选择器是使用 * 号来表示匹配所有的页面元素。padding 表示内边距，margin 表示外边距。
id，标签选择器的优先性大于类，和通用选择器
包含选择器又分为以下几种：
子选择器：只能获取某个标签的第一级子元素 >
后代选择器：能够获取某个标签的所有子元素 空格
分组选择器：使用逗号选择器，还叫并列选择器。它可以设置多个标签 逗号
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>包含选择器</title> ? ?<style> ? ? ? ?/* 子选择器 */ ? ? ? ?/* div.list 交集选择器 */ ? ? ? ?div.list > li { /* 子选择器的格式为：父选择器 > 子选择器 {} */ ? ? ? ? ? ?color: blueviolet; ? ? ? } ? ? ? ? ?/* 后代选择器 */ ? ? ? [div].list li { /* 后代选择器的语法：父选择器 子选择器 {} */ ? ? ? ? ? ?background-color: aquamarine; ? ? ? } ? ? ? ? ?/* 分组选择器，也叫逗号选择器，也叫并列选择器 */ ? ? ? ?.mylove, #myprogram, h1 { ? ? ? ? ? ?color: red; ? ? ? } ? ?</style> </head> <body> <div id="first" class="mylove">这是一个 div 块元素</div> <p id="myprogram">这是一个段落标签</p> <div class="mylove mylove2">这也是一个 div 块元素</div> <h1>这是标题</h1> <hr> <div class="list"> ? ?<ul> ? ? ? ?<li>这是一个列表1</li> ? ? ? ?<li>这是一个列表2</li> ? ? ? ?<li>这是一个列表3</li> ? ? ? ?<li>这是一个列表4</li> ? ? ? ?<li>这是一个列表5</li> ? ? ? ?<li>这是一个列表6</li> ? ? ? ?<li>这是一个列表7</li> ? ? ? ?<li>这是一个列表8</li> ? ? ? ?<li>这是一个列表9</li> ? ? ? ?<li>这是一个列表10</li> ? ?</ul> ? ?<li>这是一个列表8</li> ? ?<li>这是一个列表9</li> ? ?<li>这是一个列表10</li> </div> </body> </html>
????????由于在 HTML 中标签的属性是很重要的元素，所以 CSS 中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号（[]）。
<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<title>属性选择器</title> ? ?<style> ? ? ? ?/* 需求1：获取页面中所有带有 class 属性的元素 */ ? ? ? [class] { ? ? ? ? ? ?color: blueviolet; ? ? ? } ? ? ? ?/* 需求2：获取带有 class 属性，并且值为 container 的元素 */ ? ? ? ?.container[class] { ? ? ? ? ? ?color: white; ? ? ? ? ? ?background-color: blue; ? ? ? } ? ? ? ?/* 需求3：获取页面中所有 div 且带有 title 属性的元素 */ ? ? ? ?div[title] { ? ? ? ? ? ?margin-top: 5px; ? ? ? ? ? ?margin-bottom: 5px; ? ? ? ? ? ?border: 1px solid #0000ff; ? ? ? } ? ? ? ?/* 需求4：获取页面中所有 input 元素且有 type 属性的，同时这个属性的值必须是 text 的所有元素 */ ? ? ? ?input[type="text"] { ? ? ? ? ? ?color: red; ? ? ? ? ? ?border: 1px solid blue; ? ? ? } ? ? ? ?/* 需求5：获取所有 input 元素的 type 属性的值中包括字母 e 的所有元素 */ ? ? ? ?input[type*='e'] { ? ? ? ? ? ?background-color: aquamarine; ? ? ? } ? ? ? ?/* 需求6：获取type属性的值中以字母 e 开头的所有元素 */ ? ? ? ?input[type^='e'] { ? ? ? ? ? ?border: 1px dotted orange; ? ? ? ? ? ?outline: none; ? ? ? } ? ? ? ?/* 需求7：获取 type 属性的值中以 rl 结尾的所有元素 */ ? ? ? ?input[type$='rl'] { ? ? ? ? ? ?color: brown; ? ? ? } ? ? ? ?/* 需求8：通过类样式为 msg 元素来获取它的下一个元素 p */ ? ? ? ?div.msg + p { ? ? ? ? ? ?border: 1px solid #ff0000; ? ? ? ? ? ?background-color: orange; ? ? ? } ? ?</style> </head> <body> <div class="container">这是一个容器</div> <p>第一个段落</p> <p>第二个段落</p> <div title="这是标题">这是第二个容器</div> <input type="text" name="company" value="西安鸥鹏"> <input type="url" name="url" value="www.xianoupeng.com"> <input type="email" name="email" value="li@xianoupeng.com"> <hr> <div class="msg">这是个人信息</div> <p id="msg2">第三个段落</p> </body> </html>
属性选择器说明：
要使用属性选择器，必须合适中括号
可以直接使用属性，也可以使用属性名="属性值" 的方式
还可以使用包含（*）、以什么开头（^）、以什么结尾（$）的方式来获取
加号表示某个元素之后紧跟着的第一个元素
同一个标签，在不同的状态下，它就具有不同的样式，这就叫伪类样式。伪类选择器使用冒号来表示。
常见的状态主要有以下几种：
1）:link 超链接点击之前
2）:visited 超链接点击之后
3）:hover 鼠标悬停在某个标签上时
4）:active 鼠标点击某个标签时，但没有松开
5）:focus 某个标签获取焦点时的状
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>伪类选择器</title>
? ?<style>
? ? ? ?/* 超链接点击之前的颜色 */
? ? ? ?a:link {
? ? ? ? ? ?color: orange;
? ? ? }
? ? ? ?/* 超链接点击之后的颜色 */
? ? ? ?a:visited {
? ? ? ? ? ?color: brown;
? ? ? }
? ? ? ?/* 鼠标移动到元素上的效果，注意不能移开鼠标 */
? ? ? ?a:hover {
? ? ? ? ? ?text-decoration: none;
? ? ? }
? ? ? ?/* 按住鼠标不松开的效果 */
? ? ? ?a:active {
? ? ? ? ? ?color: red;
? ? ? }
? ? ? ?/* 元素获取焦点的效果 */
? ? ? ?input[type]:focus {
? ? ? ? ? ?border: 1px solid #ff0000;
? ? ? ? ? ?outline: none;
? ? ? }
? ?</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<br>
<input type="text" name="name">
</body>
</html>
在 CSS 中伪类选择器有很多。
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2|2n-1|odd|even) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| ::first-letter | p::first-letter | 选择每个p 元素的第一个字母 |
| ::first-line | p::first-line | 选择每个p元素的第一行 |
| ::first-child | p::first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| ::before | p::before | 在每个p元素之前插入内容 |
| ::after | p::after | 在每个p元素之后插入内容 |
| ::section | p::section | 被鼠标选中后的样式 |
| :lang(language) | p:lang(it) | 为p元素的lang属性选择一个开始值 |
这个伪类选择器，是用于获取所有选中的元素。
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8"> ?
? ?<title>:checked选择器</title>
? ?<style>
? ? ? ?input:checked + label {
? ? ? ? ? ?color: red;
? ? ? ? ? ?background-color: orange;
? ? ? }
? ?</style>
</head>
<body>
<input type="radio" name="gender" checked="checked" value="男"> 男 <input type="radio" name="gender" value="女"> 女<br>
<input type="checkbox" name="hobby" id="hobby" value="看书" checked="checked"> <label for="hobby">看书</label>
<input type="checkbox" name="hobby" value="游戏"> <label for="hobby">游戏</label><br>
</body>
</html>
选择器匹配属于任意元素的第一个子元素的 元素
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>:first-child</title>
? ?<style>
? ? ? * {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? }
? ? ? ?ul {
? ? ? ? ? ?list-style: none; /*去掉小圆点*/
? ? ? }
? ? ? ?ul li {
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 25px;
? ? ? ? ? ?background-color: orange;
? ? ? ? ? ?margin-top: 2px;
? ? ? ? ? ?padding-left: 5px;
? ? ? }
? ? ? ?ul li:first-child {
? ? ? ? ? ?color: white;
? ? ? }
? ?</style>
</head>
<body>
<ul>
? ?<li>1</li>
? ?<li>2</li>
? ?<li>3</li>
? ?<li>4</li>
? ?<li>5</li>
? ?<li>6</li>
</ul>
</body>
</html>
选择所有指定元素的最后一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>:last-child</title>
? ?<style>
? ? ? * {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? }
? ? ? ?ul {
? ? ? ? ? ?list-style: none; /*去掉小圆点*/
? ? ? }
? ? ? ?ul li {
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 25px;
? ? ? ? ? ?background-color: orange;
? ? ? ? ? ?margin-top: 2px;
? ? ? ? ? ?padding-left: 5px;
? ? ? }
? ? ? ?ul li:last-child {
? ? ? ? ? ?color: white;
? ? ? }
? ?</style>
</head>
<body>
<ul>
? ?<li>1</li>
? ?<li>2</li>
? ?<li>3</li>
? ?<li>4</li>
? ?<li>5</li>
? ?<li>6</li>
</ul>
</body>
</html>
选择所有 p 元素的父元素的第二个子元素
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>:nth-child</title>
? ?<style>
? ? ? * {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? }
? ? ? ?ul {
? ? ? ? ? ?list-style: none; /*去掉小圆点*/
? ? ? }
? ? ? ?ul li {
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 25px;
? ? ? ? ? ?background-color: orange;
? ? ? ? ? ?margin-top: 2px;
? ? ? ? ? ?padding-left: 5px;
? ? ? }
? ? ? ?/*
? ? ? ul li:first-child + li {
? ? ? ? ? color: white;
? ? ? }*/
? ? ? ?/* 奇数行为白色 */
? ? ? ?ul li:nth-child(odd) {
? ? ? ? ? ?color: white;
? ? ? }
? ? ? ?/* 偶数行为兰色 */
? ? ? ?ul li:nth-child(even) {
? ? ? ? ? ?color: blue;
? ? ? }
? ?</style>
</head>
<body>
<ul>
? ?<li>1</li>
? ?<li>2</li>
? ?<li>3</li>
? ?<li>4</li>
? ?<li>5</li>
? ?<li>6</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>表格隔行变色</title>
? ?<style>
? ? ? ?table {
? ? ? ? ? ?width: 500px;
? ? ? ? ? ?border-left: 1px solid #000000;
? ? ? ? ? ?border-top: 1px solid #000000;
? ? ? ? ? ?border-collapse: collapse;
? ? ? }
? ? ? ?td,th {
? ? ? ? ? ?border-right: 1px solid #000000;
? ? ? ? ? ?border-bottom: 1px solid #000000;
? ? ? ? ? ?text-align: center;
? ? ? }
? ? ? ?tr:nth-child(odd) {
? ? ? ? ? ?background-color: #cccccc;
? ? ? }
? ? ? ?tr:first-child {
? ? ? ? ? ?background-color: grey;
? ? ? }
? ?</style>
</head>
<body>
<table>
? ?<tr>
? ? ? ?<th>编号</th>
? ? ? ?<th>姓名</th>
? ? ? ?<th>年龄</th>
? ? ? ?<th>操作</th>
? ?</tr>
? ?<tr>
? ? ? ?<td>1</td>
? ? ? ?<td>2</td>
? ? ? ?<td>3</td>
? ? ? ?<td>4</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>5</td>
? ? ? ?<td>6</td>
? ? ? ?<td>7</td>
? ? ? ?<td>8</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>9</td>
? ? ? ?<td>10</td>
? ? ? ?<td>11</td>
? ? ? ?<td>12</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>13</td>
? ? ? ?<td>14</td>
? ? ? ?<td>15</td>
? ? ? ?<td>16</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>17</td>
? ? ? ?<td>18</td>
? ? ? ?<td>19</td>
? ? ? ?<td>20</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>21</td>
? ? ? ?<td>22</td>
? ? ? ?<td>23</td>
? ? ? ?<td>24</td>
? ?</tr>
</table>
</body>
</html>
在 CSS3 中出现了伪元素选择器，我们常用的有两个：
::before 它是在元素的内容之前添加前缀内容
::after 它是在元素的内容之后添加后缀内容
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>伪元素选择器</title>
? ?<style>
? ? ? ?div::before {
? ? ? ? ? ?content: '你好！';
? ? ? }
? ? ? ?div::after {
? ? ? ? ? ?content: '。';
? ? ? }
? ?</style>
</head>
<body>
<div class="container">这是内容</div>
</body>
</html>
| 样式名称 | 样式的值 | 说明 |
|---|---|---|
| font-family | 字体名称（如微软雅黑or Microsoft YaHei） | 文本字体 |
| font-style | normal、italic、oblique | 规定斜体文本 |
| font-variant | small-caps、normal | 小型大写字母 |
| font-weight | normal、bold、bolder、数值 | 文本的粗细 |
| font-size | 默认大小是 16 像素 (16px=1em)，单位一般是px，也可以是其他 | 文本的大小 |
| text-indent | 所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值 | 软化文本内容 |
| text-align | left、right 、center、justify | 文本行间的对齐方式 |
| word-spacing | 其默认值 normal 与设置值为 0 是一样的 | 改变单词间隔 |
| letter-spacing | 其默认值 normal 与设置值为 0 是一样的 | 改变字（字母）间隔 |
| text-transform | none、uppercase、lowercase、capitalize | 处理文本的大小写 |
| text-decoration | none、underline、overline、line-through、blink | 文本装饰 |
| white-space | normal、pre-line、nowrap、pre、pre-wrap | 空格换行和tab 处理 |
| color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 文本颜色 |
| direction | 默认ltr、rtl、inherit | 文本的方向 |
| line-height | normal、数值、%等 | 行高 |
| text-shadow | h1 { text-shadow: 5px 5px 5px #FF0000; } | 文本阴影效果 |
| box-shadow | div{ text-shadow: 5px 5px 5px #FF0000; } | 盒子阴影效果 |
| list-style-type | disc、circle、square、decimal、lower-roman、lower-latin | 列表的样式 |
| list-style-image | url函数引入图片 | 列表图标 |
| list-style-position | inside、outside、inherit | 何处放置列表项标记 |
| list-style | list-style:square inside url('imgs/point.png'); | 统一设置列表样式 |
| outline | p { outline:#00FF00 dotted thick; } | 轮廓线 |
| outline-offset | 数值 | 轮廓和元素的距离 |
| outline-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 轮廓颜色 |
| outline-style | dotted、solid、dashed、double等 | 轮廓样式 |
| outline-width | thin（细）、medium（默认）、thick（粗）、数值 | 轮廓的宽度 |
| border-image | div { border-image:url(border.png) 30 30 round;} | 使用图片来创建边框 |
| opacity | 0~1之间的数值，0表示全透明，1表示不透明 | 透明度 |
| width | 数值 | 元素的宽度 |
| height | 数值 | 元素的高度 |
| max-height | 数值 | 最大高度 |
| max-width | 数值 | 最大宽度 |
| min-height | 数值 | 最小高度 |
| min-width | 数值 | 最小高度 |
| margin | {margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;} | 外边距 |
| margin-left | 数值 | 左外边距 |
| margin-right | 数值 | 右外边距 |
| margin-top | 数值 | 上外边距 |
| margin-bottom | 数值 | 下外边距 |
| padding | {padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; } | 内边距 |
| padding-xx | 和margin一致 | 也有四个 |
| border | border: 1px solid red; | 边线 |
| border-width | 数值 | 边线粗细 |
| border-style | dotted、dashed、solid、double | 边线样式 |
| border-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 颜色 |
| border-xx-xx | border-top-width: 15px | 样式、颜色、粗细 |
| border-radius | div { border:2px solid; border-radius:25px; }，数值或者百分比 | 边线的弧度 |
| background | { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } | 背景综合写法 |
| background-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 背景颜色 |
| background-position | top left 这种单词对 或者 坐标位置（x,y）或者 x%, y% | 背景位置 |
| background-size | background-size:80px 60px;| cover | 背景图像的尺寸 |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 背景图像重复 |
| background-image | url函数引入图片 | 背景图片 |
| background-attachment | 默认scroll、fixed | 背景图像是否固定或者随页面的滚动 |
| visibility | visible、hidden | 元素是否可见 |
| display | none、block、inline、inline-block、list-item | 元素类型转换、可见性 |
| position | static、relative、absolute、fixed | 元素定位 |
| z-index | 数值，默认0 | 表示z轴的优先级 |
| vertical-align | baseline、sub、super、top、text-top、middle、text-bottom | 元素的垂直对齐方式 |
| overflow | visible、hidden、scroll、auto | 溢出元素框时处理 |
| clear | left、right、both、none | 清除浮动 |
| float | left、right、none | 元素在哪个方向浮动 |
| resize | none、both、horizontal、vertical | 规定是否调整元素尺寸 |
| box-sizing | content-box、border-box | 容器尺寸计算方式 |
| filter | opacity()、url()、blur()、grayscale()、brightness()等函数 | 设置页面的滤镜 |
CSS的样式编写的基本语法如下：
选择器 {
? 属性: 属性值;
? 属性: 属性值;
? ......
}
注意：每一个属性值后要用分号结束，属性与属性值之间用英文冒号分隔。