-
CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素.
-
用来选中 元素的 代码称为 选择器, 或 选择符.
-
html元素是指, 标签与标签包裹内容的整体.
常用的选择器有如下几种:
1、标签选择器
标签选择器,此种选择器影响范围大. 举例: ```html *{margin:0;padding:0} div{color:red}
....
....
``` ####2、id选择器 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 >通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。 举例: ```html #box{color:red}
....
``` ####3、类选择器 class 选择器用于描述一组元素的样式,class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示 >通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。 举例: ```html .red{color:red} .big{font-size:20px} .mt10{margin-top:10px}
....
....
....
``` ####4、后代选择器 >后代选取器匹配所有当前元素的后代元素。 举例: ```html .box span{color:red} .box .red{color:pink} .red{color:red}
.... ....
....
####5、组选择器
>多个选择器,如果有同样的样式设置,可以使用组选择器。也称为 并列选择
举例:
```html
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。 伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类and伪类元素</title>
<style>
/*伪类*/
div{width: 100px;height: 100px; }
/*.box1{background-color: red;}*/
/*当鼠标悬浮在元素上方时,向元素添加样式*/
.box1:hover{
background-color: green;
}
/*将样式添加到被激活的元素*/
.box1:active{
background-color: pink;
}
/* :focus 选择器用于选取获得焦点的元素。
提示:接收键盘事件或其他用户输入的元素都允许 :focus 选择器。*/
.box2:focus{
background-color: red;
}
/*first-child 将特殊的样式添加到元素的第一个子元素当中
last-child 将特殊的样式添加到元素的最后个子元素当中
nth-child() 将特殊的样式添加到元素的某个子元素当中
*/
/*ul li:first-child{
background-color: #0cc;
}
*/
/*伪类元素*/
/*在每个<span>元素之前插入内容*/
span:before{content: "hello";}
/*在每个<a>元素之后插入内容*/
a:after{content: "beybeybey";}
</style>
</head>
<body>
<div class="box1">
</div>
<form action="">
<input type="text" name="" id="" class=box2>
</form>
<ul>
<li>python</li>
<li>java</li>
<li>C</li>
<li>C++</li>
<li>php</li>
</ul>
<a href="https://www.baidu.com">百度</a>
<span>大帅哥</span>
</body>
</html>
7.其他选择器(了解)
.item>p{} 子元素选择器:与后代选择器相比,子元素选择器只能选择某元素的子元素。
子元素选择器和后代选择器的比较:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素</title>
<style>
.zi1 >li{
background-color: red;
}
/*后代*/
.box2 li{
background-color: green;
}
</style>
</head>
<body>
<!-- 子元素的例子 -->
<div style="border:1;border-style:solid;" >
<p>
<ul class="zi1">
<li>nihao</li>
<li>nihao</li>
</ul>
<ul class="zi1">
<span>
<li>nihao</li>
<li>nihao</li>
</span>
</ul>
</p>
</div>
<!-- 后代的例子 -->
<div style="border:1;border-style:solid;" >
<p>
<ul class="box2">
<li>nihao</li>
<li>nihao</li>
</ul>
<ul class="box2">
<span>
<li>nihao</li>
<li>nihao</li>
</span>
</ul>
</p>
</div>
</body>
</html>
input[name=username]{} 属性选择器 :通过特定的属性来查找元素
li:last-child{} 选择最后一个li元素
li:first-child{} 选择第一个li元素
li:nth-child(2){} 选择指定的第几li元素
选择器之间的优先级别
标签选择器 1
类选择器 10
ID选择器 100
行内样式 1000
伪类选择器 10
属性选择器 10
关系选择器 拆开后 权重值相加
注意:
1) 数值越大, 权重越高
2) 权重值相同的情况下, 后面的胜出