css选择器和伪类
css选择器和伪类
1、几个难记的选择器
> 直接后代选择器
+ 相邻选择器（下一个兄弟）
~ 兄弟选择器(以它为标准，往下数所有的兄弟)
2、基本使用顺序
伪元素使用规则：lv ha （即love hate规则）link ，visited ，hover ， active
3、特殊注意
:visited选择器只有以下三个选择器起作用
color
background-color
border-color
4、表单伪类
:enable 可用时的状态
:disabled 禁用时的状态
:checked 选中时的状态
:focus 光标移动上去的状态
5、自定义选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义选择器</title>
<style>
label {
display: block;
height: 200px;
width: 200px;
float: left;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
position: relative;
}
label span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
input:checked + span {
background-color: pink;
}
</style>
</head>
<body>
<div>
<label>
<input type="radio" name="aaa"/>
<span></span>
</label>
<label>
<input type="radio" name="aaa"/>
<span></span>
</label>
<label>
<input type="radio" name="aaa"/>
<span></span>
</label>
</div>
</body>
</html>
6、结构性伪类
ul li:nth-child（n） 查找底下所有的子元素，并且第n个子元素为li
ul li:nth-of-type(n) 查找ul子元素中所有标签为li的子元素，并且为第n个li标签
ul li:only-child ul下只有li标签时
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构性伪类</title>
<style>
li:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>4</li>
<!--5会变红-->
<li>5</li>
<li>6</li>
</ul>
<ul>
<p>12</p>
<!--1会变红-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
上述代码5和1会变红，所以nth-child(n)应该理解为该元素作为第n个元素出现时发生的样式
7、伪元素的坑
1、nth-of-type是以元素为中心的，即使用class也会解析成元素取做的
8、not和empty
1、not是除了这一个元素
2、empty是标签内的内容为空
