目录
层叠样式表
<p style="color:red;font-size:50px;">通过选择器的方法调用指定的元素并设置相关的CSS
<style type="text/css"> p{ color:red; font-size: 30px; }</style>@charset "utf-8";p{ color:red; font-size: 30px;}<!--在header中--><link rel="stylesheet" type="text/css", href="style01.css">大量HTML使用同一组CSS，就可以将这些样式保存到一个单独的.CSS文件中，通过link引用就可以了
<b>b元素有加粗元素</b><span style="font-weight:bold;">span元素没有加粗样式，但是可以设置</span> <b style="font-weight:normal;">b元素手动取出加粗元素</b><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
<style type="text/css"> p{ color:red; font-size: 30px; }</style><p>这是<b>HTML5</b></p> 此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部
定位到你想要设计的样式元素来设计元素
使用频率最高的一些选择器
**表示通用选择器，匹配所有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>p@charset "utf-8"p { border: 1px solid red;}/*通用选择器可以匹配到html和body元素*/#adcID是唯一的，不可重复使用
@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>.@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>[...]@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才能匹配*/将不同选择器进行组合形成的新的特定匹配
多个选择器逗号分隔，同时设置一组样式
@charset "utf-8"p,b,i,span { color: orange;}#abc,.abc,i,span { color: orange;}选择<p>元素内部所有的<b>元素，不在乎<b>的层次深度
@charset "utf-8"p b { color: orange;}<p>这是一个HTML5<b>教程</b></p>效果为： 这是一个HTML5教程
与后代选择器类似，但是只能运用于儿子，孙子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
匹配第一个元素相邻的第二个元素
@charset "utf-8"p+b { color: orange;}类似，只是靠的不是特别近
@charset "utf-8"p~b { color: orange;}::::first-line<p>、<div>等的首行文本选定:: first-line { color: orange;}::first-letterp:: first-letter { color: orange;}::beforea:: before { content: ‘点击-‘;}::after::root { border: 1px solid red;}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;}/*选择只有一个指定类型的子元素的那个元素*/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个*/用于匹配表单的数据
input:enabled { border: 1px solid red;}/*选择表单中的enable元素*/<form> <input tupe="text" disabled> <input tupe="text"></form>input:checked { display: none;}input:default { display: none;}input:valid { border: 1px solid green;}input:invalid { border: 1px solid red;}input:required { border: 1px solid red;}根据条件改变匹配元素
/*Url没有访问的颜色*/a:link { color: red;}/*Url被点击的颜色*/a:visited { color: blue;}/*鼠标悬停的颜色*/a:hover { color: orange;}/*鼠标长按的颜色*/a:active { color: green;}<a href="baidu.com">百度</a>/*鼠标获取到文本框的颜色*/input:focus { border: 1px solid green;}/*选择百度除外的URL*/a:not([href*="baidu"]) { color: green;}/*空元素隐藏*/:empty { display: none;}/*空元素隐藏*/b:target { color: red;}
