css--css選擇器，僞類

時間 2019-11-12

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

前戲

前面咱們說過CSS規則由選擇器和聲明組成，咱們要給標籤設置屬性，那咱們就要找到對應的標籤，CSS選擇器能夠幫咱們找到咱們須要的標籤css

css選擇器有：html

標籤選擇器ide

類選擇器字體

ID選擇器ui

全局選擇器spa

羣組選擇器3d

後代選擇器code

標籤選擇器

標籤選擇器前面咱們用過，它是以HTML標籤做爲選擇器htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
        p{color:red}
        h1,div{color:blue}
     </style>
</head>
<body>
    <h1>h1標籤</h1>
    <div>css選擇器</div>
    <p>標籤選擇器</p>
    <p>類選擇器</p>
    <p>ID選擇器</p>
</body>
</html>

注意：有多個標籤之間用，隔開blog

類選擇器

同一個元素能夠設置多個類，之間用空格隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
        .p1{color:red}
         .p2,.p3{color:blue}

     </style>
</head>
<body>
    <h1 class="p1">h1標籤</h1>
    <div>css選擇器</div>
    <p class="p1">標籤選擇器</p>
    <p class="p2">類選擇器</p>
    <p class="p3">ID選擇器</p>
</body>
</html>

注意：多個類時用，隔開

若是咱們只想給p標籤下的class=p1的設置怎麼辦？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      p.p1{color:red}

     </style>
</head>
<body>
    <h1 class="p1">h1標籤</h1>
    <div>css選擇器</div>
    <p class="p1">標籤選擇器</p>
    <p class="p2">類選擇器</p>
    <p class="p3">ID選擇器</p>
</body>
</html>

在類選擇器前面加上標籤名就能夠了

ID選擇器

id選擇器和類選擇器差很少，類選擇器用的是點，id選擇器用的是#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      #i1{color: green}

     </style>
</head>
<body>
    <p id="i1">標籤選擇器</p>
    <p id="i2">類選擇器</p>
    <p id="i3">ID選擇器</p>
</body>
</html>

View Code

羣組選擇器

羣組選擇器其實咱們在標籤選擇器的時候已經使用過了，就是把多個標籤用逗號隔開，固然，羣組選擇器不僅能夠用作標籤，也能夠用作類選擇器，id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      #i1,#i2,#i3,.h1{color: red}

     </style>
</head>
<body>
    <h1 class="h1">我是h1</h1>
    <p id="i1">標籤選擇器</p>
    <p id="i2">類選擇器</p>
    <p id="i3">ID選擇器</p>
</body>
</html>

View Code

這樣，頁面上全部的字體都成了紅色

全局選擇器

全局選擇器就是給全部標籤設置一個樣式，通常用作清除標籤默認的樣式

咱們來將上面的羣組選擇器換成全局選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      *{color: red}

     </style>
</head>
<body>
    <h1 class="h1">我是h1</h1>
    <p id="i1">標籤選擇器</p>
    <p id="i2">類選擇器</p>
    <p id="i3">ID選擇器</p>
</body>
</html>

View Code

後代選擇器

使用後代選擇器，之間用空格隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      p em {color: red}

     </style>
</head>
<body>
    <h1 class="h1"><em>明天</em>我是h1</h1>
    <p ><em>今天</em>標籤選擇器</p>
    <p id="i2">類選擇器</p>
    <p id="i3">ID選擇器</p>
</body>
</html>

這樣寫咱們就給p標籤下面的em標籤加上了顏色

後代選擇器能夠寫多層

僞類選擇器

連接僞類

連接也就是a標籤，有四種狀態：激活狀態，已訪問狀態，未訪問狀態，和鼠標懸停狀態

僞類hover和active

上面的四種狀態的:link和:visited是a標籤專用的，而:hover和:active其餘標籤也可使用

:hover用與訪問的鼠標通過某個元素時

:active用於一個元素被激活時（既按下鼠標以後鬆開鼠標以前的時間）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
      a:link{color: blue}/*未訪問狀態*/
      a:visited{color: gray}/*已訪問狀態*/
      a:hover{color:red}/*鼠標懸浮狀態*/
      a:active{color: green}/*鼠標激活狀態*/
      p:hover{color:red}
      p:active{color: green}

     </style>
</head>
<body>
    <a href="https://cn.bing.com/">必應</a>
    <p id="i2">類選擇器</p>

</body>
</html>