css3选择器

/* 基础选择器：类 通配 群组 后代 标签 */

    /* div > p :子代选择器 选择的是p标签，父级是div的p标签*/

    /* div>p{
        color: red;
    } */

    /* -----------------兄弟毗邻选择器------------------------
        紧跟在div后面p标签，中间不能有其他标签
     */

    /* div+p{
        color: red;
    } */
    
    /* div之后的所有p标签（同级下） */

    /* div ~ p{
        color: red;
    } */

    /* ----------------------属性选择器----------------------- */
    /* 带有title属性的p标签 */
    /* p[title]{
        color: red;
    } */
    /* 带有title属性，并且属性值为se的p标签 */
    /* p[title=se]{
        color: red;
    } */
    /* 带有title属性，属性值包含a的p标签 */
    /* p[title*=a]{
        color: red;
    } */
    /* 带有title属性，属性值以test结尾的p标签 */

    /* p[title$=test]{
        color: red;
    } */
    /* 带有title属性，属性值以test开始的p标签 */
    /* p[title^=test]{
        color: red;
    } */
    /* -------------------------伪类选择器----------------------------- */
    /* 在同级里面，找到第n个标签，并且是p标签，然后赋值样式 */
    /* p:nth-child(n){
        color: red;
    } */

    /* 在同级里面，找到第一个标签，并且是p标签，然后赋值样式 */
    /* p:first-child{
        color: red;
    } */

    /* 在同级里面，找到最后一个标签，并且是p标签，然后赋值样式 */
    /* p:last-child{
        color: red;
    } */

    /* only-child 是独生子的p标签，选择的p标签不能有同级元素，不然选不中 */
    /* p:only-child{
        color: red;
    } */

    /* 在同级中，找到标签名为p的标签，在其中选择第n个p标签，赋值样式 */
    /* p:nth-of-type(n){
        color: red;
    } */

    /* 在同级中，找到标签名为p的标签，在其中选择第一个p标签，赋值样式 */
    /* p:first-of-type{
        color: red;
    } */

    /* 在同级中，找到标签名为p的标签，在其中选择最后一个p标签，赋值样式 */
    /* p:last-of-type{
        color: red;
    } */
    
    /* 在同级中，找到标签名为p的标签，如果该标签是同级中唯一一个p标签，就会选中它，赋值样式，如果同级中，还有其他的p标签，那么不能选中任何的标签 */    
    /* p:only-of-type{
        color: red;
    } */

    /* 被选中的复|单选框 */
    /* input:checked{
        height: 300px;
        background: red;
    } */
    /* 选择p标签的第一个字 */
    /* p:first-letter{
        font-size: 30px;
    } */

    /* 给根元素（html）赋值样式 */
    /* :root{
        padding: 100px;
    } */

    /* 选择没有内容的p标签 */
    /* p:empty{
        border: 2px solid red;
    } */
    
    /* 选择p标签，剔除掉类名为item的p标签 */
    /* p:not(.item){
        color: red;
    } */
    
    /* 让用户选中的p标签字体变红 */
    /* p::selection{
        color: red;
    } */