css与选择器

:伪类 ::伪元素

1、外链 css文件

<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/fontello.css">
</head>
2、选择器

2.1基本选择器
{ID选择器 #id(id唯一)
类选择器 class .class(name可组合使用,应用于多个元素)
*选择器–通用选择器
元素选择器 p{}直接选择
}

2.2关系选择器 {
1、后代选择器 .classname p{} 选中classname里面的p
2、子元素选择器 .block >p{} 选中class=“block” 里面的直接的子元素p 3、兄弟选择器
p~div 会选中p之后的所有的div兄弟
p+div 只会选中紧跟p后面的一个兄弟元素}
2.3伪类选择器
1、:link设置a元素在未被访问前的CSS样式
:visited设置a元素在其链接地址已被访问过时的CSS样式
:hover设置元素在其鼠标悬停时的CSS样式
:active设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时 的CSS样式。
2、结构伪类选择器
.classname:first-child{} 第一个孩子
.classname:last-child{} 最后一个孩子
.classname:nth-child(even){} even是偶数
.classname:nth-child(2n+1){} 奇数
.classname:nth-child(4){} 第4个孩子
.classname:nth-last-child(5){} 倒着数第五个
这个classname是它自己 不是它的父元素
2.4伪元素选择器

::first-letter 第一个字
::first-line 第一行
::before 内容之前插一个元素
::after 内容之后插一个元素

猜你喜欢

转载自blog.csdn.net/weixin_43719397/article/details/84589679