Web前端——CSS基础篇（二）

最新推荐文章于 2024-08-08 16:21:49 发布

Yue-Baekhyun

最新推荐文章于 2024-08-08 16:21:49 发布

阅读量129

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_61561066/article/details/124282383

版权

本文详细介绍了CSS中的属性选择器、关系选择器、结构化伪类选择器、伪对象选择器以及超链接的伪类选择器，通过实例解析了各类选择器的用法，帮助读者深入理解并掌握CSS基础选择器的应用。

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

一、属性选择器

E表示页面元素。eg：li、input、a、p...

att表示属性。eg：color、font-family、font-size...

1、E[att]：选择具有att属性的元素

eg：表示选择具有class属性的a标签

 a[class]{
        color: red;
    }

2、E[att=“val”]：选择具有att属性，并且att属性值等于val的元素

eg：表示选择具有class属性，并且class属性值为ex2的标签

a[class='ex2']{
        font-size: 30px;
    }

3、E[att~=“val”]：选择具有att属性，并且att属性值是用空格隔开的单词，其中一个词等于val

eg：表示选择具有class属性，并且class属性值是用空格隔开的单词，其中一个词为zh的li标签

 <ul>
        <li class="zh xiyou">西游记</li>
        <li>三国演义</li>
        <li class="zh txt">红楼梦</li>
        <li>水浒传</li>
    </ul>

li[class~="zh"]{
        font-size: 25px;
        font-family: 宋体;
        color: red;
    }

4、E[att^=“val”]：选择具有att属性，并且att属性值是以val开头的字符串

5、E[att$=“val”]：选择具有att属性，并且att属性值是以val结尾的字符串

6、E[att*=“val”]：选择具有att属性，并且att属性值是中包含val的字符串

7、E[att|=“val”]：选择具有att属性，并且att属性值是以val开头，用“-”分隔开的字符串

4~7的举例 eg：

用户名<input type="text" name="username">
    <br><br>
    密&nbsp;&a

关注