4、CSS及伪类选择器
2018-07-18 本文已影响0人
啊啊啊海
-
CSS是什么？
CSS 全称 Cascading Style Sheets，翻译过来就是层叠样式表。如果说HTML是网页 的结构，那么CSS就是网页化妆师。
-
CSS写在哪里？
CSS 有三种写法
1、直接写在标签内（行间样式）
2、写在 style 标签内（内嵌样式）
3、使用外部 .css 文件（外链样式）
css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 (就近原则)
行间样式 > 内嵌css样式 > 外链css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="外链的地址"> <!-- 外链样式 -->
<style type="text/css">
div{
width:300px;
height:200px;
background:skyblue;
}/*内嵌样式*/
</style>
</head>
<body>
<!-- 行间样式,优先级最高(就近原则) -->
<div style="width:150px height:80px background:violet">1234</div>
</body>
</html>
CSS选择器
-
选择器是什么？
CSS 的选择器是 CSS最基础也是最重要的一个知识点 ，很重要 -
选择器权重
谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的。 -
选择器用处
用于准确的选中元素，并赋予样式。
选择方法
-
class选择器
通过标签的 class 属性 ，选择对应的元素 （ . 选择） 借助了一个类的概念，一处定义，可以多处使用 -
id选择器
通过标签的 id 属性，选择 对应的元素（#选择,id选择器唯一） -
群组 选择器
群组选择器是可以同时选择多个标签的选择器（标签1，标签2...{样式}） -
层次选择器
层次选择器分为，子代、后代、相邻和兄弟等四种选择器
基本选择器
<style type="text/css">
/* *通配符选择器 匹配任何元素 */
*{
margin:0;
padding:0;
}
/*元素选择器 选择相同的元素对相同的元素设置一种css样式 选中页面中所有的此元素*/
div{
width:100px;
height:100px;
background:blueviolet;
}
p {
width: 100px;
height: 100px;
background: red;
}
/* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class */
.box{
width: 200px;
height: 100px;
background: silver;
}
/* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # id在这就几个中优先级最高*/
#box1{
width: 200px;
height: 100px;
background: blue;
}
</style>
复杂选择器
<title>复杂选择器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/
div,p{
width: 100px;
height: 100px;
background: blueviolet;
}
/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/
p~div{
width: 100px;
height: 100px;
background: blueviolet;
}
/* > 子代选择器 选择某个元素下面的子元素*/
div>p{
width: 100px;
height: 100px;
background: blueviolet;
border:1px solid red;
}
/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/
div+div{
background: blueviolet;
}
/*后代选择器*/
div>ul li{
background: red;
}
</style>
伪类选择器
<title>伪类选择器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration:none; /*超链接去除下划线*/
}
/*鼠标悬停其上的元素 这个一定要掌握*/
a:hover{
color:white;
}
/*link 未被点击的链接*/
a:link{
background:blue;
}
/*已被点击的链接*/
a:visited{
background:red;
}
/*鼠标已经再其上按下但是还没有释放的元素*/
a:active{
background: violet;
}
div:hover{
width:100px;
height:100px;
background: green;
color:gray;
cursor:default;/*手指*/
/*cursor: help;帮助*/
/*cursor: wait;*等待*!*/
/*cursor: default;!*默认*!*/
}
</style>
复杂选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂选择器的优先级</title>
<style>
* {
margin: 0;
padding: 0;
}
div#box div ul.box1 li{
width: 50px;
height: 50px;
background: red;
}
#box .wrap1{
width: 50px;
height: 50px;
background: blueviolet;
}
</style>
</head>
<body>
<!--
复杂后代选择器
1.先比id(最高位) class（中间位） tagName（个数位）
1 2 3
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数
-->
<div id="box">div1
<div class="box" id="box1">div2
<ul class="box1">
<li class="wrap1">1</li>
<li>2</li>
<li>3</li>
<li class="wrap2"></li>
</ul>
</div>
</div>
</body>
</html>
