CSS 选择器的介绍

最新推荐文章于 2024-09-14 12:37:34 发布

alexander068

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量100

点赞数

分类专栏： HTML 文章标签： html css html5

本文链接：https://blog.csdn.net/alexander068/article/details/120249445

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中各种选择器的用法，包括HTML选择器、类选择器、ID选择器、关联选择器、组合选择器以及伪类选择器。通过实例展示了选择器的优先级和使用场景，涵盖了颜色、背景、字体大小等样式设置。同时，还讲解了属性选择器的使用，如根据元素属性值来应用不同的样式。这些内容对于理解和掌握CSS选择器的灵活性和精确性至关重要。

摘要由CSDN通过智能技术生成

        /*1.HTML选择器*/
        /*h1{color:red}
        h3{color:aqua}
        li{color:#ff00cc}*/

        /*2.类选择器*/
        /*
        .cc{color:red}
        li.cc{background-color:#dddddd;}
        li.dd{color:blue}
        */

        /*3. id选择器 */
        #hid{color:red;}

        /* 选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]*/
        #sid{color:green}
        .sc{color:blue}
        span{color:red;}
        
        /*4. 关联选择器*/
        ol li{color:green}

        /*5. 组合选择器 */
        h1,h2,h3,h4{
           font-size:30px; 
        }

        /*6. 伪类选择器 */
        a:link {color: #FF0000; text-decoration: none}             /* 未访问的链接 */
        a:visited {color: #00FF00; text-decoration: none}          /* 已访问的链接 */
        a:hover {color: #FF00FF; text-decoration: underline}     /* 鼠标在链接上 */
        a:active {color: #0000FF; text-decoration: underline}     /* 激活链接 */

/* 选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]*/

关系选择器

       /*ul中的所有子li标签都采用此样式*/
        /* ul li{color:red;} */

        /*ul中的直接子li标签采用此样式（注意ol中的li不是）*/
        ul > li{color:blue;}

        /*紧邻div的一个p兄弟标签采用此样式*/
        /* div+p{color:red;} */
        
        /*div后面所有兄弟p标签都采用此样式*/
        div~p{color:red;}

CSS中的属性选择器

       /*含有title属性的li标签采用此样式*/
        li[title]{color:red;} 

        /*含有title属性值为bb的li标签采用此样式*/
        li[title="bb"]{color:red;} 

        /*含有class属性值（以空格分隔开）中有aa的li标签采用此样式*/
       li[class~="aa"]{color:red;} 

       /*含有class属性值（以-分隔开)以aa开头的li标签采用此样式*/
       li[class|="aa"]{color:red;}

       /*class属性值是以b子串开头的*/
       li[class^="b"]{background-color:#ddd;} 

       /*class属性值是以dd结尾的li标签*/
       li[class$="dd"]{background-color:#ddd;}

       /*class属性值中含有bb的li标签*/
       li[class*="bb"]{background-color:#ddd;}