CSS选择器 伪类 a相关的伪类 伪元素
Cascading Style Sheets 级联(层叠)样式表
css可以用来设计网页中元素的样式即化妆
内联样式
不利于维护
<p style="color:red;font-size:30px;">少小离家老大回,乡音无改鬓毛催p>
如果希望影响到多个元素 写入和修改时需要多次复制 故不利于维护
开发时绝对不要使用内联样式
将样式写到head中的style标签里
内部样式表
拥有层叠性 继承性 优先级
更便于重复使用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
p{
color: aqua;
font-size:30px;
}
style>
head>
外部样式表
最佳实践
可以将CSS样式编写到一个外部的CSS文件中
<link rel="stylesheet" href="style.css">
好处:
所有网页均可引用,使样式可以在不同页面间复用
将样式编写到CSS文件中 可以使用浏览器的缓存机制 可以加快网页加载速度 提高用户体验
CSS
- 选择器
- 声明块
-
- 声明
-
- 键
- 值
标签(元素)选择器
p{
color: red;
}
ID选择器
ID最好不能重复
#id{
color: red;
}
属性选择器
class可以重复使用
.classname{
color: blue;
}
多个class中间使用空格隔开
<h1 class="classname abc">我是标题h1>
通配选择器
选中页面中的所有元素
*{
color: chartreuse;
}
复合选择器
交集选择器
选择同时符合多个条件的选择器
语法
选择器1选择器2选择器3选择器n{}
当存在标签(元素)选择器时
以标签(元素)选择器开头
选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
h1,span{
color: green;
}
关系选择器
父元素 直接包含 子元素
祖先元素 直接或间接包含 后代元素
即一个元素的父元素也是他的祖先元素
兄弟元素
拥有相同父元素
子元素选择器 >
选定父元素的指定子元素
语法:
父元素>子元素
选中父元素中的子元素
**后代元素选择器 **
选中指定元素后代的选择器
语法:
祖先 后代
div > p > span{
color: orange;
}
兄弟元素选择器 + ~
+又叫下一个
选择紧挨着的下一个兄弟
前一个 + 下一个
div > p + span{
color: orange;
}
**~**又叫下边所有
属性选择器
[title]{
color: orange;
}
p[title]{
color: orange;
}
p[title=“abc”]{
color: orange;
}
p[title^=“abc”]{
color: red;
}
^="abc"表示属性值以abc开头
$="abc"表示属性值以abc结尾
*="abc"表示属性值包含abc
伪类选择器
伪类
不存在的特殊的类
用来描述元素的特殊状态
first-child 第一个子元素
nth-child 第n个子元素
特殊值
n n的范围0到正无穷
2n(0 2 4 6 8) 或者 even所有偶数位置元素
2n+1(1 3 5 7 9) 或者 odd所有奇数位置元素
last-child 最后一个子元素
ul>li:first-child{
color: red;
}
即根据所有的子元素进行排序
但是只影响相应的种类
特定类型子元素
first-of-type
last-of-type
nth-of-type
:not()
否定伪类
将符合条件的元素从选择器中挑出不要
超链接的伪类
<html>
<head>
<style>
/* 没访问过的标签 */
a:link
{
color: red;
font-size: 50px;
}
/* 访问过的链接 */
/* 由于隐私的原因 visited这个伪类只能修改链接颜色 */
a:visited{
color: orange;
}
/* hover表示鼠标移入状态 */
a:hover{
color: aqua;
font-size: 10px;
}
/* active表示鼠标点击的状态 */
a:active{
color: black;
}
style>
head>
html>
伪元素
::开头
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: "abcdsays:";
color: aqua;
}
div::after{
content: "lllllllllll";
color: red;
}
style>
head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate totam dicta similique quam laborum. Vel dicta tempora, distinctio ex quia delectus quisquam consequatur, amet natus commodi ab similique iusto ea!p>
<div>hhhhhhhhhhhdiv>
body>
html>