僞類選擇器

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。