目录
一、选择器
1、基本选择器
a、通配选择器
css语法: *{ }
适用范围:整个HTML文档
b、标签选择器
标签 { }
c、类选择器
1、作用:根据class的值,来选中某些元素
2、css语法:.one { }
HTML: <p class="one"> </p>
3、注意事项:HTML元素的属性值无 . 但css的类选择器要带 .
class值不能用纯数字,中文
一个元素不能写多个class属性,一个class属性可以有多个值,空格隔开
d、id选择器
1、作用:根据id的值,来选中某个元素
2、css语法: #one { }
HTML: <p id="one"> </p>
3、注意事项:一个属性只能有一个id,多个元素的id不能相同
一个元素可以同时用于id和class
2、复合选择器
复合选择器美名其曰就是把基本选择器复合起来
a、交集选择器
作用:选中同时符合多个条件的元素
用的最多的用法为:标签选择器+类选择器
注意:有标签选择器,则标签选择器在前
不可以同时写两个标签选择器
b、并集选择器
作用:选中多个对应的选择器
语法:选择器1+,+选择器2+,+选择器3+,+选择器n { }
注意:一般多个选择器竖着排列
任何选择器都可以
最后一个选择器后面没逗号
c、后代选择器
作用:选中指定元素中,符合要求的后代
语法:选择器1+空格+选择器2+空格+选择器3 { }(先写祖先元素再写后代元素)
d、子代选择器
作用:选中指定元素中,符合要求的子代
语法:选择器1>选择器2>选择器3>选择器n { }(先写父代再写子代选择器)
注意:选择器123......n可以为之前学的任何一种选择器(类选择器,id选择器,复合选择器)
e、兄弟选择器
相邻兄弟选择器
作用:选中指定元素后,与他紧挨着的下一个的兄弟选择器
语法:选择器1+选择器2 { }
注意:选择范围不包括指定元素
通用兄弟选择器
作用:选中指定元素后,它下面所有的兄弟元素
语法:选择器1~选择器2 { }
注意:选择范围不包括指定元素
f、属性选择器
语法1:【属性】 { }
语法2:【属性="属性值"】 { }
语法3:【属性^="开头字母"】 { }(选中属性,并且属性值以”开头字母”开头的元素“)
语法4:【属性$="结尾字母"】 { }(选中属性,并且属性值以“结尾字母”结尾的元素)
语法5:【属性*="字母"】 { }(选中属性,属性值中有“字母”的元素)
注意:属性选择器一般不去选择类选择器和id选择器
g、伪类选择器
作用:选中特殊状态的元素
伪类:它像类有没有class,是元素的一种特殊状态
分类:
(1)动态伪类:link(未点击的状态) visited(点击过的状态)
hover(悬浮状态) active(激活状态)
focus(获取焦点)
这四种状态在使用时顺序不要改变,否则可能会不显示
link和visited只能用于a标签,hover和active则可以用于任何标签
focus只有表单元素才能使用,失去焦点时不会发生变化,获取焦点(元 素处于输入状态)后才会根据css样式发生相应的变化
代码如下
<!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>
a:link{
color:orange;
}
a:visited{
color:green;
}
a:hover{
color:red;
}
a:active{
color:blue;
}
input:focus{
color:gray;
background-color:bluesky;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<form>
姓名:<input type="text" name="hahaha">
</form>
</body>
</html>
(2)结构伪类: 选择器:first-child { } (该选择器的第一个儿子)
选择器:last-child { } (该选择器的最后一个儿子)
选择器:nth-child(数字) { } (该选择器的第“数字”个儿子,括号里 可以写公式,类似于2n,even(偶数),2n+1,odd(奇数),-n+5 (表示前五个),an+b(刚开始n为零))
child表示所有子代某个儿子,n按照所有子代排序,如果不符合要求则 选不上如果不想用所有子代里的某个儿子,而是想用某种类型的子代中 的某个儿子,这次n就不是按所有子代排序了,而是按照该类型的顺序 排序可以用
选择器:first-of-type { }
选择器:last-of-type { }
选择器:nth-of-type { }
倒数:
选择器:nth-last-child(){ }
选择器:nth-last-of-type() { }
(3)否定伪类:排除括号内的选择器选择的元素,下面用class举例,也可以用上述任何形式的选择器
<!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>
div>p:not(.fail){
color:red;
}
div>p:not(:first-child){
color:green;
}
</style>
</head>
<body>
<div>
<p>嘻嘻嘻</p>
<p>嘿嘿嘿</p>
<p>哈哈哈</p>
<p>呵呵呵</p>
<p class="fail">芜湖湖</p>
<p class="fail">嘻嘻嘻嘿嘿嘿</p>
</div>
</body>
</html>
(4)UI伪类
对于单选框复选框不是所有的样式都能调整的,例如颜色所以下面就大小进行演示
:checked :disabled :enable
<!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>
/*checked是选中的是勾选的复选框,单选框,取消焦点后可复原,focus则不可复原*/
input:checked {
width:100px;
height:100px;
}
/*选中的是禁用的元素*/
input:disabled{
background-color:green;
}
/*选中的是可用的元素*/
input:enable{
background-color:gray;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text" disabled>
</body>
</html>
(5)目标伪类:选中锚点所选中的元素
<!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>
div{
background-color:green;
height:300px;
}
div:target{
background-color:gray;
}
</style>
</head>
<body>
<a href="#one">去第一个</a>
<a href="#two">去第二个</a>
<a href="#three">去第三个</a>
<a href="#four">去第四个</a>
<div id="one">第一个</div>
<div id="two">第二个</div>
<div id="three">第三个</div>
<div id="four">第四个</div>
</body>
</html>
(6)语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<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>
div:lang(en){
color:red;
}
div:lang(zh-CN){
color:green;
}
:lang(zh-CN){
color:blue;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<div lang="en">ashdj</div>
<p>嘿嘿嘿</p>
<p>嘻嘻嘻</p>
</body>
</html>
h、伪元素选择器
伪元素:像元素又不是元素,是元素中的一些特殊位置
<!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>伪元素选择器</title>
<style>
/*选中的是div里面的第一个文字*/
div::first-letter{
color:red;
font-size:30px;
}
/*选中的是div里面的第一行元素*/
div::first-line{
background-color:yellow;
}
/*选中的是div中被鼠标选中的文字*/
div::selection{
background-color:green;
color:red;
}
/*选中的是input元素中提示的文字*/
input::placeholder{
color:skyblue;
}
/*选中的是p元素最开始或最后的位置,随后创建一个元素*/
p::before{
content:¥;
color:red;
}
p::after{
content:.00;
}
</style>
</head>
<body>
<div>aushddksaugauifyiueagefwjkgfckafyewufaguyfgwahygfk</div>
<input type="text" placeholder="嘻嘻嘻哈哈哈">
<p>¥199.00</p>
</body>
</html>