首页分享网页制作学习之CSS选择器

网页制作学习之CSS选择器

来源：萌宠菠菠乐园时间：2024-12-15 03:29

详细参考见http://www.runoob.com/cssref/css-selectors.html 菜鸟教程

http://www.w3school.com.cn/cssref/css_selectors.asp W3School

元素选择器 element{}

最基本的选择器，可以直接为标签添加css样式，主流浏览器的各个版本都支持，eg：body{}

ID选择器 #ID{}

与类和元素不同，id在每一个HTML文档里是唯一的，不可以出现多个，主流浏览器的各个版本都支持，eg：#name{}

类选择器 .class{}

.class选择器很常用，可以在同一个文档中出现多个，便于相同样式的不同模块的设置，主流浏览器的各个版本都支持，eg：.hello{}

交集选择器 element.class{} 或者 element#id{}————————不常用

第一个必须是元素选择器，第二个是ID或者类选择器，两个选择器之间不能有空格，并且注意交集选择器的各个选择器的排列顺序是要遵循能被解析的原则的（比如:选择p和.class1的交集，p.class1可行，但是.class1p不可行，原因是后者不能被CSS解析器正确解析），eg：p.hello{} 选择标签是<p>并且class=“hello”的部分

并集选择器 element,.class,#id{}

并集选择器或者叫选择器组，可以同时选择多个多种选择器，用“，”分隔开，同时设置他们的样式，主流浏览器的各个版本都支持，eg：p,.hello,#name,h1{}

后代选择器 element .class{}

后代选择器可以选择到一个元素的后代元素，有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，不管嵌套层数多么深，只要是符合的都可以被选择到。

<html>

<head>

ul em {color:red; font-weight:bold;}

</style>

</head>

<body>

<ul>

<li>List item 1

<ol>

<li>List item 1-3

<ol>

</ol>

</li>

</ol>

</li>

</ul>

</body>

</html>

结果：

子元素选择器 element>element{}

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<!DOCTYPE HTML>

<html>

<head>

h1 > strong {color:red;}

</style>

</head>

<body>

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

</body>

</html>

结果：

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

常见的伪类：

超链接

:link 未点击的链接样式

:visited 已点击访问过的链接样式

:hover 鼠标经过、悬停的样式

:active 点击链接时的样式。

<html>

<head>

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>

<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>

<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>

</html>

结果：未点击红色，点击后绿色，悬停时粉色，点击时蓝色

未点击

已点击

：first-child

可以使用 :first-child 伪类来选择元素的第一个子元素。

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

eg1: p>i:first-child{font-weight:bold} ,选择器匹配所有 <p> 元素中的第一个 <i> 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

p > i:first-child {

font-weight:bold;

}

</style>

</head>

<body>

</body>

</html>

result1:

eg2: p:first-child i { color:blue; } 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

p:first-child i {

color:blue;

}

</style>

</head>

<body>

</body>

</html>

result2:

:lang 伪类

为不同的语言定义特殊的规则。

网页制作学习之CSS选择器

推荐分享

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征

网页制作学习之CSS选择器

推荐分享

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征