14-高级选择器 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1,.box2{
            width: 200px;
            height: 100px;
            background-color: #ff0789;
            transition: 2s;
        }
        .box1:hover+.box2{
            background-color: greenyellow;
        }
        .box2:active{
            background-color: aqua;
        }
        ul li{
            background-color: #ff0789;
        }
        ul :nth-child(odd){
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--
    后代选择器  .box1 .box2  选择.box1的后代元素.box2
    子代选择器  .box1>.box2  选择.box1的子代元素.box2
    并列选择器  .box1,.box2  选择.box1和.box2
    相邻兄弟选择器  .box1+.box2  选择.box1的相邻兄弟.box2
    普通兄弟选择器  .box1~.box2  选择.box1的普通兄弟.box2

    动态伪类选择器
    a:link       选择未被访问过的a标签
    a:visited    选择已被访问过的a标签

    :hover      选择鼠标经过时的元素
    :active     选择鼠标点击时的元素

    这两个元素可以给最初设置颜色(原始颜色)的地方给一个transition: 2s;渐变一下子
    而且只能检测到数值到数值的变换,不能检测单词到单词

    css3新增选择器

    ul li:nth-child(值)  从上到下选择第几个子元素
    简答写法 ul :nth-child
    2   可以取任意整数
    odd/even    odd奇数even整数
    3n+1    选择符合表达式的元素  n的取值[0,无穷大)
    :nth-last-child(值)  从下到上选择第几个子元素  取值一样

    :nth-of-type(值) 从上到下选择每一类标签的第几个子元素
    :nth-last-of-type(值)

    :empty  选择没有(子元素/文本)的元素
    :not(选择器)  取反选择器 ul :not(.on)选择ul子代class名不为on的标签
    :first-child  选择第一个子级元素
    :last-child  选择最后一个子级元素

    [属性名]  属性选择器

    [class]  选择有class的标签
    [class='box']  选择有class并且值为box的标签
    [class*='box']  选择有class并且值中含有box的标签
    [class^='box']  选择有class并且值中含有以box开头的标签
    [class$='box']  选择有class并且值中含有以box结束的标签

    伪元素选择器
    :first-letter  选择元素的第一个文字
    :first-line  选择元素的第一行文字
    :before  在元素内容前插入内容
    :later  在元素内容后面插入内容
    before和after必须要用content激活
    ::selection  选择被用户选择的元素

    伪元素  相当于一个假的元素  元素选择器
    伪类  相当于一个假的类名  类(class)选择器  真假选择器的权重是一样的

    推荐代码顺序
    1布局定位属性  content/display/position(对应方位值)/float/overflow/list-style
    2自身属性  width/height/padding/margin/background/border
    3文字属性  color/font/text-decoration/vertical-align
    4其他/css3新增属性  cursor/border-radius/box-shadow/text-shadow

-->
</body>
</html>
来源：https://www.cnblogs.com/zhangyu666/p/11477346.html
标签
css3选择器
class