伪类选择器

时间 2019-11-09

标签选择器繁體版

原文原文链接

伪类选择器

一、a标签四大伪类

:link：未访问状态css
:hover：悬浮状态html
:active：活跃状态spa
:visited：已访问状态htm

二、内容伪类

:before：内容以前索引
:after：内容以后string

:before, :after {
    content: "ctn";
}

三、索引伪类

:nth-child(n)：位置优先，再匹配类型it
:nth-of-type(n)：类型优先，再匹配位置io

v_hint：值能够为位置数，也能够为2n、3n...，表明2的倍数，3的倍数，且位置数从1开始

四、取反伪类

:not(selector)：对selector进行取反class

==========================================================================================================================================select

笔记:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>伪类选择器</title>
　　<style type="text/css">
　　　　a {
　　　　color: #333;
　　　　text-decoration: none;
　　　　}
　　　　/*:link为一个总体,表明超连接的初始状态*/
　　　　a:link {
　　　　color: orange;
　　　　}
　　　　/*:hover鼠标悬浮*/
　　　　a:hover {
　　　　color: green;
　　　　/*鼠标样式*/
　　　　cursor: pointer;
　　　　}
　　　　/*:active活动状态中(被鼠标点击中)*/
　　　　a:active {
　　　　color: red;
　　　　}
　　　　/*:visited访问过的状态*/
　　　　a:visited {
　　　　color: cyan;
　　　　}
　　　　/*普通标签运用: :hover :active*/
　　　　.box {
　　　　width: 200px;
　　　　height: 200px;
　　　　background-color: red;
　　　　}
　　　　.box:hover {
　　　　background-color: orange;
　　　　cursor: pointer;
　　　　}
　　　　.box:active {
　　　　width: 400px;
　　　　border-radius: 50%;
　　　　}

　　　　/*内容伪类*/
　　　　.txt:before {
　　　　content: "我是前缀~~~"
　　　　}
　　　　.txt:after {
　　　　content: ">>>我是后缀"
　　　　}

　　　　/*伪类能够单独出现*/
　　　　/*:after {
　　　　content: "呵呵"
　　　　}*/

　　　　/*位置伪类*/
　　　　/*1.位置从1开始*/
　　　　/*2.*/
　　　　/*先匹配位置,再匹配类型: 找到全部结构下的第2个标签,若是恰好是div,那么匹配成功*/
　　　　/*body a-baidu div01*/
　　　　div:nth-child(2) {
　　　　color: green;
　　　　}

　　　　/*先肯定类型,再匹配位置*/
　　　　/*先将页面中全部div找出,在匹配那些在本身结构层次下的第二个div*/
　　　　div:nth-of-type(2) {
　　　　color: cyan;
　　　　}

　　　　/*2n*/
　　　　/*
　　　　div ooo div
　　　　ooo div ooo
　　　　div ooo div
　　　　*/

　　　　/*3n*/
　　　　/*
　　　　div div ooo
　　　　div div ooo
　　　　div div ooo
　　　　*/

　　　　/*3n - 1*/
　　　　/*
　　　　div ooo div
　　　　div ooo div
　　　　div ooo div
　　　　*/

/*取反伪类*/
　　　　/*:not([d]) {
　　　　color: red;
　　　　}
　　　　body.body {
　　　　color: orange;
　　　　}*/
　　　　span:not([d]) {
　　　　color: red;
　　　　}
　　</style>
</head>
<body class="body">
　　
　　<a href="./123.html">访问页面</a>
　　<a href="https://www.baidu.com">访问过页面</a>
　　<div class="box">box</div>

<div class="txt">原来的文本</div>

<div class="wrap"> 　　<span>span01</span> 　　<div>div01</div> 　　<div>div02</div> 　　</div> 　　 　　<span d>12345</span> 　　<span dd>67890</span></body></html>