大家晚上好,今天继续我们的课程,前面说了常用的选择器,今天来介绍特殊的选择器,特殊选择器的种类比较多,但是都很实用,,话不多说,我们从复合选择器开始说起:
1.复合选择器
有的时候客户的需求中会有到多重的条件,用常用选择器我们也可以完成,但是一个一个列举常用选择器会很麻烦,所以我们引进了符合选择器的概念,而符合选择器我们用两种,分别是交集选择器和并集选择器,有一定数学基础的朋友们也都知道交集和并集的概念,在这里是通用的,所以我只说明一下书写方式:
并集选择器:
语法 选择器1选择器2选择器3{}
交集选择器:
语法 选择器1,选择器2,选择器3{}
举例:
1.将class属性为red的div字体变成24像素;
2.将h1与h3的字体颜色变为蓝色;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.red {
font-size: 24px;
}
h1,
h3 {
color: blue;
}
</style>
</head>
<body>
<h1>满江红·写怀</h1>
<h3>岳飞·宋</h3>
<p class="red">怒发冲冠,凭栏处、潇潇雨歇。</p>
<div class="red">抬望眼,仰天长啸,壮怀激烈。</div>
<div>三十功名尘与土,八千里路云和月。</div>
</body>
</html>
运行结果如下:
2.关系选择器
和平常我们生活中的形形色色的关系一样,选择器也有关系选择器,常见的是父子选择器,祖先后代选择器,兄弟选择器和顺承选择器,这里介绍一下他们的语法和举个例子:
父子语法:父元素>子元素{}
祖先后代语法:祖先元素 后代元素{}
兄弟语法:兄 + 弟{}
顺承语法:兄 ~ 弟{}
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求一:为div的子元素span设置一个字体颜色红色 */
div > span {
color: red;
}
/* 需求二:div里的span元素字体都变为30px */
div span {
font-size: 30px;
}
/* 需求三:选择下一个兄弟(仅挨着我的)*/
p + span {
color: green;
}
/* 需求四:选择下面所有的兄弟(前面的不选)*/
p ~ span {
background-color: grey;
}
</style>
</head>
<body>
<div>
我是超市<br />
<span>我是零食区</span>
<p>
我是生鲜区
</p>
<span>我是鞋包区</span><br />
<span>我是洗护区</span>
<span>我是超市外的小卖部</span>
</body>
</html>
运行结果如下:
3. 属性选择器:
属性选择器一般用来选择某一条属性的元素,用法也很简单,这里简单说一下它的语法。
语法:
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
举例:p标签title中以a开头的元素变为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>属性选择器</title>
<style>
p[title^="a"] {
color: red;
}
</style>
</head>
<body>
<h1 title="a" id="abcd" class="ac">满江红·写怀</h1>
<h3 title="ab">岳飞·宋</h3>
<p>····</p>
<p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p>
<p title="abcdab">驾长车,踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p>
<p id="ab">待从头、收拾旧山河,朝天阙。</p>
</body>
</html>
运行结果如下:
今天就先说这么多,如有什么不对的地方请大家及时指出,明天我会将选择器部分说完,设下的就说元素的伪类和伪类选择器,在后面的学习中会经常用到,大家要一起进步,共同学习,谢谢观看。