C3踩坑2--css選擇器

時間  2019-11-07
標籤 c3 css 選擇器 欄目 C&C++ 简体版
原文   原文鏈接

css的選擇器可能你們都懂,但是有一些知識點咱們每每會忽略,接下來po一些之前我常常沒去看的point

兄弟選擇器

clipboard.png
廢話很少說,po代碼css

<div class="a">
      <div class="b"></div>
      <div class="c"></div>
      <div class="d">111</div>
      <div class="d">222</div>
    </div>
*{
        margin: 0;
        padding: 0
      }
      .a{
        width:100px;
        height:100px;
        border:1px solid red
      }
    .c+.d{
        width:30px;
        height: 30px;
        background-color: green
      }

實現圖css3

clipboard.png

在這裏,.c+.d的意思就是選擇一個名爲d的類,而且這個類的前面"鄰居"有個類c這樣就找到咱們要求的類了,若是前面的類不是c那麼d類就不符合要求(看包裹"222"的類就不符合要求).佈局

再po一段代碼flex

*{
        margin: 0;
        padding: 0
      }
      .a{
        width:100px;
        height:100px;
        border:1px solid red
      }
    .c~.d{
        width:30px;
        height: 30px;
        background-color: green
      }

這時候咱們把+號換成~就變成這樣編碼

clipboard.png

爲何會這樣呢,由於.c~.d的意思就是找到名爲d的類,而且在d類前面能找到c類.
若是用集合表示的話".c+.d"是包含在".c~.d"的spa

子選擇器

<div class="a">
      <div class="b">

      </div>
    </div>
    ***
    <div class="q">
      qqqq
      <div class="w">
        www
        <div class="e">
          eee
          <div class="r">
            rrr
          </div>
        </div>
      </div>
    </div>
