复合选择器
前言
复合选择器是由两个或多个基础选择器组成的。
一、交集选择器
-
由两个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。
-
使用较少，不建议。
<html>
<head>
<style>
.red {
color: red;
}
p.red {
font-size: 12px;
}
</style>
</head>
<body>
<div class="red">12</div>
<p class="red">234</p>
</body>
</html>
二、并集选择器
- 如果样式完全相同或者部分相同，使用并集选择器集体声明。
- 并集选择器，和的意思，用逗号隔开，所有选择器执行后面的样式。
<html>
<head>
<style>
div,
p {
font-size: 12px;
}
</style>
</head>
<body>
<div>12</div>
<p>234</p>
<h1>78</h1>
</body>
</html>
三、后代选择器
外层标签写外面，内层标签写里面。
<html>
<head>
<style>
div p {
font-size: 12px;
}
</style>
</head>
<body>
<div>
<p>12</p> <!--只改变这一行-->
</div>
<p>234</p>
</body>
</html>
四、子元素选择器
<html>
<head>
<style>
.nav li { /*空格 选择儿子、孙子、重孙子*/
font-size: 12px;
}
.nav > li { /*大于号 只选择亲儿子*/
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单 </li>
</ul>
</li>
</ul>
</body>
</html>
五、属性选择器
- 选择标签带有特殊属性的选择器。
- 用中括号表示[]
- a[title]
- a[title=“123”]
- div[class^=font]表示font开头
- div[class$=footer]表示footer结尾
- div[class*=tao]表示任意位置含有tao
<html>
<head>
<style>
a[title] {
color: red;
}
</style>
</head>
<body>
<a title="123">qwe</a>
<a></a>
</body>
</html>
六、伪元素选择器（css3）
- E::first-letter 选择第一个字
- E::first-line 选择第一行
- E::selection 选中文字时候的变化样式
<html>
<head>
<style>
/*.demo 类选择器
:first-child 伪类选择器
:first-letter 伪元素选择器*/
p::first-letter {
font-size: 50px;
}
p::first-line {
color: green;
}
p::selection {
color: pink;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
在内部前面或者内部后面插入。
- E::before
- E::after
<html>
<head>
<style>
div::before {
content: "我";
}
div::after {
content: "18岁";
}
</style>
</head>
<body>
<div>今年</div>
</body>
</html>
