CSS3–1.css3 新增選擇器

時間 2019-11-06

標籤 css3 css 1.css3 新增選擇器欄目 CSS 简体版

原文原文鏈接

1.後代級別選擇器css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords"content=""/>
<meta name="description" content="本篇網頁的概述，一段話，對網站的進一步描述"/>
<meta name="author"  content="網頁做者的資料">
<meta name="robots" content="" />
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style>
.first{
  border:1px solid red;
}
.second{
  border:1px solid blue;
}
.third{
  border:1px solid green;
}
ul,li{
  list-style:none;padding:0;margin:5px 0;
}
::selection{
  background:red;
}
</style>
<style>
</style>
<script>
   window.onload=function  () {
    var selects=document.getElementById("select");
    var spans=document.getElementsByTagName("span")[0];
    selects.onkeyup=function  () {
       if(selects.value==""){
         return;
       }
       for (var i=0; i<document.styleSheets[1].cssRules.length; i++) {
          document.styleSheets[1].deleteRule(i);
       }
       var rule=selects.value+spans.innerHTML;
       document.styleSheets[1].insertRule(rule,0);
    }
   }
</script>
</head>

<body>
   <input type="text" id="select">
   <span>
   {
    border:1px solid red;
    background-color:red;
   }
   </span>
   <ul class="first">
   <span>111</span>
        <li>first-one</li>
        <li>first-two</li>
        <li>first-three</li>
        <li>first-four</li></ul>
   <ul class="second">
        <li>second-one</li>
        <li>second-two</li>
        <li>second-three</li>
        <li>second-four</li>
        <div>
        </div>
   </ul>
   <ul class="third">
        <li>third-one</li>
        <li>third-two</li>
        <li>third-three</li>
        <li>third-four</li>
   </ul>

   <ul class="four">
        <li>four-one</li>
        <span>
        </span>
   </ul>
</body>
</html>

1.後代級別選擇器spa

element element	div p	選擇 <div> 元素內部的全部 <p> 元素。	1
element>element	div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。	2
:only-child	p:only-child	選擇屬於其父元素的惟一子元素的每一個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每一個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每一個 <p> 元素。	2
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每一個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每一個 <p> 元素（包括文本節點）。	3

1.1 :only-child ssr

父元素下面只有一個子元素3d

1.2 :nth-child(2)指針

2.同輩級別選擇器code

element+element	div+p	選擇緊接在 <div> 元素以後的全部 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每一個 <ul> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是從最後一個子元素開始計數。	3

2.1 element1+element2

*緊挨着element1的element2元素

2.2 element1~element2

*element1後面的全部element2元素

2.3 :first-of-type

同輩元素中的第1個元素

3.僞類選擇器

:link	a:link	選擇全部未被訪問的連接。	1
:visited	a:visited	選擇全部已被訪問的連接。	1
:active	a:active	選擇活動連接。	1
:hover	a:hover	選擇鼠標指針位於其上的連接。	1
:focus	input:focus	選擇得到焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每一個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每一個 <p> 元素的首行。	1
:before	p:before	在每一個 <p> 元素的內容以前插入內容。	2
:after	p:after	在每一個 <p> 元素的內容以後插入內容。	2
:target	#news:target	選擇當前活動的 #news 元素。	3

3.1 :target 選擇#id 元素（跳轉）

4.屬性選擇器

[attribute]	[target]	選擇帶有 target 屬性全部元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的全部元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部元素。	2
[attribute\|=value]	[lang\|=en]	選擇 lang 屬性值以 "en" 開頭的全部元素。	2
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每一個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的全部 <a> 元素。	3
[attribute=value*]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每一個 <a> 元素。	3

4.1.[attribute]

4.2.[attribute=value],[attribute*=value]

5.UI僞類選擇器

:enabled	input:enabled	選擇每一個啓用的 <input> 元素。	3
:disabled	input:disabled	選擇每一個禁用的 <input> 元素	3
:checked	input:checked	選擇每一個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每一個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

相關標籤/搜索

每日一句

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