html&CSS-----高级选择器

目录

前言

伪类选择器

状态类

结构类

伪元素选择器

属性选择器


前言

前面我们学习了CSS中的相关选择器(链接html&CSS-----CSS选择器(上)_灰勒塔德的博客-CSDN博客 html&CSS-----CSS选择器(下)_灰勒塔德的博客-CSDN博客)今天我们接着学习比较高级的选择器,下面就一起来去看看吧!

伪类选择器

当你希望元素在特定的状态下发生样式的变化时,可以使用伪类选择器。

状态类

写法 介绍 举例
:hover 鼠标悬停 a:hover{color:pink;}
:link 未被访问的链接(特指a标签) a:link{color:red};
:visited 被访问过的链接(特指a标签) a:visited{color:blue;}
:active 被点击按下状态 a:active{color:green;}

:hover :active 不仅仅能用在a标签上。

:hover最为常用最为重要。

可以进一步在伪类后进行选择,比如:#wrap:hover .nav{display:none;

写法 介绍 举例
:focus 获得焦点状态(接收键盘事件或其他用户输入的元素都允许 :focus 选择器。) input:focus{border:1px solid blue;}
:checked (单选/多选)表单被勾选状态 input:checked{background-color:#aaa;}

下面看个示例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 30px;
        }
       .first ul li:hover{
            color: violet;
       }
       .second a:link{
        /* 这里可以改变未被访问时的a标签颜色(样式) */
            color: red;
       }
       .third{
            color: green;
       }
       .forth:active{
            color: blue;
       }
    </style>
</head>
<body>
    <!-- :hover选择器 -->
    <div class="first">
        <ul>
            <li>《Re:从零开始的异世界生活》</li>
            <li>《来着新世界》</li>
            <li>《紫罗兰永恒花园》</li>
        </ul>
    </div>
    <!-- :link选择器 -->
    <div class="second">
        <a href="www.baidu.com">访问百度</a>
    </div>
    <!-- :visited选择器 -->
    <div class="third">
        <a href="www.baidu.com" target="_blank">访问baidu</a>
    </div>
    <!-- :active选择器 -->
    <div class="forth">
        点我变颜色,看看吧
    </div>
</body>
</html>

效果如下:

1691821211078

结构类

写法 介绍 举例
E:nth-child(n) 这个表示选择列表中的倒数第n个标签 p:nth-child(2){color:red;}
E:nth-of-type(n) E元素父级的第n个E元素,无视其他元素 p:nth-of-type(2){color:red;}
E:first-child E元素父级的第一个子元素(该子元素需要满足E的选择规则,不满足则不会选中任何元素) p:first-child{color:red;}
E:last-child E元素父级的最后一个子元素(该子元素需要满足E的选择规则,不满足则不会选中任何元素) p:last-child{color:red;}

上述选择器 n 所表示的可以是一个 数字 或者 奇数odd 或者 偶数even 或者 一个表达式。

:nth-child(n) :nth-of-type(n)有对应的"倒着数"属性 :nth-last-child(n) :nth-last-of-type(n)

下面看个示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 30px;
        }
        ul li:first-child{
            color: red;
        }
        ul li:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <div>start</div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <!-- <div>end</div> -->
    </ul>
</body>
</html>

效果: 这里要注意first-child和last-child这两个选择器的使用,因为这里作用的标签必须是父类元素的第一个或者最后一个,否则不起效果,如上所示。

伪元素选择器

伪类选择器相当于在某种情况下添加一个虚拟类名,而伪元素选择器则是相当于创建了一个虚拟元素。

写法 介绍 举例
E::before 相当于在E元素的最前面添加一个额外的子元素 #wrap::before{content:"Hello World!"}
E::after 相当于在E元素的最后面添加一个额外的子元素 #wrap::after{content:"Hello World!"}

必须拥有 content 样式,上述两个伪元素才会生效。

创建的子元素是一个行内元素

::after常用来清除浮动。

content 除了写文字之外,还可以用url指定一张图片等其他写法。

css 复制代码
        /* 消除浮动自适应问题的写法 */
        E::after{
            content: '';
            display: block;
            clear: both; 
        }

属性选择器

这一类选择器跟正则匹配搭配使用,实际上并不是怎么用到,比较少用的那种,我们可以去选择性的去使用

|----------------|---------------------------|------------------------------------------------|
| [attr] | 属性选择器(拥有attr标签属性) | [title]{ color:red; } |
| [attr=val] | 属性选择器(拥有标签属性attr并值为val) | [target=_blank]{ color:red; } |
| [attr*=val] | 属性选择器(拥有标签属性attr并值包含val) | [src*=baidu]{border:5px solid pink;} |
| [attr$=val] | 属性选择器(拥有标签属性attr并值以val结尾) | [src~=jpg]{ border:5px solid pink; } |
| [attr^=val] | 属性选择器(拥有标签属性attr并值以val开头) | [class^=nav]{ background:pink; } |
| 选择规则1选择规则2 | 复合选择器(多个规则来匹配元素) | div.nav.left{ width:100px; } 有nav和left类名的div标签 |

下面看个示例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 30px;
        }
        /* 这里匹配到的是含有o字母的选择器 */
        div[class*='o']{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="hhh">哈喽哦</div>
    <div class="food">吃饭了吗</div>
    <div class="look">快看快看</div>
</body>
</html>

效果:

好了,以上就是今天的全部内容了,我们下一期再见!

分享一张壁纸:

相关推荐
好_快1 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel1 小时前
webpack 核心编译器 十四 节
前端
excel2 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰12 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪12 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪12 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy13 小时前
macOS 命令行 原生挂载 webdav 方法
前端