CSS的选择器可分为以下几种，个人经历，其中1~6，8用的最多，7，9用得少：
- 1.元素选择器 2.类选择器（class） 3.id选择器 4.属性选择器 5.后代选择器和子元素选择器 6.相邻兄弟选择器 7.伪类 8.伪元素
<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>
never give up
//注意两个都要写上，不然没效果（感觉其实有点鸡肋） ``` *区别 3：ID 能包含更多含义类似于类选择器，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能 在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则： ``` #mostImportant {color:red; background:yellow;} //这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：This is important!
This is important!- This is important!
//还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有
// href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {
color:red;
}
<font size=5 color=red>关于它其他格式的详细说明:[可以参考这位博主](https://blog.csdn.net/ixygj197875/article/details/79037984)，他写得很详细，每个样式都有例子，通俗易懂。</font>
</font>
<font size=5 color=red>五、后代选择器和子元素选择器</font>
<font size=5 color=black> 对于后代选择器，如果您希望只对 A 元素中的 B元素应用样式，可以这样写A B{............}，这样其他标签，即使有B也不会呈现相应的颜色，如：
h1 strong {color:red;}
I nevergive up
//这里strong虽是em的儿子，h1的孙子也会显示红色， //注意这里区分下面的子元素选择器 ``` 对于子元素选择器，写法是这样的：A>B，如： ``` h1>strong {color:red;}//选择h1的亲儿子红色，例如：Inever give up.
//这里 never give 会显示红色I nevergive up
//这里没显示红色，因为strong是em的儿子，h1的孙子 ``` 另外，子元素选择器也可以结合后代选择器，例如： ``` table.company td > p//它表示，选择这样的P标签，它是td的亲儿子，且属于这样的一个表格，表格带有company属性
//例如：
!DOCTYPE html>
这是真的 |
<table>
<td><p>这是真的</p></td>//它不会
</table>
</body>
This is a heading.
//它没变This is paragraph.
//只有它变红This is paragraph.
This is paragraph.
This is paragraph.
//再比如：
- List item 1
- //他不会变红
- List item 2
- //他变红了，因为它是一的兄弟
- List item 3
- //他也变红，它是二的兄弟
<font size=5 color=black>另外，除了“+”，还有“~”，它的作用是查找某一个指定元素的后面的所有兄弟结点
例如：
1
//不变红2
//不变红3
//变红4
//变红5
//变红 ``` 七、伪类 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之后加入图片
}
关于它们详细说明查看这里这位大神在里面阐述了具体的由来，例子也很详细。
扫一扫
2236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