*{
        margin: 0;
        padding: 0
      }
      .a{
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

    .a > .b{
      width: 30px;
      height: 30px;
      background-color: green
    }

clipboard.png

這是子選擇器基礎語法,接下來作個改動3d

*{
        margin: 0;
        padding: 0
      }
      .a{
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

    div > div{
      width: 30px;
      height:30px;
      background-color: green
    }

clipboard.png

在這裏div>div能夠嵌套,也就是說只要知足這個關係就能夠嵌套,因此w,e,r類知足這個條件樣式就能夠改變樣式code

僞類:沒想到有這麼多分類...

c3的僞類分爲6種 -->動態僞類選擇器,目標僞類選擇器,語言僞類選擇器,UI狀態僞類選擇器,結構僞類選擇器,否認僞類選擇器orm

僞類對元素進行分類是基於特徵而不是它們的名字、屬性或者內容；原則上特徵是不能夠從文檔樹上推斷獲得的。
僞類寫法:E : pseodu { property : value }, E -->選擇器,pseodu -->僞類名字,property -->屬性,value -->值

1.動態僞類選擇器分爲2種:
a. 連接僞類選擇器 : E:link-->已經連接未訪問 E:visited-->已經連接已經訪問
b. 用戶行爲僞類選擇器 : E:active-->目標被激活 E:hover-->目標被鼠標懸停E:focus目標得到焦點
2.目標僞類選擇器
寫法:E:target,意思是匹配E元素而且E元素被相關uri(也就是a標籤)指向blog

<style>
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>這是標題</h1>

<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>

<p>請點擊上面的連接，:target 選擇器會突出顯示當前活動的 HTML 錨。</p>

<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>

clipboard.png

3.語言僞類選擇器-->根據元語言編碼匹配元素

<style>
p:lang(en)
{ 
background:yellow;
}
</style>
</head>

<body>

<p>我是555。</p>
<p lang="en">I live in 555.</p>

clipboard.png

4.UI狀態選擇器 -->form表單元素狀態的篩選
E:checked -->被選中的元素
E:enable -->啓用狀態的選擇器
E:disable -->禁用狀態的選擇器

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      input:checked{
        margin-right: 30px
      }
      input:disabled{
        margin-left: 30px
      }
    </style>
  </head>
  <body>
    <form action="">
    <input type="radio" name="sex" value="male" checked>Male
      <br>
    <input type="radio" name="sex" value="female" disabled>Female
    </form>
  </body>

clipboard.png

5.結構僞類選擇器 -->經過文檔樹結構進行匹配

clipboard.png

clipboard.png

參數n爲整數,當小於0表示不選擇元素,當變形爲4-n或者是2n+1時,n的取值範圍是0,1,2,3....,當n爲even表示偶數,odd表示奇數,廢話很少說,po一些常常用到的代碼

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      ul{
          display:flex;
      }
      ul>li{
        width: 30px;
        height: 30px;
        border: 1px solid red;
        list-style: none;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </body>

效果以下:
clipboard.png

如今添加以下

li:first-child{
        background-color: red
      }
      li:last-child{
        background-color: blue
      }
      li:nth-child(2){
        background-color: green
      }
      li:nth-last-child(2){
        background-color: black
      }

clipboard.png

關於奇數偶數

li:nth-child(even){
        background-color: red
      }
      li:nth-of-type(odd){
        background-color: green
      }

效果等同於

li:nth-child(2n){
        background-color: red
      }
      li:nth-of-type(2n+1){
        background-color: green
      }

clipboard.png

在這裏我麼注意到關於n的減法n不能被減只能轉換爲負數相加

li:nth-child(-n+5){
        background-color: red
      }

下面是錯誤示範

li:nth-child(5-n){
        background-color: red
      }

clipboard.png

6.否認僞類選擇器 -->能夠起過濾做用

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      ul{
          display:flex;
      }
      ul>li{
        width: 30px;
        height: 30px;
        border: 1px solid red;
        float: left;
        list-style: none;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      li:not([class=demo]){
        background-color: red
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li class="demo">5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </body>

clipboard.png

僞元素(驚呆了,原來平時審查元素的時候常常能看到這個之前就很粗心的pass了~~)

僞元素用於定位文檔中包含的文本,但沒法在文檔樹種定位,咱們能夠這樣理解,僞類元素和僞元素的區別是單冒號和雙冒號的區別

1 ::first-letter -->用來選擇文本的第一個字母

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p::first-letter{
        color:red
      }
    </style>
  </head>
  <body>
    <p>i am tony</p>
  </body>

clipboard.png

2 ::first-line -->用於選擇第一行文本

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      div{
        /* width: 150px */
      }
      div::first-line{
        color:red
      }
    </style>
  </head>
  <body>
    <div>
      關於inline-block可能不少人都不熟悉,佈局這方面不少人用的都是flex或者浮動,flex很強大毋庸</div>
  </body>

clipboard.png

3 ::before和::after,這兩個很是常見的僞元素

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p{
        color: red
      }
      p::before{
        content:"before"
      }
      p::after{
        content:"after"
      }
    </style>
  </head>
  <body>
    <p>
      ------
      </p>
  </body>

clipboard.png

4 ::selection -->咱們右鍵按下鼠標時文本的樣式

<style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p{
        color: red
      }
      p::before{
        content:"before"
      }
      p::after{
        content:"after"
      }
      p::selection{
        color: yellow;
        background-color: red
      }
    </style>
  </head>
  <body>
    <p>
      ------
      </p>
  </body>

clipboard.png

如圖,咱們用鼠標選擇文本的樣式就變了

接下來是屬性選擇器(終於本文章能夠終結了)

顧名思義,屬性選擇器就是過濾選擇器嘛~

接下來就看圖po代碼吧
1,
clipboard.png

*{
          margin: 0;
          padding: 0
        }
        ul>li{
          width: 30px;
          height: 30px;
          border: 1px solid red;
          list-style: none;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        li[id]{
          background-color: blue
        }
      </style>
    </head>
    <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li class="three-eee">3</li>
        <li id="four">4</li>
        <li title="i am programmer">5</li>
        <li title="iamyou">6</li>
        <li title="youami">7</li>
        <li title="hellocss3">8</li>
        <li>9</li>
      </ul>
    </body>

clipboard.png

2,
clipboard.png

li[class=three-eee]{
          background-color: blue
        }

clipboard.png

3,

clipboard.png

li[class|=three]{
          background-color: blue
        }

clipboard.png

4,

clipboard.png

li[title~=am]{
          background-color: blue
        }

clipboard.png

5,

clipboard.png

li[title^=iam]{
          background-color: green
        }

clipboard.png

li[title$=ami]{
          background-color: green
        }

clipboard.png

li[title*=llo]{
          background-color: green
        }

clipboard.png

最後補充下

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程