CSS选择器的详细说明（有误之处请指教）
CSS的选择器可分为以下几种，个人经历，其中1~6，8用的最多，7，9用得少：
- 1.元素选择器
2.类选择器（class）
3.id选择器
4.属性选择器
5.后代选择器和子元素选择器
6.相邻兄弟选择器
7.伪类
8.伪元素
一、元素选择器
元素选择器最为常见的，其名称就是html元素，甚至是html自己，如下：
<style type="text/css">
//img标签，图像标签
img{
padding-top:2.5px ;//定义内边距
padding-left:15px ;//定义左边距
cursor: pointer;//定义鼠标悬浮时样式
}
h1{
font-size: 26px;//定义字体大小
text-align: center;//定义文本居中
}
a{
color: red;
text-decoration: none;//定义超链接消除下划线，默认值是有的
}
</style>
<body>
//此时，以下标签则会呈现相应的样式
<img src="">.........<img>
<h1>.........................................</h1>
<a>.........................</a>
</body>二、类选择器
类选择器也很常见，一般你自己命名一个名字（随你喜欢，翠花，狗蛋，狗剩都可以，讲真，不开玩笑）作为你的样式的名称，然后，在body中，你想在哪个标签中用这个样式，就在那个标签中用 class=“你样式的名字”来表示。如下：
点击这里可查看具体长什么样
//代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实验一</title>
<style type="text/css">
.狗剩{
width: 580px;
height: 688px;
margin:0 auto;
}
.border{
border: gray 5px double;
}
img{
padding-top:2.5px ;
padding-left:15px ;
cursor: pointer;
}
h1{
font-size: 26px;
text-align: center;
}
.font1{
font-size: 12px;
color: gray;
text-align: center;
}
.solid{
border-bottom:1px solid gray;//这里是设置一个双实线的外框
}
a{
color: red;
text-decoration: none;
}
.font2{
font-size: 16px;
color: black;
text-indent: 2em;
text-align:left;
padding-left:3px ;
}
</style>
</head>
<body>
<div class="狗剩 border">
<h1>传谷歌秘密开发Fuchsia项目 欲5年内取代Android</h1>
<p class="font1">2018-07-20 07:00
腾讯科技
<a href="http://www.zhku.edu.cn/">我要评论(0)</a></p>
<p class="solid"></p>
<img src="img/exp1.jpg" title="点我也没用"/>
<p class="font2">腾讯科技讯 据外媒报道，知情人士周四透露，在过去两年多的时间中，谷歌内部一群工程师一直
在开发一款软件移动操作系统,希望用它最终来替代目前占全球移动操作系统市场主导地位的Android。
</p>
<p class="font2">不过随着这个团队的不断成长，它将不得不克服一些关于软件如何工作的激烈内部争论。</p>
<p class="font2">这个名为Fuchsia的项目为了克服Android的局限性从零开始创建，原因是越来越多的个人设备和其他设备开始接入互联网。
它的设计是为了更好地适应语音互动和频繁的安全更新,无论是笔记本电脑还是微小的互联网连接传感器，所有的设备都
将使用同一的操作系统。</p>
</div>
</body>
</html>另外,类选择器也可以结合元素标签一起使用：
//例如，您可能希望只有段落显示为红色文本
<html>
<head>
<style type="text/css">
p.important {color:red;}
</style>
</head>
<body>
<h1 class="important">I never give up.</h1>//不显示红色
<p class="important">I never give up.</p>//显示红色
</body>
</html>
三、id选择器
id选择器和类选择器类似，不过，类选择器是这种形式 .XXX而id选择器是这种形式 #XXX，关于它们俩的区别在这里也做一下说明吧：
我们都知道XHTML/HTML是一种文本语言，我们对一个文本里的内容可以一目了然的，但服务器不会，它是死的，因此，我们需要用一个方法来描述它。一般情况下，html标签像ul p这些基本的HTML标签就可以做到了，但是，其他的元素类型或者说布局选择，这些该怎么表示呢，此时id和class就派上用场了。它们就像元素的身份特征，描述了这个元素该长什么样。其中，id就像身份证，class就像衣服，只要你愿意，随时可以借其他人穿，也就是说class样式可以用在不同的元素标签中，在w3school可以点击查看一文中这样描述：
*区别 1：只能在文档中使用一次与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
我的理解： 对于区别一，（经本人实践，在我的谷歌浏览器完全可以显示，可能有些浏览器不可以，但我觉得这句话不是强调这个意思，它应该说的是一种规范，我们平时书写时就应该注意id应该唯一，为什么呢？试想一下，在一个大项目中，css样式绝对是庞大的，此时，但你用js来操控特定的html文本标签时，你打算选用id还是class？说到这里大家应该心里多少有点“bilibili高数”了吧，这也就是id不重复的原因，否则js则操控的不只是特定标签了。）
*区别 二：不能使用 ID 词列表不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
我的理解：对于区别2，我们都知道类选择器可以写成一下这个样子,而id不予许，它是独一无二的。
<style type="text/css">
.font1.font2{ //注意两个类名之间不能有空格
font-size:20px;
color: green;
}
</style>
<body>
<p class="font1 font2">never give up</p>//注意两个都要写上，不然没效果（感觉其实有点鸡肋）
</body>*区别 3：ID 能包含更多含义类似于类选择器，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能 在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：
#mostImportant {color:red; background:yellow;}
//这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
我的理解：对于区别三，额呃呃呃，可能语文不好，我觉得它的描述有点没意义，直到我偶然看到一篇国外的文章时点击这里 才觉得“ ID 能包含更多含 义”应该是体现在这个方面：
当我们想实现这样的一个功能，用户打开一个页面时，自动定位到我们想让用户最先看到的地方时，我们可以这样做设置网址为http://XXXXXXXXXXXX#id名，此时打开后，会定位到id标签处。经过本人实现，确实如此，不过你实验时，为了确切体验到，你需要足够多的内容来填充浏览器，这样得到的效果更明显。在很多项目中为了规范其实id 和 class都会该出，像这样：
<p id="XXX" class="VVVV"></p> //class是规定样式，id便于js操控。
四、属性选择器
属性选择器的设置同样是为了我们方便修改某个标签的样式，这个很好用，特别在一个大项目中，为一个标签添加样式时，它的写法如下：
//形如：E[attribute] 选择器，表示选择拥有属性 attribute 的E元素，不考虑属性的值
a[rel] {
color: red;
}
//还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有
// href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {
color:red;
}关于它其他格式的详细说明:可以参考这位博主，他写得很详细，每个样式都有例子，通俗易懂。
五、后代选择器和子元素选择器
对于后代选择器，如果您希望只对 A 元素中的 B元素应用样式，可以这样写A B{…………}，这样其他标签，即使有B也不会呈现相应的颜色，如：
h1 strong {color:red;}
<h1>I <em>never<strong>give</strong></em> up</h1>//这里strong虽是em的儿子，h1的孙子也会显示红色，
//注意这里区分下面的子元素选择器对于子元素选择器，写法是这样的：A>B，如：
h1>strong {color:red;}//选择h1的亲儿子红色，例如：
<h1>I<strong>never</strong> <strong>give</strong> up.</h1>//这里 never give 会显示红色
<h1>I <em>never<strong>give</strong></em> up</h1>//这里没显示红色，因为strong是em的儿子，h1的孙子另外，子元素选择器也可以结合后代选择器，例如：
table.company td > p
//它表示，选择这样的P标签，它是td的亲儿子，且属于这样的一个表格，表格带有company属性
//例如：
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.company{
width: 280px;
}
table.company td > p{
font-size: 18px;
color:gray;
}
</style>
</head>
<body>
<table class="company">
<td><p>这是真的</p></td> //它会显示相应样式
</table>
<table>
<td><p>这是真的</p></td>//它不会
</table>
</body>
</html>
六、相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。这里注意两点：1.两个元素相邻 2.拥有着共同的父亲。3.它影响的是后面的元素 即 A+B只影响B
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {
color:red;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>//它没变
<p>This is paragraph.</p> //只有它变红
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
//再比如：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>//他不会变红
<li>List item 2</li>//他变红了，因为它是一的兄弟
<li>List item 3</li>//他也变红，它是二的兄弟
</ul>
</div>
</body>
</html>
另外，除了“+”，还有“~”，它的作用是查找某一个指定元素的后面的所有兄弟结点
例如：
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p> //不变红
<h1>2</h1>//不变红
<p>3</p>//变红
<p>4</p>//变红
<p>5</p>//变红
</body>
七、伪类
w3school给出的解释是CSS 伪类用于向某些选择器添加特殊的效果。最常见的伪类可以说是超链接了：
//注意这几个是有顺序的，任意颠倒将不会呈现相应的样式
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */除此之外，伪类还有：（1）first-child （2）lang（这个基本没用过）
//first-child作用:选择某元素的第一个儿子是A。这个特定伪类很容易遭到误解，请看下面：
//例如：A:first-child，起作用的是A，不是A的第一个儿子
<html>
<head>
<style type="text/css">
p:first-child {color:red;}
li:first-child {color:red;}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>//显示红色，p是div的第一个儿子
<ul>
<li>Intert Key</li>//显示红色，这个li为ul的第一个儿子
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>notpush the brake at the same time as the accelerator.</em> </p>//不显示红色,因为不是选择
//P的第一个儿子。
</div>
</body>
</html>//对于lang，这样定义：lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，lang 类为属性值为
//no 的 q 元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>运行效果：
文字~段落中的引用的文字~文字
八、伪元素
关于伪元素，因为经验不足，也是查了很多文章才慢慢理清，首先说一下为什么叫伪元素？为什么叫伪类？（1）伪元素可以通过添加相应的元素实现相应的功能个 （2）伪类可以通过添加相应的类实现相应的功能
伪元素有这几种：
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
h1:before
{
content:url(logo.gif); //在每个h1之前加入图片
}
h1:after
{
content:url(logo.gif);//在每个h2之后加入图片
}关于它们详细说明查看这里这位大神在里面阐述了具体的由来，例子也很详细。
