id选择器:使用#
类选择器:使用.
标签选择器:使用标签
通配符选择器:使用*
相邻兄弟选择器:使用+
通用兄弟选择器:使用~
交集选择器:不需要空格,不用任何符号
并集选择器:使用,
子代选择器:使用>
后代选择器:使用空格
伪类选择器:
1.序选择器:使用:first-child/:last-child/:nth-child(n)等等
2.动态伪类选择器:使用E:link/E:visited/E:hover/E:active
3.伪元素选择器:使用::after/::before
4.否定伪类选择器:使用:not(xx)
属性选择器:例子:input[type=password]{}
实践!!!
<!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>
/* id选择器 */
/* 类选择器 */
/* 标签选择器 */
/* 通配符选择器:用*分隔开,给当前界面上所有的标签设置属性 */
/* 通用兄弟选择器:两个标签不相邻,给标签1后面的所有同级标签2设置样式 */
div ~ p{
background-color: bisque;
height: 40px;
}
/* 相邻兄弟选择器:两个标签相邻,要改变后一个标签的属性 */
div + h6{
background-color: #f19f9f;
}
/* 子元素选择器:找到标签1后面直接子元素标签2, 然后设置属性*/
div > p{
font-weight: 800;
}
/* 后代选择器:找到标签1后面的所有标签2的元素,设置属性 */
div div p{
color: aqua;
}
/* 交集选择器:相交的那部分元素设置属性,例:既要是div也要是calss为a的标签 */
div.a{
color: blue;
}
/* 并集选择器:合并元素设置属性 */
.a , .b{
font-weight: 800;
}
/* 伪类选择器:用冒号隔开 */
/*
1.序选择器
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
2.动态伪类选择器
E:link(链接伪类选择器):未被点击,常用于链接锚点上
E:visited(链接伪类选择器 ):已被点击。常用于链接描点上
E:hover (用户行为选择器): 鼠标悬停的样式。IE6及以下浏览器仅支持 a:hover
E:active(用户行为选择器):鼠标点击未释放。常用于链接描点和按钮上
3.伪元素选择器
(::after):通过content可以向后的位置添加一些内容
(::before):通过content可以向前的位置添加一些内容
.b::after{
content: "nice";
}
4.否定伪类选择器:剔除掉某些元素
div:not(.aa){
border: 1px solid blueviolet;
}
*/
/*
属性选择器:根据某个元素的属性查找设置样式
(1)input[type=password]{}//用于区分input标签
(2)以某某开头 input[type^=password]{}
(3)以某某结尾 input[type$=password]{}
(4)属性的取值是否包含某个特定的值
[attribute*=value] CSS3
*/
</style>
</head>
<body>
<div class="aa">我是第一个div盒子
<div>11</div>
</div>
<div>
<p>我是第一个p盒子</p>
<div>
<p>我是第一个孙子p标签</p>
</div>
<div class="a">
我是div标签
<p>我是第二个孙子p标签</p>
</div>
</div>
<h6>h标签</h6>
<p class="b">第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>
</body>
</html>
效果图:
他们说,这个世界上、海最深邃,干净又透明,我想,那是他们没见过你敲代码的眼睛!