目录
- 1. CSS定义
- 2. 创建CSS的三种方法
- 2.1. 元素内嵌（权重最高）
- 2.2. 文档内嵌
- 2.3. 外部引用
- 3. CSS层叠和继承
- 3.1. 浏览器样式
- 3.2. 样式表层叠
- 3.3. 样式继承
- 4. CSS选择器
- 4.1. 选择器的总汇
- (1) 基本选择器
- (2) 复合选择器
- (3) 伪元素选择器
:: - (4) 伪类选择器
- 4.1. 选择器的总汇
1. CSS定义
层叠样式表
2. 创建CSS的三种方法
2.1. 元素内嵌（权重最高）
<p style="color:red;font-size:50px;">2.2. 文档内嵌
通过选择器的方法调用指定的元素并设置相关的CSS
<style type="text/css"> ???p{ ???????color:red; ???????font-size: 30px; ???}</style>2.3. 外部引用
- 定义一个style01.css文件
@charset "utf-8";p{ ???color:red; ???font-size: 30px;}- 在主文件中应用style
<!--在header中--><link rel="stylesheet" type="text/css", href="style01.css">大量HTML使用同一组CSS，就可以将这些样式保存到一个单独的.CSS文件中，通过link引用就可以了
3. CSS层叠和继承
- 样式表层叠： 同一元素通过不同方式设置样式表所产生的样式重叠
- 样式表继承： 某一个被嵌套的元素得到它父类元素样式
- 浏览器样式： 这个元素在浏览器运行时附加的样式
3.1. 浏览器样式
<b>b元素有加粗元素</b><span style="font-weight:bold;">span元素没有加粗样式，但是可以设置</span> ?<b style="font-weight:normal;">b元素手动取出加粗元素</b>3.2. 样式表层叠
<link rel="stylesheet" type="text/css", href="style01.css"><style type="text/css"> ???p{ ???????color:red; ???????font-size: 30px; ???}</style><!--同时叠加（不是覆盖）三个元素--><p style = "font-size:50px; color:orange;">我要叠加三个样式</p>优先级： 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器
可以在不同样式中添加!important关键字来强行设置优先级color: green !important
3.3. 样式继承
<style type="text/css"> ???p{ ???????color:red; ???????font-size: 30px; ???}</style><p>这是<b>HTML5</b></p> ?此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部
- 如果一个元素没有设置父元素相关的样式，那么就会使用继承机制将父类样式继承下来
- 样式继承只适用于元素的外观(文字，颜色，字体等)，布局样式无法继承
4. CSS选择器
定位到你想要设计的样式元素来设计元素
4.1. 选择器的总汇
(1) 基本选择器
使用频率最高的一些选择器
1.通用选择器*
*表示通用选择器，匹配所有HTML元素包括<HTML>和<body>标签可以为所有元素匹配并配置样式，但是无法筛选不必要元素
定义一个CSS
@charset "utf-8"* { ?border: 1px solid red;}/*通用选择器可以匹配到html和body元素*/<link rel="stylesheet" type="text/css", href="style01.css"><p>这是一个段落</p><p>这是一个加粗</p><span>这是一个什么都没有</span>2.元素选择器p
@charset "utf-8"p { ?border: 1px solid red;}/*通用选择器可以匹配到html和body元素*/3.ID选择器#adc
ID是唯一的，不可重复使用
@charset "utf-8"#abc { ?border: 1px solid red;}<link rel="stylesheet" type="text/css", href="style01.css"><p id="abc">这是一个段落</p><p>这是一个加粗</p><span>这是一个什么都没有</span>4. 类选择器.
@charset "utf-8".abc { ?border: 1px solid red;}<link rel="stylesheet" type="text/css", href="style01.css"><p class="abc">这是一个段落</p><p class="abc">这是一个加粗</p><span>这是一个什么都没有</span>也可以限定元素
@charset "utf-8"p.abc { ?border: 1px solid red;}/*只能适用于段落*/也可以使用多个class
@charset "utf-8".abc { ?border: 1px solid red;}.def { ?font-size: 30px;}<p class="abc def">这是一个加粗</p>5. 属性选择器[...]
@charset "utf-8"[href]{ ?color: red;}<a href="http://www.baidu.com">这是一个百度</a>也可以设置相关的属性值
@charset "utf-8"[type="password"]{ ?border: 1px solid red;}<input type="password">通过正则表达式来设置匹配
@charset "utf-8"[href^="http"]{ ?color: orange;}/*只能开头是http才能匹配*/<a href="http://www.baidu.com">百度</a> ?<a href = "javascript:void(0)">好搜</a>通过精确匹配
@charset "utf-8"[href*="baidu"]{ ?color: orange;}/*只能包含baidu才能匹配*/(2) 复合选择器
将不同选择器进行组合形成的新的特定匹配
1.分组选择器
多个选择器逗号分隔，同时设置一组样式
@charset "utf-8"p,b,i,span { ?color: orange;}#abc,.abc,i,span { ?color: orange;}2.后代选择器
选择<p>元素内部所有的<b>元素，不在乎<b>的层次深度
@charset "utf-8"p b { ?color: orange;}<p>这是一个HTML5<b>教程</b></p>效果为： 这是一个HTML5教程
3. 子选择器
与后代选择器类似，但是只能运用于儿子，孙子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
4.相邻兄弟选择器
匹配第一个元素相邻的第二个元素
@charset "utf-8"p+b { ?color: orange;}5.普通兄弟
类似，只是靠的不是特别近
@charset "utf-8"p~b { ?color: orange;}(3) 伪元素选择器::
1. 块级首行::first-line
- 只适用于
<p>、<div>等的首行文本选定
:: first-line { ?color: orange;}2. 块级首字母::first-letter
p:: first-letter { ?color: orange;}3. 文本前插入::before
- 在文本前插入内容
a:: before { ?content: ‘点击-‘;}3. 文本后插入::after
(4) 伪类选择器
1. 结构性伪类:
- 可以根据元素在文档中的位置选择元素
1.1. 根元素选择器
:root { ?border: 1px solid red;}1.2. 子类选择器
ul>li:first-child { ?color: red;}/*父类的第一个儿子*/ul>li:last-child { ?color: red;}/*父类的最后一个儿子*/ul>li:only-child { ?color: red;}/*选择只有一个子元素的那个元素*/dive>p: only-of-type { ?color: red;}/*选择只有一个指定类型的子元素的那个元素*/1.3.nth-child(n)系列
ul>li:nth-child(2) { ?color: red;}/*选择第2个*/ul>li:nth-last-child(2) { ?color: red;}/*选择倒数第2个*/ul>li:nth-of-type(2) { ?color: red;}/*特定类型第2个*/ul>li:nth-last-of-type(2) { ?color: red;}/*特定类型倒数第2个*/2.UI伪类
用于匹配表单的数据
enabled
input:enabled { ?border: 1px solid red;}/*选择表单中的enable元素*/<form> ?<input tupe="text" disabled> ?<input tupe="text"></form>checked
input:checked { ?display: none;}default
input:default { ?display: none;}valid和not valida
input:valid { ?border: 1px solid green;}input:invalid { ?border: 1px solid red;}required
input:required { ?border: 1px solid red;}3. 动态伪类
根据条件改变匹配元素
link-超链接
/*Url没有访问的颜色*/a:link { ?color: red;}/*Url被点击的颜色*/a:visited { ?color: blue;}/*鼠标悬停的颜色*/a:hover { ?color: orange;}/*鼠标长按的颜色*/a:active { ?color: green;}<a href="baidu.com">百度</a>focus-文本框获取的
/*鼠标获取到文本框的颜色*/input:focus { ?border: 1px solid green;}其他伪类选择器
not否定选择器
/*选择百度除外的URL*/a:not([href*="baidu"]) { ???color: green;}empty
/*空元素隐藏*/:empty { ???display: none;}target-定位到锚点
/*空元素隐藏*/b:target { ???color: red;}HTML和CSS前端教程03-CSS选择器
原文地址：https://www.cnblogs.com/haochen273/p/10305818.html