2. 程式人生 > >css選擇器中 first-of-type, last-of-type, nth-of-type 中的坑

css選擇器中 first-of-type, last-of-type, nth-of-type 中的坑

阿新 • • 發佈：2019-01-30

說明

nth-of-type, first-of-type, last-of-type屬於同一類的選擇器, first-of-type 就等於 nth-of-type(1)
當使用類選擇器和它們連用時,得尤其注意其所代表的意義,我當時第一次使用的時候,卡了好久,一度以為出了bug,在此記錄一下.
比如.class:nth-of-type(i)所選出的是同時符合以下條件的html元素:

  • 類屬性中包含class
  • 包含該屬性的標籤型別是它父元素下同標籤型別的第 i 個

示例

html程式碼如下

<!DOCTYPE html>
<html>
<head
 
>
<meta charset="utf-8">
<title>文件標題</title>
</head>
<body>
    <h1>我的第1個HTML頁面</h1>
    <div>我的第2個HTML頁面</div>
    <h1 class="test">我的第3個HTML頁面</h1>
    <p class="test">我的第4個HTML頁面</p>
    <h1 class="test test1">我的第5個HTML頁面</h1
 
>
    <div>我的第6個HTML頁面</div>
    <h1>我的第7個HTML頁面</h1>
</body>
</html>

css程式碼如下

.test{
  color:red
}
.test:first-of-type{     /* 第二條 */
  color:blue
}
.test1:nth-of-type(3){   /* 第三條 */
  color:green;
}

顯示結果如下
頁面顯示結果

可以仔細注意一下第二條css語法所起的作用:

  • 它不會讓”我的第1個HTML頁面”變藍;
  • 它不會讓”我的第3個HTML頁面”變藍;
  • 它會讓”我的第4個HTML頁面”變藍;

注意第三條css語法所起的作用:

  • 它會讓”我的第5個HTML頁面”變綠;

P.S 我的學習日記,如有不對請指出,謝謝!

相關推薦

使用lxml的css選擇器用法爬取奇書網並保存到mongoDB中

referer 最新 shu auth style ret bre last tail import requests from lxml import etree from fake_useragent import UserAgent import pymon

css選擇器中 first-of-type, last-of-type, nth-of-type 中的坑

說明 nth-of-type, first-of-type, last-of-type屬於同一類的選擇器, first-of-type 就等於 nth-of-type(1) 當使用類選擇器和它們連用時,得尤其注意其所代表的意義,我當時第一次使用的時候,卡了好

css選擇器中:first-child與:first-of-type的區別

:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。比如有段程式碼： <div> <p>第一個元素</p> <h1>第二個元素</h1>

CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法

前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n

css3 - 選擇器first-child、last-child、nth-child、nth-last-child、nth-of-type

https://blog.csdn.net/erdouzhang/article/details/70842177 最近系統專案，遇到較多表格 和 div 需要根據 寫樣式的 1.first-child（IE7相容）、last-child（IE8不相容）  html： <

關於css選擇器中nth-of-type和nth-child的區別

前言 今天學習了css選擇器，發現有兩個偽類nth-of-type和nth-child在功能上十分相似，卻又有不同的地方。但我發現無論是在MDN上，還是在w3school、菜鳥教程上，對這兩個偽類選擇器的對比說的都不是很明白。這篇文章就是對這兩個偽類的簡單探究

區分css選擇器-:first-child 與:first-of-type

<!DOCTYPE html> <html> <head> <style> /*嫡長子*/ p:first-child { background-color:yellow; } /*第一個嫡子*/ p:first-of-type { color:red

css選擇器nth-child與nth-of-type的區別

例項 例項1 選擇屬於父元素div的第三個子元素span，以及屬於父元素div的第六個子元素span。 <style> span:nth-child(3){ color: #ff0000; } span:nth

CSS 中first-child和last-child不起作用原因

clas 第一個 元素 col 沒有 XML last 發的 n) 今天開發的時候，發現last-child不起作用，看了下原因順便給自己學習CSS選擇器，我們這裏舉個例子，如下代碼：<div><h1>title</h1> <p&g

beautifulSoup庫中的css選擇器介紹

beautifulSoup庫中的css選擇器介紹 在BeautifulSoup中，要使用css選擇器，那麼應該使用soup.select()方法。應該傳遞一個css選擇器的字串給select方法 以下介紹五種常用的css選擇器（主要用於爬蟲）。 1.根據標籤名稱選擇

使用lxml的css選擇器用法爬取奇書網並儲存到mongoDB中

import requests from lxml import etree from fake_useragent import UserAgent import pymongo class QiShuSpider(object): def __init__(self):

CSS選擇器中的正則表示式

放張頭圖來放鬆放鬆 哈哈哈哈哈哈哈哈哈哈哈哈~ 一 是的，CSS也有正則（阿門） CSS裝逼兩利器：矩陣和正則。 其實呢，我們也不必驚訝，CSS畢竟也是一門語言，而且正則本來就是有利於某個具體語言之外的東西。 二 正則表示式的一些通用規則

CSS選擇器中的空格與尖括號有何區別？

例子1： .a .b {     margin: 0; } 空格隔開a和b，選擇所有後代元素。 例子2： .a>.b  {      margin: 0; } 尖括號隔開a和b，選擇所有子元素。 兩個例子的區別就在於後代和子，後代包含子子孫孫。  【空格符】white space characters

js中引用css選擇器

總結下剛才學習的  之前忘記了在js中可以使用css選擇器來定位,一直在用js的dom定位,感覺鈦麻煩,後來百度了下,記憶慢慢上來了,原來在js中是可以引用css選擇器來定位元素獲取對應的元素屬性值的 先列出用js的dom和引用css定位的對比 var xx=docume

CSS 選擇器中，元素選擇器和類選擇器的區別是什麼？

元素選擇器是最常見的 CSS 選擇器，即，文件的元素就是最基本的選擇器。選擇器通常是某個 HTML 元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。 類選擇器用於將樣式

設計中最常用的五類CSS選擇器

準確而簡潔的運用CSS選擇器會達到非常好的效果。我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。在實際工作中，最常用的選擇器有以下五類： 　　一、標籤選擇器： 　　顧名思議，標籤選擇器是直接將HTML標籤作為選擇器，

CSS選擇器中的空格的不同作用

css的規則裡總有不同的關係，一個空格也有不同的用法，不同的地方用空格可以有不同的效果，這就值得很多朋友們注意了，不要因為一個小小的空格到時連錯在哪裡都沒發現...... HTML文件是一棵樹的結構，各元素以一種層次結構為基礎構成‘樹’的檢視。文件樹中的每個元素，要麼是

熟練掌握HTML5開發中常用五大CSS選擇器用法

摘要 本文和大家重點學習一下五類CSS選擇器，我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。 最常用的五類CSS選擇器 一些新手朋友對選擇器一知半解，不知道在什麼情況下運用什麼樣的選擇器，這是

pyQuery在python中，實現css選擇器功能

# -*- coding=utf-8 -*- import sys import pdb from pyquery import PyQuery as pyq import urllib url=r'http://list.taobao.com/browse/cat-0.

在selenium中使用css選擇器進行元素定位

1.大家在使用selenium元素定位的時候，通常更多使用的是XPATH，css定位方式用得比較少    但有時候css定位方式還是有一些優勢的，    優勢1：一般情況下定位速度要比XPATH快    優勢2：語法要比XPATH更簡潔 下面簡要介紹一下css元素選擇器