目录
一、选择器
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>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
