前端学习笔记(CSS)——选择器
由于老师上课讲道的几种选择器都写在一个.html文件里了，显得和乱，我也只是把它简单的分隔开，仅供个人学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style tyle="text/css">
/* 1、基础选择器 */
/*1) 标签选择器
书写格式：标签名{}
书写方式：根据标签名，选中页面上所有符合的元素 */
div{
width:100px;
height:200px;
background-color: green;
}
/*2）id选择器
书写格式:#id值{}
选择方式：根据标签的id属性的值，来选中某个标签*/
#box2{
width:200px;
height:300px;
background-color: red;
}
/*3) 类别选择器
书写格式：.class值{}
选择方式：根据标签的class属性的值，来选中一类标签*/
.cls {
color: blue;
}
/*4) 属性选择器
书写格式：[某属性=某值\某个值的匹配]{}
选择方式：根据[]里指定的属性和他对应的值的匹配方式来选中
匹配方式：->[title ^= "m"] 匹配所有以m开头的标签
->[title $= "s"] 匹配所有以s开头的标签
->[title ~= "m"] 匹配所有包含m的标签
*/
[name="hello"]{
color: purple;
}
[title="我是标题"]{
color:green;
}
/*5) 通用选择器
书写格式：*{}
选择方式：选择页面上所有的标签元素
*/
* {
border:1px solid black;
}
</style>
</head>
<body>
<div class="cls"></div>
<div id="box2"></div>
<h1 title="我是标题">标题1</h2>
<h2 name="hello">你好</h2>
</body>
</html>
网页显示如下
【注意】：之所以
标题1和你好有border，是因为通用选择器会将所有的标签元素加上边框，如果在div中写入一些字，那么这些字也会显示border【注意】优先级:id>class=属性>标签>*
/*2、伪类选择器
某选择器：某动作{}
选择方式：通过某选择器的一些标签，
这些标签设置样式表在某种动作发生的时候生效，
种类：visited->链接访问后
link->链接使用前
hover->鼠标悬停时
active->鼠标点击时*/
#box2{
width:200px;
height:300px;
background-color: red;
}
#box2:hover{
background-color: yellow;
}
a:visited{
background-color: blue;
}
a:link{
background-color: purple;
}
a:hover{
background-color: red;
}
a:active{
background-color: yellow;
<body>
<div id="box2"></div>
<a href="http://www.1000phone.com">跳转自己</a>
</body>
鼠标未悬停到图片上 鼠标悬停在图片上
/*3、组合选择器
书写规则：选择器1选择器2选择器3...{}其中如果某个选择器时标签选择器要写最前面*/
div.cls{
border: 5px solid ;
}
/*4、派生选择器
1)后代选择器
书写规则：selector1 selector2 selector3...{}
选择方式：首先根据selector1选择一批元素，然后从这批元素的后代元素中selector2选一批元素....
2)子选择器
书写规则：selector1 > selector2 >selector3..{}
选择方式：首先根据selector1选择一批元素，然后从这批元素的子元素中selector2选一批元素....*/
div>p{
background-color: yellow;
}
/*5、伪类派生选择器
书写规则->选择器1:某动作 选择器2{}
选择方式：动作家在选择器1上，样式加载选择器2上*/
#box3:hover p{
background-color: blue;
width:300px;
}
<div class="cls">1</div>
<div id="box3">
<p>我是3号盒子</p>
</div>
网页显示如下：
鼠标未悬停在黄色区域
鼠标悬停在黄色区域