一、常用的选择器
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);
}
