CSS五大选择器的详细介绍

这篇文章主要介绍“CSS五大选择器的详细介绍”，在日常操作中，相信很多人在CSS五大选择器的详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS五大选择器的详细介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

10年积累的网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有扬中免费网站建设让你可以放心的选择与我们合作。

CSS选择器作用：

CSS选择器用于选择HTML页面中你想要的元素的样式，或者说定位页面中的特定位置。  

CSS中的五大选择器：

1、元素选择器  

元素选择器是最常见的css选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h3,span,a,div或者html。  

例如：

html {background-color: blue;}//整个文档添加蓝色背景；
p {font-size: 50px; backgroud-color: yellow;}//将所有p元素字体大小设置为50像素同时添加黄色背景；
h3 {background-color: red;}//将所有h3元素添加红色背景；

同时对多个html元素进行声明：  

举例：

h2, h3, h4, h5, h6, h7, p {font-family: 黑体;}//表示h2~h7以及p元素字体设置为”黑体”。

选择全部元素：*｛font-family: 黑体;｝

2、类选择器  

（1）单类选择器

单纯的元素选择器满足不了某些需求，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(class selector)。  

要使用类选择器我们需要首先对文件元素添加一个class属性。

我的出生日期

我哥的出生日期

p .test {color:red;} 或者h3.test{color:blue};“元素”+“.”+“类名”，以上操作就是给p标签设置为红色，h3标签设置为蓝色；

如果不用元素直接 .test｛color：yellow｝；表示给有test类名的所有元素设置为黄色；

通常情况下，我们会组合使用上面2者得到更加有趣的样式 ； 

（2）多类选择器

很多时候在，元素的calss属性可能不止包含一个，而是多个，各个类名之间用空格隔开；

例如：

这是一个例子

我们需要含有test1类中的字体颜色为红色，含有test2类中的字体为粗体或者设置字体像素，同时含有test1和test2的类背景颜色为黄色；就需要用到多类选择器啦

.test1{color:red}；

.test2{fount-size:30px}；  

.test1.test2{backgroud-color:}

3、ID选择器  

ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如： 

这是一个例子

使用ID选择器的方法为”#”+"id"。 

#apple{color:red;} 

4、属性选择器  

属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。

使用方法为: "元素名"+“[属性名]” 或“*[属性名]”。比如我们希望选择带有alt属性的所有img元素： img[alt] { ...}

选择带有title属性的所有元素：*[title] { ...}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：a[href][title] { ...}

(2)具体属性值选择器

如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素：

a[href="http://www.baidu.com"] { font-weight: bold;}

要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的。

p[] { ...}

将不会匹配到

，这里就是一个生硬的字符串匹配。

另外，想要同时匹配多个属性的值也是可以的：

p[][title="para"] { ...}

将匹配到类为warning(仅有warning)，title属性为para的p元素。

(3)部分属性值选择器

根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：

p[class~="warning"] { ...}

该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：p.warning { ...}

当然~=不仅仅只是用在class属性上，这只是一个示例。

我们的文档中包含一系列人物介绍的div元素：

我们可以使用以下的方式选择所有人物简介div：div[title~="test"] { ...}

不过不好的是