属性选择器可以只利用标签的属性选择标签，比如我们想选择标签里面含有class属性的标签，或者选择属性里面含有title属性的标签，或者选择属性里面含有id属性的标签，那么我们就可以使用属性选择器了，接下来我就为大家讲解下属性选择器的使用哦！
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“CSS属性选择器使用（10）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们在文件图标上鼠标右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个程序。
3
3.如图所示，我们写一个标签用来声明这是一个html5的文档，在写一个,标签用来包含html文档的主主体部分。
4标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。</p></div><div class="listcon"><span>5</span><p>5.如图所示，我们写上html的主体用<body>标签包含，里面在写一个p标签，再写上它的属性title，并且赋值一段文字，为我们选择属性为title的标签做演示。（那个title属性赋值之后，这段文字，将在我们在网页中，将鼠标指针移动到那个标签上时，title属性赋值的文字就会显示出来。）</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们写一个普通的p标签，用来展示没有写属性的效果，以使我们看的更清楚哦！</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们再写上一个p标签，并将其title的赋值为“hello”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们再写上一个p标签，并将其title的赋值为“hello123”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们再写上一个p标签，并将其title的赋值为“p123”，用来展示在属性不同的情况下，我们对其的选择，还可以根据属性不同选择哦!</p></div><div class="listcon"><span>10</span><p>10.如图所示，再写上一个p标签，并将其class的赋值为“hello”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！</p></div><div class="listcon"><span>11</span><p>11.如图所示，再写上一个p标签，并将其class的赋值为“hello123”，用来展示不仅属性相同在赋值不同的情况下，我们还可以根据属性值的不同来选择哦！</p></div><div class="listcon"><span>12</span><p>12.如图所示，我们再写两个p标签，并且为它们的id属性赋值分别为3和5，这是为了展示属性相同，但属性值不同时，我们也可以根据其属性值的不同，来进行选择哦！</p></div><div class="listcon"><span>13</span><p>13.如图所示，再写上一个div标签，并且给属性id赋值为“123hui”。</p></div><div class="listcon"><span>14</span><p>14.如图所示，写上两个div标签，其id的属性值都是以hui123开头的，我们来展示其属性值以hui123开通的，我们才选择其标签的效果。</p></div><div class="listcon"><span>15</span><p>15.如图所示，写上style标签，并且声明其内的代码为css类型，来在里面设置样式，我们用[title]｛｝这样的形式将属性值为title的标签的背景颜色设置为绿色。（属性选择器的格式为：标签[属性名]{设置样式}。）</p></div><div class="listcon"><span>16</span><p>16.如图所示，再用[class]｛｝这样的形式将属性值为class的标签的背景颜色设置为蓝色。</p></div><div class="listcon"><span>17</span><p>17.如图所示，我们用[id = '3']{}这样的形式选择id属性值为3的标签，并且设置其背景颜色为红色。</p></div><div class="listcon"><span>18</span><p>18.如图所示，我们用[title ^ = 'p']{}这样的形式选择title属性值里面，属性值以p开头的标签，并且设置其背景颜色为黄色。</p></div><div class="listcon"><span>19</span><p>19.如图所示，我们用div[id $ = 'p']{}这样的形式，选择div标签里面其title属性值里面，属性值以ui结尾的标签，并且设置其背景颜色为银色（silver中文意思为银色的意思）。</p></div><div class="listcon"><span>21</span><p>21.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>22</span><p>22.如图所示，我们看到我们选择的title属性的标签变为了我们设置的绿色，而选择的title属性值为p123的标签变为了我们设置的黄色，而选择的class属性值以hello开通的标签变为了我们设置的蓝色，而选择的id属性值为3的标签变为了我们设置的红色，而选择的id属性值为123hui的标签变为了我们设置的银色，而选择的id属性值以hui123开头的标签变为了我们设置的粉色。</p></div><div class="listcon"><span>23</span><p>23.如图所示，这是本案例的源代码，以供大家参考哦！<!--<!DOCTYPE html>标签来声明这是一个html5文档--><!DOCTYPE html><!--html5文档用html标签包含所有内容--><html><!--这是html文档的头部部分用<head>标签包住--><head><!--这是头部里面网页的标题，用<title>标签包含--><title>CSS属性选择器使用（10）
4.如图所示，我们写一个
标签用来包含html文档的头部部分，写上我是属性名为title的p标签
我是普通的p标签
我是一个title属性值为hello的p标签
我是一个title属性值为hello123的p标签
我是一个title属性值为p123的p标签
我是一个class属性值为hello的p标签
我是一个class属性值为hello123的p标签
我是一个id属性值为3的p标签
我是一个id属性值为5的p标签
我是id属性值为123hui的div标签
我是id属性值为hui123的div标签
我是id属性值为hui123789的div标签
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。 。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神
上一篇：灰崎祥吾的饲养方法
下一篇：永远的7日之都赛哈姆攻略