http://zhidian.wuute.com/html5dev/ 2026-05-20T18:32:13+09:00 http://zhidian.wuute.com/html5dev/ http://zhidian.wuute.com/html5dev/lib/tpl/bootstrap3_1/images/favicon.ico text/html 2017-04-22T17:23:14+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-attr-begin?rev=1492849394&do=diff [attribute^=value] The [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。 语法 div[class^="test"] { background:#ffff00; } 值 例子 HTML <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> text/html 2017-04-22T17:23:27+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-attr-contain?rev=1492849407&do=diff [attribute*=value] [attribute*=value] 选择器匹配元素属性值包含指定值的元素。 语法 div[class*="test"] { background:#ffff00; } 值 例子 HTML <div class="first_test">这是第一个 div 元素。</div> <div class="second">这是第二个 div 元素。</div> <div class="test">这是第三个 div 元素。</div> <p class="test">这是段落中的文本。</p> text/html 2017-04-22T17:23:39+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-attr-end?rev=1492849419&do=diff [attribute$=value] [attribute$=value] 选择器匹配元素属性值带规定的值结尾的元素。 语法 div[class$="test"] { background:#ffff00; } 值 例子 HTML <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> text/html 2017-04-22T17:23:52+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-checked?rev=1492849432&do=diff :checked :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。 语法 input:checked { background:#ff0000; } 值 例子 HTML <form action=""> <input type="radio" checked="checked" value="male" name="gender" /> Male<br> <input type="radio" value="female" name="gender" /> Female<br> <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br> <input type="checkbox" value="Car" /> I have a car </form> text/html 2017-04-22T17:24:04+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-disabled?rev=1492849444&do=diff :disabled :disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。 语法 input[type="text"]:disabled { background:#dddddd; } 值 例子 HTML <form action=""> First name: <input type="text" value="Mickey" /><br> Last name: <input type="text" value="Mouse" /><br> Country: <input type="text" disabled="disabled" value="Disneyland" /><br> </form> text/html 2017-04-21T18:31:33+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-empty?rev=1492767093&do=diff :empty :empty选择器选择每个没有任何子级的元素（包括文本节点）。 语法 <element>:empty { /* style properties */ } 值 例子 HTML <div class="box"><!-- I will be lime --></div> <div class="box">I will be red</div> <div class="box"> <!-- I will be red because of the whitespace around this comment --> </div> text/html 2017-04-22T17:24:28+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-enabled?rev=1492849468&do=diff :enabled :enabled 选择器匹配每个启用的的元素（主要用于表单元素）。 语法 input[type="text"]:enabled { background:#ffff00; } 值 例子 HTML <form action=""> First name: <input type="text" value="Mickey" /><br> Last name: <input type="text" value="Mouse" /><br> Country: <input type="text" disabled="disabled" value="Disneyland" /><br> </form> text/html 2017-04-22T17:24:40+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-first-of-type?rev=1492849480&do=diff :first-of-type :first-of-type选择器匹配元素其父级是特定类型的第一个子元素。 语法 p:first-of-type { background:#ff0000; } 值 例子 HTML <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:24:51+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-gen-sibling?rev=1492849491&do=diff element1~element2 element1~element2 选择器匹配出现在 element1 后面的 element2。 element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。 语法 p~ul { background:#ff0000; } text/html 2017-04-22T17:25:03+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-last-child?rev=1492849503&do=diff :last-child :last-child选择器用来匹配父元素中最后一个子元素。 语法 p:last-child { background:#ff0000; } 值 例子 HTML <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:25:16+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-last-of-type?rev=1492849516&do=diff :last-of-type :last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。 语法 p:last-of-type { background:#ff0000; } 值 例子 HTML <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:25:29+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-not?rev=1492849529&do=diff :not :not(selector) 选择器匹配每个元素是不是指定的元素/选择器。 语法 :not(p) { background:#ff0000; } 值 例子 HTML <h1>这是一个标题</h1> <p>这是一个段落.</p> <p>这是另一个段落.</p> <div>这是div元素的一些文本。</div> text/html 2017-04-21T18:21:57+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-nth-child?rev=1492766517&do=diff :nth-child :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 语法 element:nth-child(an + b) { /*规则*/ } 值 值描述:nth-child(2n+1)规定奇数行。nth-child(odd)规定奇数行。nth-child(2n) text/html 2017-04-22T17:25:54+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-nth-last-child?rev=1492849554&do=diff :nth-last-child() :nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。 n可以是一个数字，一个关键字，或者一个公式。 语法 p:nth-last-child(2) { background:#ff0000; } 值 例子 HTML <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:26:07+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-nth-last-of-type?rev=1492849567&do=diff :nth-last-of-type() :nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。 n 可以是一个数字，一个关键字，或者一个公式。 语法 p:nth-last-of-type(2) { background:#ff0000; } 值 例子 HTML <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:26:19+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-nth-of-type?rev=1492849579&do=diff :nth-of-type() :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。 n可以是一个数字，一个关键字，或者一个公式。 语法 p:nth-of-type(2) { background:#ff0000; } 值 例子 HTML <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> text/html 2017-04-22T17:26:32+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-only-child?rev=1492849592&do=diff :only-child :only-child选择器匹配属于父元素中唯一子元素的元素。 语法 p:only-child { background:#ff0000; } 值 例子 HTML <div><p>This is a paragraph.</p></div> <div><span>This is a span.</span><p>This is a paragraph.</p></div> <p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器不支持 :only-child选择器.</p> text/html 2017-04-22T17:26:44+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-only-of-type?rev=1492849604&do=diff :only-of-type :only-of-type选择器匹配属于同类型中唯一同级元素。 语法 p:only-of-type { background:#ff0000; } 值 例子 HTML <div><p>This is a paragraph.</p></div> <div><p>This is a paragraph.</p><p>This is a paragraph.</p></div> text/html 2017-04-22T17:26:56+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-root?rev=1492849616&do=diff :root :root选择器用匹配文档的根元素。 在HTML中根元素始终是HTML元素。 语法 :root { background:#ff0000; } 值 例子 参考 相关页面 * :empty * :target 外部链接 * text/html 2017-04-22T17:27:09+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-selection?rev=1492849629&do=diff ::selection ::selection选择器匹配元素中被用户选中或处于高亮状态的部分。 ::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。 语法 ::selection { color:#ff0000; } ::-moz-selection { color:#ff0000; } text/html 2017-04-22T17:23:03+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/sel-target?rev=1492849383&do=diff :target ＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。 :target选择器可用于当前活动的target元素的样式。 语法 :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } 值 text/html 2017-06-03T20:54:44+09:00 http://zhidian.wuute.com/html5dev/doku.php/26/88/start?rev=1496490884&do=diff 选择器参考 定义 在CSS中，选择器是一种用于选择需要添加样式的元素的条件指定。 概述 CSS的选择器大致可分为以下几大类： * 类选择器（Class selectors） 通过设置元素的 class 属性，可以为元素指定类名。