CSS:
- 定义：css全称是层叠样式表；
- 作用：为页面内容设置好看的样式，渲染页面内容；
- 注释：css注释格式：
/* 注释的内容 */；被注释的语句不会生效；
CSS基本语法
两种语法：
- 选择器 {
属性： 值；
}
例：//h1是选择器，color是属性，red是值；
h1{
color: red;
}
- @关键字 {
其他
}
CSS选择器
作用：定位给与样式的HTML元素
选择器分类
-
5种选择器：基础选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器。
-
基础选择器
1. 元素选择器（标签选择器）:作用范围比较广，一般是清楚的知道标记的所有的标签都会产生效果的时候使用。
p {
color: red;
}
div {
color:blue
}
2. lD选择器:用#标记
<p id="box">hello</p>
<style>
#box {
border: 1px solid red;
}
</style>
3. 类选择器:用.标记
<p class="box active">hello</p>
<style>
.active {
font-size:20px;
}
</style>
4. 通用选择器：用*标记所有的元素，.box *是表示box里面的所有元素
* {
box-sizing: border-box;
}
.box * {
font-size: 24px;
}
5. 属性选择器(不常用)
5.1 [attr]选择包含attr属性的所有元素，不论attr的值为何。
[disabled] {
border: 1px solid #ccc;
}
5.2 [attr=val]仅选择attr属性被赋值为val的所有元素。
[data-color="gray"] {
color: #666;
}
-
组合选择器
- A, B：多元素选择器，可以同时选中A和B(,表示并列关系，A和B中间有没有空格都没有关系）
<p class="author">hello</p>
<p class="detail">hahaha</p>
<style>
.author, .detail {
color: red;
}
</style>
- A B:后代选择器，可以选中A的后代B元素（A和B中间一定要保留空格）
<body>
<ul class="detail">
<li>
<ul>
<li>lalala</li>
</ul>
</li>
<li>lalala</li>
</ul>
<style>
//选中所有的li标签
.detail li {
border: 1px solid red;
padding: 10px
}
</style>
</body>
实现效果：
选中ul标签里面的li标签
- A>B：子元素选择器，可以选中A的直接子元素B（A和B之间有没有空格都可以）
<body>
<ul class="detail">
<li>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</li>
<li>ccc</li>
</ul>
<style>
.detail > li {
border:1px solid red;
padding:10px;
}
</style>
</body>
实现效果：
选中ul标签直接li标签
- A + B：直接相邻选择器，可以选中A的下一个相邻元素B
<body>
<ul>
<li class="active">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<style>
.active + li {
color: red;
}
</style>
实现效果：
A的相邻元素
- A ~ B：普通相邻选择器，选中A的后面同级B（无论相邻与否）
<body>
<ul>
<li class="active">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<style>
.active ~ li {
color: red;
}
</style>
</body>
实现效果：
A的后面全部元素
-
伪类选择器
1. :pseudo-class-name
①. 伪类是一个选择器，用来选择处于特定状态下的元素；
②. 比如某种类型元素的第一个，元素的鼠标放置上的状态
③. 类似给元素额外加了一个class
2. 伪类/first-child
作为自己父亲的第n个孩子
first-child第一个孩子、last-child最后一个孩子、nth-child(n)第n个 孩子
<body>
<div class="box">
<h2>标题</h2> <!--红色-->
<p>aaa</p> <!--粉色-->
<p>bbb</p> <!--蓝色-->
</div>
<style>
.box :first-child {
color: red;
}
.box :last-child {
color: blue;
}
.box :nth-child(2) {
color: pink;
}
</style>
</body>
实现效果：
first-child
3. 伪类/first-of-type
作为自己父亲当前标签类型的第x个孩子
- first-of-type
- last-of-type
- nth-of-type(n)
first-of-type
-
伪类选择器的状态
-
a标签的四种状态：①：
a:link（未被访问状态） ②：a:visited（访问后的状态） ③：a:hover（鼠标悬停状态） ④：a:active（正在点击状态） -
顺序排列：
link-visited-hover-active -
顺序排列原因：
-
主要是就近原则，因为css加载顺序是从上到下，所以写在后面优先级相同的选择器样式就会覆盖前面 的样式
-
在鼠标没有点击的时候 ，a链接是处于link状态，采用link样式，点击后是visited和link状态，此时采用visited状态，所以visited要写在link后面，覆盖link。
-
鼠标悬停在a链接时是hover，link，visited状态，如果hover的样式写在link和visited前面，就会被覆盖，所以要写在link和visited后面。
-
点击时，a链接处于hover、active、link、active状态，active写在前面就会被其他三种覆盖，所以是写在最后。
//顺序
<body>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<style>
a:link {
color: red;
}
a:visited {
color: grey;
}
a:hover {
color: blue;
}
a:active {
color: yellow;
}
</style>
</body>
-
更多伪类选择器
1.被勾选的表单元素:checked
默认样式比重比较大，设置的样式没有生效
去掉默认样式，设置的样式即可生效
2. 选中被禁用的表单元素:disabled
选中被禁用的表单元素
3. 选中被激活的表单元素:focus
选中被激活的表单元素
//选中页面上id为当前hash的元素
:target
//选中不为XX的元素
:not(xx)
-
伪元素选择器
-
::pseudo-element-name- 其表现像给元素里加了个标签，而不类似于给元素加class
- 早期的伪元素也使用两个点：，现代浏览器支持早期用法
-
::before::after- 在元素内插入一段内容，作为元素的第一个/最后一个孩子
- 必须有content属性，如果没有相当于白写。
- 作用：创作隐藏的标签，常用来替代图标，无实际意义的标签，HTML就会很简洁。
::before和::after
-
::first-link:选中段落的第一行
选中段落的第一行
-
::first-letter:选中段落的第一个字符
选中段落的第一个字符
-
::selection:匹配被鼠标选中的文字内容
匹配被鼠标选中的文字内容
参考资料：饥人谷课件
网友评论