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是标签内的内容为空
上一篇:三角形制作


下一篇:vue+css 写一个时间轴