CSS入门二（CSS的选择器）

最新推荐文章于 2024-11-10 11:49:10 发布

二十一块石头

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量257

点赞数 2

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

本文链接：https://blog.csdn.net/qq_44872688/article/details/120675090

版权

本文深入介绍了CSS的选择器，包括属性选择器（如[属性名]、[属性名=值]等）、关系选择器（子元素和相邻兄弟选择器）、复合选择器、子元素选择器、伪类选择器（如:hover、:visited等）以及伪元素选择器（如:before、:after）。通过实例展示了如何精确控制元素样式。

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

文章目录

1、CSS的属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

（1）标签名[属性名]

........
标签名[属性名]：选择含有给定属性的标签
........

举例如下：

<style>
    li[title]{
   
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（2）标签名[属性名=值]

........
标签名[属性名=值]：选择含有给定属性值的标签
........

举例如下：

<style>
    li[title='yd']{
   
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（3）标签名[属性名^=值]

........
标签名[属性名^=值]：选择给定属性值是以某个字符开头的
........

举例如下：

<style>
    li[title^='xa']{
   
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（4）标签名[属性名$=值]

........
标签名[属性名$=值]：选择给定属性值是以某个字符结尾的
........

举例如下：

<style>
    li[title$='dx']{
   
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http

最低0.47元/天解锁文章