CSS样式选择器的总结

最新推荐文章于 2024-10-22 09:22:43 发布

原创最新推荐文章于 2024-10-22 09:22:43 发布 · 962 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #html #firefox #javascript #语言

.NET与JavaScript 专栏收录该内容

43 篇文章

订阅专栏

所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，以实现各种效果。

一、常见的几种选择器

1、标记选择器

一个HTML页面有很多不同的标记组成，声明哪些标记采用哪种CSS样式，即标记选择器。一旦声明那么页面中所有的该标记都会相应产生变化。例：

<html>

<head>

<title>标记选择器</title>

<!--

h2{ /* 带h2标记的颜色为红色 */

color:red;

font-size:20px;

}

-->

</style>

</head>

<body>

<p>春眠不觉晓，处处蚊子咬</p>

</body>

</html>

运行结果：

2、类别选择器

类别选择器的类别名称由用户自定义，属性和值跟标记选择器一样，类别名称前面有一个点符号如下例中的.first，或者在标记后接类别名称，如下例中的p.second，使用时需要在标签里添加class属性，指定类别选择器名称。

例：

<html>

<head>

<title>类别选择器</title>

<!--

.first{

color:red; /* 红色 */

font-size:20px; /* 文字大小 */

}

p.second{

color:blue; /* 蓝色 */

font-size:17px; /* 文字大小 */

}

-->

</style>

</head>

<body>

<p class="second">春眠不觉晓，处处蚊子咬</p>

</body>

</html>

运行结果：

3、ID选择器

在HTML标签里声明ID名称，然后在CSS样式里声明一个与此标签ID名称一样的选择器，选择器名称前有一个#号。如下例中的#one。ID选择器可以用于多个标记，但不推荐，因为JavaScript等脚本语言也要调用html中设置的id，可能引起混乱。

例：

<html>

<head>

<title>ID选择器</title>

<!--

#one{

color:#F00; /* 红色 */

font-size:20px; /* 文字大小 */

}

#two{

color:blue; /* 蓝色 */

font-size:17px; /* 文字大小 */

}

-->

</style>

</head>

<body>

<p>春眠不觉晓，处处蚊子咬</p>

</body>

</html>

运行结果：

二、这几种选择器的混合应用

1、选择器集体声明

如果某些选择器样式风格完全相同，或者部分相同，可以使用集体声明。各选择器间用逗号分隔。

例：

<html>

<head>

<title>选择器集体声明</title>

<!--

h1,h2,h3,p{ /*标记选择器集体声明*/

color:green;

font-size:15px; /* 文字大小 */

}

h2.one,.two,#three{ /*类选择器，ID选择器的集体声明*/

text-decoration:none;

border-bottom: 1px solid red;

}

-->

</style>

</head>

<body>

<h3 class="two">现在不受苦，将来必受罪</h3>

<p id="three">春眠不觉晓，处处蚊子咬</p>

</body>

</html>

运行结果：

2、选择器的嵌套

两个选择器之间用空格分开，前面的选择器嵌套后面的选择器，可以对特殊位置的HTML标记进行声明。如下例中的p b和.one b,p.one del，多个嵌套之间用逗号分隔

例：

<html>

<head>

<title>选择器的嵌套</title>

<!--

p b{ /* 标记选择器的嵌套 */

color:Red;

font-size:20px;

}

.one b,p.one del{ /* 类别选择器(.one或p.one来表示)的嵌套 */

color:green;

font-size:20px;

}

#two b{ /* ID选择器的嵌套 */

color:blue;

font-size:20px;

}

-->

</style>

</head>

<body>

<p class="one">现在不受苦，<b>将来</b>必<del>受罪</del></p>

<p id="two">春眠不觉晓，<b>处处</b>蚊子咬</p>

</body>

</html>

运行结果：

3、子选择器

选择一个父元素直接的子元素，不包括子元素的子元素，之间用大于号>分隔。如下例中的ul.myList>li>a，IE7不认这种选择器，firefox可以

例：

<html>

<head>

<!--

ul.myList>li>a{

color:red;

text-decoration:none;

}

-->

</style>

</head>

<body>

<ul>

<li><a href="#">春眠不觉晓</a></li>

<li><a href="#">处处蚊子咬</a></li>

<li><a href="#">夜来一翻身</a></li>

<li><a href="#">压死不老少</a></li>

</ul>

</body>

</html>

运行结果：IE7不认这种选择器，firefox可以。如果要所有的都去掉下划线只需要把ul.myList>li>a改为ul.myList li a就可以了

4、属性选择器

针对HTML标记中的属性进行选择的。如下例的针对a标签的title属性进行设置 a[title]和a[title=c3]

例：

<html>

<head>

<title>属性选择器</title>

<!--

a[title]{

color:green;

text-decoration:none;

}

a[title=c3]{

color:red;

text-decoration:none;

}

-->

</style>

</head>

<body>

<ul>

<li><a href="#" title="c1">春眠不觉晓</a></li>

<li><a href="#" title="c2">处处蚊子咬</a></li>

<li><a href="#" title="c3">夜来一翻身</a></li>

<li><a href="#" title="c4">压死不老少</a></li>

</ul>

</body>

</html>

运行结果：IE7不认这种选择器，firefox可以。