常见的几种选择器
1. 标签名选择器
一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。
2. 类选择器
类选择器以一个点(.)前缀开头,然后跟随一个自定义类名。
具体步骤为:先在标签中定义class属性,然后把该属性值设置为实现定义好的类选择器名称即可。
主要用途:若要为相同的标签赋予不同的CSS样式就应使用类选择器
<style>
.name{
font-size: 2em;
color: aquamarine;
}
</style>
</head>
<body>
<div class="name">类选择器</div>
<div></div>
<div></div>
</body>
3. ID选择器
ID选择器以#号作为前缀,然后是自定义一个ID名。
具体步骤为:先在标签中定义id属性,然后把改属性值设置为事先定义好的ID选择器的名称即可。
<style>
#name{
font-size: 3em;
color: aquamarine;
}
</style>
</head>
<body>
<p id="name">Lorem.</p>
<p>Ut.</p>
<p>Sit.</p>
</body>
主要区别
标签选择器针对的是页面上的一类标签。
类选择器可以供多种标签使用。
ID选择器是供特定的标签(一个)。ID是此标签在此页面上的唯一标识。
4.通配符选择器
如果HTML所有元素都需要定义相同的样式,这时就使用通配选择器,一般用星号(*)表示。
<style>
*{
font-size: 2em;
color: aqua;
}
</style>
</head>
<body>
<div>Lorem, ipsum.</div>
<div>Nostrum, rerum?</div>
<div>Fuga, laborum!</div>
<p>Lorem.</p>
<p>Nihil?</p>
</body>
5.组合选择器
标签选择器、类选择器和ID选择器是可以组合起来使用的。
一般的组合方式是:标签选择器和类选择器组合,标签选择器和ID选择器组合。
组合选择器只是一种组合形式,并不算是一种真正的选择器,但在实际中经常使用。
-
包含(派生选择器)
父子选择器通过空格标识符来表示,前面的一个选择器表示包含框对象的选择器,而后面的选择器表示被包含的选择器
-
直接子选择器
直接子选择器是指定父元素所包含的子元素。子选择器使用 尖叫号(>)表示。
<style>
#header>p{
font-size: 2em;
color: brown;
}
</style>
</head>
<body>
<div id="header">
<p>你好!世界</p>
<div>
<p>hello,world!</p>
</div>
</div>
<div class="main">
<p>人之初</p>
<p>性本善</p>
</div>
</body>
包含选择器和直接子选择器的区别
包含选择器选中的是所有的子元素(也可以是孙子),而直接子选择器只选择子元素(不可以是孙子)
- 并列选择器
如果两个不同的标签,使用同一个类选择器,则可以使用并列选择器将它们区分开
<style>
div.main{
font-size: 2em;
color: cadetblue;
}
</style>
</head>
<body>
<div class="main">hello,world!</div>
<p class="main">你好,世界!</p>
</body>
-
兄弟选择器
‘+’ 跟 ‘~’
‘+’:表示选中匹配元素下面的第一个兄弟元素
‘~’:表示选中匹配元素下面的所有兄弟元素
具体看一下区别:
<style>
.h3+p{
color: red;
}
</style>
</head>
<body>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3 class="h3">这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3>这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
</body>
<style>
.h3~p{
color: red;
}
</style>
</head>
<body>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3 class="h3">这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3>这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
</body>
6.分组选择器
分组选择器通过逗号(,)分隔符进行定义。其基本结构是第一个选择器指定匹配元素,后面的选择器指定另一个匹配元素,最后把前后选择器匹配的元素都选取出来
通过分组选择器可以实现集体声明,将样式表中一致的CSS样式放在一起,然后通过逗号链接这些选择器,减少代码的书写量
<style>
.content1,.content2{
width: 100px;
height: 100px;
}
.content1{
font-size: 2em;
color: chartreuse;
background: cornflowerblue;
}
.content2{
font-size: 2em;
color: coral;
background: darkgoldenrod;
}
</style>
</head>
<body>
<div class="content1">人之初</div>
<div class="content2">性本善</div>
</body>
7.伪选择器
见上一次博客发布内容(伪选择器)