Html基础详解之（CSS）

css选择器

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

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

Html基础详解之（CSS）

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:%;

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()

{

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()

{

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()

{

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()

{

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">跳转至内容 </a></p>

<p><a href="#news2">跳转至内容 </a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 ...</b></p>

<p id="news2"><b>内容 ...</b></p>

<p><b>注释：</b> Internet Explorer  以及更早的版本不支持 :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> 元素

<!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

: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:#;

}

: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

秒客网

Html基础详解之（CSS）

相关文章