理解CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第一天
一在页面中使用CSS
- 外链
<link real="stylesheet" href="./component/main.css"></link> - 嵌入
<style>p{color:red;font-weight:400;} body{margin:0;padding:0;}</style> - 内联
<li style="color:green">hello world</li>
二CSS选择器
通配符选择器
常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
*{margin:0px;padding:0px}
标签选择器
标签选择器是指用HTML标记名称作为选择器，例如a body li 等
例如p{color:green;font-size:large}使用p选择器定义HTML页面中所有段落的样式
类选择器
.类名{属性：属性值...}，类名为HTML元素的class属性值，可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名。注意类名的第一个字符不能使用数字，并且严格区分大小写。例如.product_banner{height:64%;width:100%}
id选择器
类似类选择器，但.换成# 且id选择器权重比类选择器高。
例如#name{text-align:center;color:black;}
属性选择器
[标签名称] { 属性1：属性值1；属性2：属性值2；}
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 在为不带有 class 或 id 的表单设置样式时特别有用。
并集选择器
标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；} 例如li,p,.name{color:orange;}
后代选择器
标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}，后代选择器会影响到它的各级后代，没有层级限制。例如div p{color:black;},会选择div下所有的p标签。
子代选择器
标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}，表示匹配第二个选择器，且为第一个选择器的元素的后代。例如ul>li{background-color:black} >可以无限衍生，但只选择“儿子”。
兄弟选择器
标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；} +也可改成~ 表示在同一父级下，相邻的兄弟元素，即紧跟着标签1的标签2h1+p{text-decoration:none;font-weight:400px;}
伪选择器分为伪类选择器，伪对象选择器
这是伪类选择器
这是伪对象选择器
三选择器特异度
权重排行：
- 行内样式 ！important
- id选择器 100
- 类选择器、属性选择器、伪类选择器 10
- 标签、伪元素选择器 1
例如 #nav .list li a:link 特异度为122 其中id选择器一个 类及伪类2个 元素2个
