一、常用的选择器
1.元素选择器 语法 : 标签名{}
作用 : 选中对应标签中的内容
例:p{} , div{} , span{} , ol{} , ul{} ......
2.类选择器(class选择器) 语法 : .class属性值{}
作用 : 选中对应class属性值的元素
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
3.id选择器 语法 : #id属性值{}
作用 : 选中对应id属性值的元素
注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.通配符选择器 语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
二、群组选择器
语法 : 选择器1,选择器2,选择器3...{}
作用 : 同时选中对应选择器的元素
三、关系选择器
1.后代选择器
后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素
2.子代选择器
父元素直接包含子元素,子元素直接被父元素包含
3.相邻兄弟选择器
<p>000</p><div class="box">盒子1</div><p>111</p><p>222</p><p>333</p><div><p>44444</p></div><p>5555</p>以上面的代码为例,除了内容为'44444'的的p标签外,其余的所有元素均为兄弟元素,而相邻兄弟元素就是紧挨着的两个标签
给上述代码加上内部修饰样式:
<style>/* 相邻兄弟,会选择到box后面紧挨着的p,那么就是内容为111的p标签 */.box+p{width: 200px;height: 200px;background-color: yellow;}</style>4.通用兄弟选择器
以上面的代码为例,添加一段内部修饰样式:
<style>/*通用兄弟选择器,会选择到.box后面所有的兄弟p,那么就是除了内容为'44444'以外的所有p*/.box~p{width: 200px;height: 200px;background-color: yellow;}</style>四、属性选择器
属性选择器一共有7种写法
1.某某[属性]
2.某某[属性=属性值]
3.某某[属性^=属性值]
4.某某[属性$=属性值]
5.某某[属性*=属性值]
6.某某[属性~=属性值]
7.某某[属性|=属性值]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* */input[type="password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*="e"] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^="p"] {background-color: brown;}/* 属性值以什么结尾 */input[type$="t"] {background-color: red;}/* +表示的是下一个标签 */.box1+p {background-color: blue;}</style>
</head><body><div title="njdcndc">你是一个盒子</div><div>你是一个da盒子</div><input type="text"><input type="password"><input type="email"><div class="box1">ncjdncjd</div><p>mckdckd</p><p>mckdckd</p></body></html>五、伪类选择器
1.常用的伪类选择器 :
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个元素
2.否定伪类
:not() 将符号条件的元素去除
3.元素的伪类
:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的 由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态
六、伪元素选择器
同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态
常见的几个伪元素：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
七、练习
界面如下：
html代码
<!DOCTYPE html>
<html lang="en">
<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>五彩导航</title><link rel="stylesheet" href="index.css">
</head><body><div class="ann"><a href="#" class="ann1">五彩导航</a><a href="#" class="ann2">五彩导航</a><a href="#" class="ann3">五彩导航</a><a href="#" class="ann4">五彩导航</a></div></body></html>css代码
.ann a {display:inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 3em;color: #fff;
}
.ann .ann1:hover {background-color: rgb(243, 104, 5);
}
.ann .ann2:hover {background-color: rgb(30, 20, 183);
}
.ann .ann3:hover {background-color:aqua;
}
.ann .ann4:hover {background-color: rgb(224, 9, 9);
}
