Html基础详解之（CSS）

it2022-05-20 69

css选择器

CSS选择器用于选择你想要的元素的样式的模式。

“CSS”列表示在CSS版本的属性定义（CSS1,CSS2,CSS3）.

CSS id和class选择器

<!DOCTYPE html> <html> <head> <style> .intro { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html> demo

＊所有元素

<!DOCTYPE html> <html> <head> <style> * { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div class="intro"> <p id="firstname">我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> </body> </html> demo

element选择器，以p为例。选择所有<p>元素

<!DOCTYPE html> <html> <head> <style> p { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div class="intro"> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> </body> </html> demo

element,element div,p选择所有<div>元素和所有<p>元素。

DOCTYPE html> <html> <head> <style> h1,p { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div class="intro"> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> </body> </html> demo

element elementdiv p选择<div>元素内部的所有<p>元素。

<!DOCTYPE html> <html> <head> <style> div p { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div class="intro"> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> </body> </html> demo

element>element,div>p 选择父元素为<div>元素的所有<p>元素。

<!DOCTYPE html> <html> <head> <style> div>p { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> <div> <span><p>我的样式不会改变。</p></span> </div> </body> </html> demo

element+element div+p 选择紧接在<div>元素之后的所有<p>元素

<!DOCTYPE html> <html> <head> <style> div+p { background-color:yellow; } </style> </head> <body> <h1>欢迎来到我到的主页</h1> <div> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> <p>我的样式不会改变。</p> </body> </html> demo

［attribute］［target］选择带有target属性所有元素。

<!DOCTYPE html> <html> <head> <style> a[target] { background-color:yellow; } </style> </head> <body> <p>带有 target 属性的链接会得到黄色背景：</p> <a href="http://www.wulaoer.org">wulaoer.org</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [<i>attribute</i>]，必须声明 <!DOCTYPE>。</p> </body> </html> demo

[attribute=value] [target=_blank]选择target＝“_blank”的所有元素。

<!DOCTYPE html> <html> <head> <style> a[target=_blank] { background-color:yellow; } </style> </head> <body> <p>target="_blank" 的链接会得到黄色背景：</p> <a href="http://www.wulaoer.org">wulaoer.org</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [<i>attribute</i>]，必须声明 <!DOCTYPE>。</p> </body> </html> demo

[attributel~=value] [title~=flower]选择title属性包含单词“flower”的所有元素。

<!DOCTYPE html> <html> <head> <style> [title~=flower] { border:5px solid yellow; } </style> </head> <body> <p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p> <img src="/i/eg_tulip.jpg" title="tulip flower" /> <br /> <img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" /> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。</p> </body> </html> demo

[attribute|=value] [lang|=en] 选择lang属性值以“en”开头的所有元素。

<!DOCTYPE html> <html> <head> <style> [lang|=en] { background:yellow; } </style> </head> <body> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> <p lang="us">Hi!</p> <p lang="zh">nihao!</p> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。</p> </body> </html> demo

:link a:link 选择所有未被访问的链接。

<!DOCTYPE html> <html> <head> <style> a:link { background-color:yellow; } </style> </head> <body> <a href="http://www.wulaoer.org">wulaoer</a> <a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.org">Wikipedia</a> <p><b>注释：</b>:link 选择器为未被访问过的链接设置样式。</p> </body> </html> demo

:visited a:visited 选择所有已被访问的链接。

<!DOCTYPE html> <html> <head> <style> a:visited { background-color:yellow; } </style> </head> <body> <a href="http://www.wulwoer.org">W3Sschool</a> <a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.org">Wikipedia</a> <p><b>注释：</b>:visited 选择器为已被访问的链接设置样式。</p> </body> </html> demo

active a:active 选择活动链接。

<!DOCTYPE html> <html> <head> <style> a:active { background-color:yellow; } </style> </head> <body> <a href="http://www.wulaoer.org">wulaoer</a> <a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.org">Wikipedia</a> <p><b>注释：</b>:active 选择器为活动的链接设置样式。</p> </body> </html> demo

:hover a:hover 选择鼠标指针位于其上的链接。

<!DOCTYPE html> <html> <head> <style> a:hover { background-color:yellow; } </style> </head> <body> <a href="http://www.wulaoer.org">wulaoer</a> <a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.org">Wikipedia</a> <p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p> </body> </html> demo

:focus input:focus 选择获得焦点的input元素。

<!DOCTYPE html> <html> <head> <style> input:focus { background-color:yellow; } </style> </head> <body> <p>在文本框中点击，您会看到黄色的背景：</p> <form> First name: <input type="text" name="firstname" /><br> Last name: <input type="text" name="lastname" /> </form> <p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p> </body> </html> demo

:first-letter p:frist-letter选择每个<p>元素的首字母。

<!DOCTYPE html> <html> <head> <style> p:first-letter { font-size:200%; color:#8A2BE2; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald.</p> <p>I live in Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html> demo

:first-line p:first-line 选择每个<p>元素的首行。

<!DOCTYPE html> <html> <head> <style> p:first-line { background-color:yellow; } </style> </head> <body> <h1>WWF's Mission Statement</h1> <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p> </body> </html> demo

:first-child p:first-child 选择属于父元素的第一个子元素的每个<p>元素。

<!DOCTYPE html> <html> <head> <style> p:first-child { background-color:yellow; } </style> </head> <body> <p>这个段落是其父元素（body）的首个子元素。</p> <h1>欢迎访问我的主页</h1> <p>这个段落不是其父元素的首个子元素。</p> <div> <p>这个段落是其父元素（div）的首个子元素。</p> <p>这个段落不是其父元素的首个子元素。</p> </div> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p> </body> </html> demo

:before p:before 在每个<p>元素的内容之前插入内容。

<!DOCTYPE html> <html> <head> <style> p:before { content:"台词："; } </style> </head> <body> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> <p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p> </body> </html> demo

:after p:after 在每个<p>元素的内容之后插入内容。

<!DOCTYPE html> <html> <head> <style> p:after { content:"- 台词"; } </style> </head> <body> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> <p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p> </body> </html> demo

:lang(language) p:lang(it) 选择带有“it”开头的lang属性值的每个<p>元素。

<!DOCTYPE html> <html> <head> <style> p:lang(en) { background:yellow; } </style> </head> <body> <p>我是唐老鸭。</p> <p lang="en">I live in Duckburg.</p> <p><b>注释：</b>对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。</p> </body> </html> demo

element1~element2 p~ul 选择前面有<p>元素的每个<ul>元素。

<!DOCTYPE html> <html> <head> <style> p~ul { background:#ff0000; } </style> </head> <body> <div>一个 div 元素。</div> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> <p>第一段。</p> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> <h2>另一个列表</h2> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> </body> </html> demo

[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。

<!DOCTYPE html> <html> <head> <style> div[class^="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">第一个 div 元素。</div> <div class="second">第二个 div 元素。</div> <div class="test">第三个 div 元素。</div> <p class="test">这是段落中的文本。</p> </body> </html> demo

[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。

<!DOCTYPE html> <html> <head> <style> div[class$="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">第一个 div 元素。</div> <div class="second">第二个 div 元素。</div> <div class="test">第三个 div 元素。</div> <p class="test">这是段落中的文本。</p> </body> </html> demo

[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

<!DOCTYPE html> <html> <head> <style> div[class*="test"] { background:#ffff00; } </style> </head> <body> <div class="first_test">第一个 div 元素。</div> <div class="second">第二个 div 元素。</div> <div class="test">第三个 div 元素。</div> <p class="test">这是段落中的文本。</p> </body> </html> demo

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:first-of-type { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> <p>这是第四个段落。</p> </body> </html> demo

:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:last-of-type { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> <p>这是第四个段落。</p> </body> </html> demo

:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:only-of-type { background:#ff0000; } </style> </head> <body> <div> <p>这是一个段落。</p> </div> <div> <p>这是一个段落。</p> <p>这是一个段落。</p> </div> </body> </html> demo

:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:only-child { background:#ff0000; } </style> </head> <body> <div> <p>这是一个段落。</p> </div> <div> <span>这是一个 span。</span> <p>这是一个段落。</p> </div> <p><b>注释：</b>Internet Explorer 不支持 :only-child 选择器。</p> </body> </html> demo

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p> </body> </html> demo

:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。

<!DOCTYPE html> <html> <head> <style> p:nth-last-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

<!DOCTYPE html> <html> <head> <style> p:nth-last-of-type(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:last-child { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:root :root 选择文档的根元素。

<!DOCTYPE html> <html> <head> <style> :root { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:empty p:empty 选择没有子元素的每个 <p> 元素。

<!DOCTYPE html> <html> <head> <style> p:empty { width:100px; height:20px; background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p></p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> demo

:target #news:target 选择当前活动的 #news 元素。

<!DOCTYPE html> <html> <head> <style> :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> <p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p> </body> </html> demo

:enabled input:enabled 选择每个启用的 <input> 元素。

<!DOCTYPE html> <html> <head> <style> input[type="text"]:enabled { background:#ffff00; } input[type="text"]:disabled { background:#dddddd; } </style> </head> <body> <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> </body> </html> demo

:disabled input:disabled 选择每个禁用的 <input> 元素

:checked input:checked 选择每个被选中的 <input> 元素。

<!DOCTYPE html> <html> <head> <style> input:checked { background:#ff0000; } </style> </head> <body> <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> <p><b>注释：</b>本例只在 Opera 中正确地工作！</p> </body> </html> demo

:not(selector) :not(p) 选择非 <p> 元素的每个元素。

<!DOCTYPE html> <html> <head> <style> p { color:#000000; } :not(p) { color:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>这是一个段落。</p> <p>这是另一个段落。</p> <div>这是 div 元素中的文本。</div> <br> <a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a> </body> </html> demo

::selection ::selection 选择被用户选取的元素部分。

<!DOCTYPE html> <html> <head> <style> ::selection { color:#ff0000; } ::-moz-selection { color:#ff0000; } </style> </head> <body> <h1>请试着选取页面上的文本</h1> <p>这是一个段落。</p> <div>这是 div 元素中的文本。</div> <br> <a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a> </body> </html> demo

以上来源:www.w3school.com

转载于:https://www.cnblogs.com/wulaoer/p/5201100.html

专利

最新回复(0)