2014年9月1日 星期一

css3 Selector nth-last-child(n) 套用樣式


支援CSS3 以上

用法: :nth-last-child(n)
說明:
n 為第幾個子元素,
依tag為第幾個子元素套用樣式

此nth-last-child為:子元素從後開始算

css定義:
從後算來第2個子元素且是a tag
a:nth-last-child(2){
font-size: 20px;
color: silver;
}
從後算來第4個子元素且是p tag
p:nth-last-child(4){
font-size: 20px;
color: red;
}
注意事項:
只算第幾個子元素,不分tag。
只要有父子關系,都會被定義。

有分tag

程式:
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector nth-last-child(n) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:nth-last-child(2){
font-size: 20px;
color: silver;
}

p:nth-last-child(4){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

<div>
<a href="#1">div a tag test 1</a>
<a href="#2">div a tag test 2</a>
<a href="#3">div a tag test 3</a>
<p>div p tag test 1</p>
<a href="#4">div a tag test 4</a>
<p>div p tag test 2</p>
</div>
</body>
</html>

例說明:
a:nth-last-child(2) 從後算第2個子元素為a tag 則套用
p:nth-last-child(4) 從後算第4個子元素為p tag 則套用

父元素為body ,子元素順序為:

前數            後數 檢查元素   是否套用
1、a tag 1 | 7、a tag 1 | |
2、a tag 2 | 6、a tag 2 | |
3、a tag 3 | 5、a tag 3 | |
4、p tag 1 | 4、p tag 1 | 檢查為p tag | 是套用
5、a tag 4 | 3、a tag 4 | |
6、p tag 2 | 2、p tag 2 | 檢查為a tag | 否套用
7、div tag | 1、div tag | |


父元素為div ,子元素順序為:
前數               後數 檢查元素  是否套用
1、div a tag 1 | 6、div a tag 1 | |
2、div a tag 2 | 5、div a tag 2 | |
3、div a tag 3 | 4、div a tag 3 | 檢查為p tag | 否套用
4、div p tag 1 | 3、div p tag 1 | |
5、div a tag 4 | 2、div a tag 4 | 檢查為a tag | 是套用
6、div p tag 2 | 1、div p tag 2 | |



圖1:





測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~






















其它文章

沒有留言:

張貼留言

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...