- 书写语法
选择器{
属性名:属性值;
}
tagname{}
.classname{}
#idname{}
css注释：
/*
所要注释的内容
*/
- css选择器
基本选择器
1、通用元素选择器
*表示应用到所有的标签。
*{padding:0px;margin:0px;}
2、元素/标签选择器
匹配所有p标签的元素
p{color:red;}
3、类选择器
匹配所有class属性中包含red的元素。
语法：.类名{属性名:属性值;}
注意：类名不能以数字开头，类名要区分大小写
.red{color:red;}
<p class=”red”>我是p元素</p>
4、id选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的。
语法：#id名{属性名:属性值;}（id名不能以数字开头）
#green{color:green;}
<p id=”green”>我是p标签</p>
注意：
选择器优先级：ID选择器>class类选择器>标签选择器
相同属性优先级高的会覆盖掉优先级低的。
组合选择器
1、多元选择器
同时匹配h1,p，之间用逗号分开。
h1,p{color:red;}
<h1>我是h1</h1>
<p>我是p元素</p>
2、后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
div p {color: red;}
<div>
<p>第一个p</p>
<div>
<p>第二个p</p>
</div>
<p>第三个p</p>
</div>
3、子选择器
匹配所有div标签里嵌套的子p标签，之间用>分隔。
div > p {color: yellow;}
<div>
<p>第一个p</p>
<div>
<p>第二个p</p>
</div>
<h2><p>第三个p</p></h2>
</div>
4、相邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）
div + p {color: yellow;}
<div>我是div</div>
<p>我是第一个p</p>
<p>我是第二个p</p>
属性选择器
包含标题（title）的所有元素变为红色
*[title] {color:red;}
根据部分属性值选择：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号~
选择 class 属性中包含 important 的元素
p[class~="important"] {color: red;}
子串匹配属性选择器
[class^="de"] 选择 class属性值以 "de" 开头的所有元素
[class$="de"] 选择 class 属性值以 "de" 结尾的所有元素
[class*="de"] 选择 abc 属性值中包含子串 "de" 的所有元素
特定属性选择类型
选择 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;}
<p lang="en">Hello!</p>
伪类选择器
1. link、hover、active、visited
a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>
2. :before、:after
p:before 在每个<p>元素的内容之前插入内容;
p:after 在每个<p>元素的内容之后插入内容。
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> 我是p标签</p>
优先级：id>类>元素
注意：
组合选择器的优先级：根据组合选择器的权重进行计算，权重大的优先级就高。
组合选择器权重计算方式：各选择器权重相加之和，各选择器权重值如下：
