一.基本选择器
标签选择器:
是指用html标签名称作为选择器，按照标签名称分类，为页面中某一标签指定统一的css样式
优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式
span {
font-size: 20px;
}类选择器:
使用“.”进行标识，后面紧跟类名，标签调用的时候用class="类名"即可
可以为元素对象定义单独或相同的样式，可以选择一个或多个标签
.class {
background-color: firebrick;
}ID选择器：
使用“#”进行标识，后面紧跟ID名，标签调用的时候用id="id名"即可
元素的id值是唯一的，只能应对于文档中某一个具体的元素
#id {
font-size: 20px;
}通配符选择器
通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素
但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式， 反而降低了代码的执行速度。
作用：使用通配符来去除页面元素的默认样式
*{
margin: 0;
padding: 0;
} 二.id选择器和类选择器的区别
/* id选择器和类选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class
类选择器（class）好比人的名字，是可以多次重复使用的
id选择器（id）好比人的身份证，全国唯一，不得重复，只能使用一次
*/
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
span {
font-size: 20px;
}
.class {
background-color: firebrick;
}
#id {
font-size: 20px;
}
</style>
</head>
<body>
<span>我是span标签</span>
<div class="class">我是类选择器</div>
<p id="id">我是id选择器</p>
</body>
</html>三.选择器的优先级
1.选择器的优先级：
选择器一致的情况下，谁在后谁的优先级就高
选择器不一致的情况下，会选择优先级高的
2. 基础选择器的优先级
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低
行间样式 1000
id选择器 100
类选择器 10
标签选择器 1
<!--
并集选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了
-->
.div1 .div3{
width: 100px;
height: 100px;
background-color: aqua;
}
#div1 #div3{
background-color: red;
}
#div1 #div2 #div3{
background-color: blue;
}四.后代 子代 兄弟选择器
1.后代选择器
用来选择元素或元素组的后代
写法：把外层标签写在前面，内层标签写在后面 中间用空格分开 当标签发生嵌套的时候，内层标签就成为外层 标签的后代
.box p{
background-color: blue;
}2.子代选择器
只能选择作为某元素子元素的元素
写法：把父级标签写在前面，子集标签写在后面 中间跟一个'>'进行连接 符号左右两侧也可各保留一个空格
.box > p{
background-color: chocolate;
}3.兄弟选择器
拥有相同父元素的元素是兄弟元素
选择下一个兄弟：前一个元素紧挨着的下一个元素，前面的兄弟不会变化
语法： 前一个 + 下一个
选择下边所有的兄弟：
语法：兄 ~ 弟
.box p + span{
color: rgb(42, 165, 69);
font-weight: bold;
}
.box p ~ span{
color: rgb(245, 221, 7);
font-weight: bold;
}五.交集 并集选择器
1、交集选择器
由两个选择器构成，其中第一个为标签选择器，第二个为class选择器
两个选择器之间不能有空格
p.one {
background-color: brown;
}
—————————————————————————
<p class="one">666666666666</p>
2、并集选择器
是各个选择器通过逗号连接而成的
任何形式的选择器（标签，class，id）都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同或者部分相同就可以利用并集选择器为他们定义相同的css样式
p,span,div{
background-color: dodgerblue;
}
——————————————————————
<p class="one">666666666666666</p>
<span class="one">55555555555</span>
<div class="one">888888888888</div>
六.属性选择器
属性选择器:
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
p[title]{
color: brown;
}
p[title="a"]{
color: chartreuse;
}
p[title^=abc]{
color: rgb(0, 4, 255);
}
p[title$=c]{
color: rgb(0, 225, 255);
}
p[title*=a]{
color: rgb(174, 0, 255);
}
——————————————————————
<p title="a">床前明月光</p>
<p title="ab">疑是地上霜</p>
<p title="abc">举头望明月</p>
<p title="abcd">低头思故乡</p>
<p title="b">鹅鹅鹅</p>
<p>鹅鹅鹅</p>
<p>鹅鹅鹅</p>
<p>鹅鹅鹅</p>七.伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover、:first-child
1. 结构选择器：
E:nth-child(n)
E 标签名
n 第几个(从1开始)
从E标签的父级中去找第n个标签，并且这个标签必须是E
E:nth-last-child(n)
E 标签名
n 第几个(从1开始)
从E标签的父级中去找【倒着找】第n个标签，并且这个标签必须是E
E:nth-child(odd)
odd 选择到奇数行
even 选择到偶数行
E:nth-of-type(n)
E 标签名
n 第几个(从1开始)
从E标签的父级中去找【正着找】第n个E标签
E:nth-last-of-type(n)
E 标签名
n 第几个(从1开始)
从E标签的父级中去找【倒着找】第n个E标签
2.对比
E:first-child == E:nth-child(1)
E:last-child == E:nth-last-child(1)
E:first-of-child == E:nth-of-child(1)
E:last-of-type == E:nth-last-of-child(1)
:first-child 第一个子元素
:last-child 最后一个元素
:nth-child() 选择第n个元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序
:first-of-type 同类型中第一个元素
:last-of-type 同类型中最后一个元素
:nth-of-type() 同类型中第几个元素
- 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
3.伪类
伪类：针对元素的某种状态添加的不同样式
用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
a标签默认四个状态
:link 为访问连接的(颜色)状态
:visited 访问过的链接(颜色)状态 【由于隐私的原因，所以visited这个伪类只能修改链接的颜色】
:hover 鼠标移上(悬停)的(颜色)状态
:active 鼠标按下不动时的(颜色)状态 (鼠标按下未弹起的链接)
/* 定义正常链接的样式； */
a:link{
color: #e11111;
}
/* 定义已访问过链接的样式 */
a:visited{
color: #161515;
}
/* a:hover，定义鼠标悬浮在链接上时的样式 */
a:hover{
color: #34ed1f;
}
/* a:active，定义鼠标点击链接时的样式。 */
a:active{
color: #0725e9;
}
E:target 修改锚点
目标元素的锚点/
E:checked checkbox被选中后的状态
radio被选中的状态
E checkbox / radio元素
E:focus 伪类选择器用于选取获取焦点的表单元素，焦点就是光标
伪元素：表示页面中的一些特殊的并不真实存在的元素（特殊的位置）
允许你对被选择元素的特定部分修改样式
伪元素使用 :: 开头
E::first-line E标签里第一行文字
E::first-letter E标签里第一个文字
E::selection E标签里被选中的文字
E::before 在E标签的最前面添加内容
E::after 在E标签的最后面添加内容
-before 和 after必须结合content属性来使用
-默认添加的元素是一个行内元素
八.练习
百度框
<!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>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
div {
width: 600px;
height: auto;
margin: 100px auto;
padding: 50px;
}
a{
width: auto;
height: auto;
border: 1px solid rgb(160, 154, 154);
text-decoration: none;
color: rgb(73, 69, 69);
}
.s1{
font-size: 15px;
padding: 8px 12px;
margin: 5px;
}
.s2{
font-size: 15px;
padding: 8px 12px;
margin: 5px;
}
a:link{
color: rgb(149, 153, 153);
font-size: 12px;
}
a:visited{
color: rgba(245, 136, 12, 0.795);
font-size: 15px;
}
a:hover{
color: blue;
font-size: 20px;
}
a:active{
color: greenyellow;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<a class="s1" href="#" >上一页</a>
<a class="s2" href="https://www.baidu.com/" >1</a>
<a class="s2" href="file:///E:/HTML/%E7%BB%83%E4%B9%A03.2/%E7%BB%83%E4%B9%A03.2.html" >2</a>
<a class="s2" href="#" >3</a>
<a class="s2" href="#" >4</a>
<a class="s2" href="#" >5</a>
<a class="s2" href="#" >6</a>
<a class="s2" href="#" >7</a>
<a class="s2" href="#" >8</a>
<a class="s1" href="#" >下一页</a>
</div>
</body>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* E:\vc 我的网页设计code\图片文件\14.jpg" alt="加载" */
body{
background-color: rgb(247, 247, 249);
}
.div1{
margin: 60px 450px 50px 400px;
padding:40px 0px 0px 80px;
width: 600px;
height: 700px;
background-color: rgb(248, 250, 251);
font-style: italic;
box-shadow: 0px 0px 8px 2px black;
}
/* .class h1{
background-color: aqua;
} */
.div1 span{
font: 2em sans-serif;
color: #100101;
}
.div1 input[value] {
width: 400px;
height: 40px;
/* background-color: aqua; */
}
.div1 input[placeholder] {
background-color: rgb(23, 143, 247);
width: 400px;
height: 50px;
margin: 0 auto;
text-align: center;
font-size: 2em;
color: #000;
box-shadow: 0px 0px 10px 2PX rgb(241, 236, 236) inset;
}
</style>
</head>
<body>
<div class="div1" >
<!-- <h1>Register With Us</h1><br/> -->
<table border="0" cellspacing="0" align="center" >
<tr>
<td width="700" height="80" align="center"><span><b>Register With Us</b></span></td>
</tr>
<tr>
<td width="700" height="40"><p>Username</p></td>
</tr>
<tr>
<td width="700" height="40"><input type="text" value="Enter usemane"></td>
</tr>
<tr>
<td width="700" height="40"></td>
</tr>
<tr>
<td width="700" height="40"><p>Emali</p></td>
</tr>
<tr>
<td width="700" height="40"><input type="text" value="Enter Emali"></td>
</tr>
<tr>
<td width="700" height="40"></td>
</tr>
<tr>
<td width="700" height="40"><p>Password</p></td>
</tr>
<tr>
<td width="700" height="40"><input type="text" value="Enter Password"></td>
</tr>
<tr>
<td width="700" height="40"></td>
</tr>
<tr>
<td width="700" height="40"><p>Confirm Password</p></td>
</tr>
<tr>
<td width="700" height="40"><input type="text" value="Enter Password again"></td>
</tr>
<tr>
<td width="700" height="40"></td>
</tr>
<tr>
<td width="700" height="80" align="center">
<input type="submit" placeholder="submit" >
</td>
</tr>
</table>
</div>
</body>
</html>
2514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
