我们将css分为六大类方便记住
1.我们常用的选择器
2.群组选择器
3.关系选择器
4.伪类选择器
5.伪元素选择器(演示)
6.属性选择器
7.css选择器权重
一、我们常用的选择器
1.标签名选择器-----> 语法:标签名{}
例:p{}、div{}、span{}
2.ID选择器-----> 语法:标签名{}
例:#app{} < div id="app"> < /div>
3.类选择器-----> 语法:标签名{}
例:.app{} < div class="app">< /div>
4.通配符选择器-----> 语法:*{}
二、群组选择器
群组选择器很简单,就是使用标签名后面再跟一个标签名,中间使用逗号隔开。
语法:选择器1,选择器2,选择器3,选择器4,{}
列:div,h1,ul,.lip{}
三、关系选择器
关系选择器就比如:父亲与儿子,他们之间存在一个父子关系。
1.后代选择器
2.子代选择器使用大于号来写
例:.app>div{}
3.相邻兄弟选择器是用加号来写,注意:相邻兄弟,会选择到他后面紧挨着的对一个元素。
例:.app+box{}。
4.通用选择器 会选择到后面所有的兄弟标签
例:.app~div{}
5.组合使用
例:#app~div+ul>li a{}
四、伪类选择器
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child 选中n个子元素 关于:nth-child()的特殊值(括号里的内容可以填写一下几种n 第n个 n的范围0到无穷)even或2n 选中偶数位的元素 odd或2n+1 选中奇数位的元素
注:以child结尾的是在元素中选择
:first-of-type 选中相同类型的第一个元素
:last-of-type 选中相同类型的最后一个元素
:nth-of-type 选中相同类型的第n个元素
:not() 否定伪类 --->将符号条件的元素去除
元素的伪类
:link 表示未访问的a标签
:visited 表示访问过的a标签,由于隐私的问题,所以visited这个伪类只能修改链接的颜色
以上两个伪类是超链接独有的
以下两个伪类是所有标签都可以使用的
:hover 经典的拂过显示/隐藏,鼠标移入后元素的状态
:active 鼠标点击后元素的状态
五,伪元素选择器
伪元素是不存在的元素,表示元素的特殊状态
常见的几个伪元素
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
演示:伪类——伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类-伪元素演示</title>
<style>
/* 选中第一个子元素 */
/* ul li:first-child{
background-color: #f00;
} */
/* 选中最后一个子元素 */
/* ul li:last-child{
background-color: #f00;
} */
/* 选中n个子元素 */
/* ul li:nth-child(odd){
background-color: #f00;
} */
/* ul li:nth-child(even){
background-color: #f00;
} */
/*选中相同类型的第一个元素 中间要有空格,否则不生效 */
ul :first-of-type{
background-color: #f00;
}
/* 选中相同类型的最后一个元素 */
/* ul :last-of-type{
background-color: #f00;
} */
/* 选中相同类型的第n个元素 */
/* ul :nth-of-type(2n){
background-color: #f00;
} */
/*表示第一个字母 a标签无效 */
/* ul ::first-letter{
background-color: #f00;
} */
/* 表示第一行 */
/* ul ::first-line{
background-color: #f00;
} */
/* 表示选中的元素 */
/* ul ::selection{
background-color: #f00;
} */
</style>
</head>
<body>
<div id="app">
<ul>
<li>我是<br>开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<li>我是开朗大男孩</li>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<div>哈喽我是div</div>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
<a href="">我是a标签</a><br>
</ul>
</div>
</body>
</html>
六、属性选择器
1.某某[属性]{}
例:div[class]{ background: #f00; }
2.某某[属性=属性值]{}
选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行。
例:div[class="wode"]{background: #f00;}
3.某某[属性^=属性值]{}
属性值开头是{属性值}的变。
4.某某[属性$=属性值]{}
属性值结尾是{属性值}的变。
5.某某[属性*=属性值]{}
选择到div标签且有class属性且只要有字母b就可以。
例:div[class*="b"]{ background-color: #f00;}
6.某某[属性~=属性值]{}
选择到的是div标签且有class属性,且属性值有完整的itme词的变。
例:div[class~="item"]{background-color: #f00;}
7.某某[属性|=属性值]{}
选择到有div标签,且有属性class,且属性值只有1个是w的或者属性值有多个但是得是w-开头的变。
例:div[class|="w"] {background-color: #f00;}
七、css选择器权重
如果有书写错误请帮忙指出哈 非常感谢!,共同学习、共同进步。