CSS选择器整理
- 一、基础选择器
- 1.标签选择器
- 2.id选择器
- 3.类选择器
- 4.通配符选择器
- 二、高级选择器
- 5.后代选择器
- 6.交集选择器
- 7.并集选择器
- 8.子级选择器
- 9.兄弟选择器
- + 选择器
- ~ 选择器
初次学习前端，整理CSS选择器，供以后翻看。
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
一、基础选择器
1.标签选择器
选中范围：通过标签选中所有同名标签，设置公共样式。
书写格式：标签名{}
实例部分代码：
p {color:red;}
<p>第一段代码<p/>2.id选择器
选中范围：只能选中一个标签（因为每个id属性值必须是唯一的，不能与其他的id同名）。
书写格式：#id属性值{}
实例部分代码：
#demo {color:red;}
//先要设置id属性值
<p id="demo">第一段代码<p/>3.类选择器
选中范围：页面中所有class 属性值相同的标签, 一个标签的class属性可以有多个属性值，值之间用空格分隔。
书写格式：.class属性值{}
类选择器有个特殊应用：原子类。（提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性。）
实例部分代码：
.demo {color:red;}
//先要设置class属性值
<p class="demo">第一段代码<p/>4.通配符选择器
选中范围：包含html标签在内的所有标签
书写格式：*{}
实例部分代码：
* {color:red;}二、高级选择器
5.后代选择器
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选择的标签 。
书写方式：基础选择器1 基础选择器2 （空格代表后代，基础选择器1选中元素必须是基础选择器2选中元素的祖先级）
实例部分代码：
div .demo {color:red;}
或 div p {color:blue;}
<div>
<p class="demo">这是 box1 标签中 p 标签内部的段落</p>
</div>6.交集选择器
选择范围：可以更准确的找到我们需要的标签,在clas名或者id名前面加上标签名,缩小查找的范围。
书写方式：标签名和class/id名中没有空格隔开。
（ 连续交集写法也可以使用，但是IE6不支持）
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style type="text/css">
/* p标签 与 class属性值为demo 的交集 */
p.demo {
color: red;
}
/* p标签 与 class属性值为demo 与 class属性值为ps 的交集 */
/* IE6不支持类名连续交集写法 */
p.demo.ps {
color: red;
}
/* class属性值为box1 的后代 p标签与class属性值为demo的交集 */
.box1 p.demo {
color: blue;
}
</style>
</head>
<body>
<h2 class="demo">这是一个二级标题</h2>
<div class="box1">
<ul>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
<li><p class="ps demo">这是 box1 标签中 li 标签内部的段落</p></li>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
</ul>
<p>这是 box1 标签中 p 标签内部的段落</p>
</div>
</body>
</html>7.并集选择器
选择范围：是所有的单独选择器选中的标签的并集集合 。
书写方式：多个选择器中间用逗号进行分隔，
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style type="text/css">
.box1,.demo {
color: blue;
}
/* 使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。 */
boby,h2,div,ul,li,p {
color: pink;
}
</style>
</head>
<body>
<h2>这是一个二级标题</h2>
<div class="box1">
<ul>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
<li><p class="demo">这是 box1 标签中 li 标签内部的段落</p></li>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
<li><p>这是 box1 标签中 li 标签内部的段落</p></li>
</ul>
<p>这是 box1 标签内部的段落</p>
</div>
</body>
</html>8.子级选择器
选择范围：选择指定标签元素的第一代子元素。
书写格式：element1>element12（element12选中元素必须是element1选中元素的下一级，不能是下下级，下下下级。必须是父子级关系才能选中标签）
实例部分代码：
li>p {color: blue;}
<li>
<p class="demo">这是 box1 标签中 li 标签内部的段落</p>
</li>9.兄弟选择器
+ 选择器
选择范围：选中一个元素后紧挨着的同级第一个兄弟元素。
书写格式：element1+element2(匹配同一个父元素中紧挨着element1后面的一个element2元素)。
~ 选择器
选择范围：选中一个元素后的同级所有兄弟元素。
书写格式：element1+element2(匹配同一个父元素中在element1后面的所有element2元素)
实例部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style type="text/css">
span+p {
color: blue;
}
span~p{
color: red;
}
</style>
</head>
<body>
<p>这是 box1 标签中 li 标签内部的段落</p>
<p class="demo">这是 box1 标签中 li 标签内部的段落</p>
<span>这是一个span标签</span>
<p>这是 box1 标签中 li 标签内部的段落</p>
<p>这是 box1 标签中 li 标签内部的段落</p>
</body>
</html>还剩下属性选择器、伪类选择器和伪元素选择器，将在下篇文章中介绍。
属性选择器
