CSS属性选择器使用（10）
1、1.如图所示，我们新建一个记事本，并将记事本的名字改为“CSS属性选择器使用（10）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2、2.如图所示，我们在文件图标上鼠标右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个程序。
3、3.如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，在写一个,<html>标签用来包含html文档的主主体部分。
4、4.如图所莲镘拎扇示，我们写一个<head>标签用来包含html文档的头部部分，写上<title>标签用来包含页的标题，再写一个<稆糨孝汶;meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
5、5.如图所示，我们写上html的主体用<body>标签包含，里面在写一个p标签，再写上它的属性title，并且香崔阋琦赋值一段文字，为我们选择属性为title的标签做演示。（那个title属性赋值之后，这段文字，将在我们在网页中，将鼠标指针移动到那个标签上时，title属性赋值的文字就会显示出来。）
6、6.如图所示，我们写一个普通的p标签，用来展示没有写属性的效果，以使我们看的更清楚哦！
7、7.如图所示，我们再写上一个p标签，并将其title的赋值为“hello”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！
8、8.如图所示，我们再写上一个p标签，并将其title的赋值为“hello123”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！
9、9.如图所示，我们再写上一个p标签，并将其title的赋值为“p123”，用来展示在属性不同的情况下，我们对其的选择，还可以根据属性不同选择哦!
10、10.如图所示，再写上一个p标签，并将其class的赋值为“hello”，用来展示不仅有属性在赋值的情况下，我们还可以根据属性值的不同来选择哦！
11、11.如图所示，再写上一个p标签，并将其class的赋值为“hello123”，用来展示不仅属性相同在赋值不同的情况下，我们还可以根据属性值的不同来选择哦！
12、12.如图所示，我们再写两个p标签，并且为它们的id属性赋值分别为3和5，这是为了展示属性相同，但属性值不同时，我们也可以根据其属性值的不同，来进行选择哦！
13、13.如图所示，再写上一个div标签，并且给属性id赋值为“123hui”。
14、14.如图所示，写上两个div标签，其id的属性值都是以hui123开头的，我们来展示其属性值以hui123开通的，我们才选择其标签的效果。
15、15.如图所示，写上style标签，并且声明其内的代码为css类型，来在里面设置样式，我们用[title]｛｝这样的形式将属性值为title的标签的背景颜色设置为绿色。（属性选择器的格式为：标签[属性名]{设置样式}。）
16、16.如图所示，再用[class]｛｝这样的形式将属性值为class的标签的背景颜色设置为蓝色。
17、17.如图所示，我们用[id = "3"]{}这样的形式选择id属性值为3的标签，并且设置其背景颜色为红色。
18、18.如图所示，我们用[title ^ = "p"]{}这样的形式选择title属性值里面，属性值以p开头的标签，并且设置其背景颜色为黄色。
19、19.如图所示，我们用div[id $ = "p"]{}这样的形式，选择div标签里面其title属性值里面，属性值以ui结尾的标签，并且设置其背景颜色为银色（silver中文意思为银色的意思）。
20、20.如图所示，我们用div[id * = "hui123"]{}这样的形式，选择div标签里面其title属性值里面，属性值含有hui123的div标签，并且设置其背景颜色为粉色（pink中文意思为粉色的意思。）。
21、21.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。
22、22.如图所示，我们看到我们选择的title属性的标签变为了我们设置的绿色，而选择的title属性值为p123的标签变为了我们设置的黄侣忒簿红色，而选择的class属性值以hello开通的标签变为了我们设置的蓝色，而选择的id属性值为3的标签变为了我们设置的红色，而选择的id属性值为123hui的标签变为了我们设置的银色，而选择的id属性值以hui123开头的标签变为了我们设置的粉色。
23、23.如图所示，这是本案例的源代码，以供大家参考哦！<!--<!DOCTYPE html>标签来声明这是一个html5文档--><!DOCTYPE html><!--html5文档用html标签包含所有内容--><html><!--这是html文档的头部部分用<head>标签包住--><head><!--这是头部里面网页的标题，用<title>标签包含--><title>CSS属性选择器使用（10）</title><!--设置文档的编码为UTF-8以便让浏览器正确的解码--><meta charset="utf-8"><!--写上<style>标签用来设置元素中的样式，并声明其类型为css--><style type="text/css">/*给所有具有title属性的标签设置样式*/[title]{background-color: green;}/*给所有具有class属性的标签设置样式*/[class]{background-color: blue;}/*只给id属性值为3的标签设置文字颜色为红色*/[id = "3"]{background-color: red;}/*给title属性值以p开头的标签设置背景颜色为黄色*/[title ^= p]{background-color: yellow;}/*给id属性值以ui结尾的div标签设置背景色为银色*/div[id $= "ui"]{background-color: silver;}/*匹配任意id属性值里面含有hui123的div标签设置背景色为粉色*/div[id *= "hui123"]{background-color: pink;}</style></head><!--我们用<body>标签包含html文档的主体部分--><body><!--这是一个属性名为title的p标签--><p title="我是一个p标签">我是属性名为title的p标签</p><!--普通的p标签--><p>我是普通的p标签</p><!--这是一个属性值为hello的p标签--><p title="hello">我是一个title属性值为hello的p标签</p><!--这是一个title属性值为hello123的p标签--><p title="hello123">我是一个title属性值为hello123的p标签</p><!--这是一个title属性值为p123的p标签--><p title="p123">我是一个title属性值为p123的p标签</p><!--这是一个class属性值为hello的p标签--><p class="hello">我是一个class属性值为hello的p标签</p><!--这是一个class属性值为hello123的p标签--><p class="hello123">我是一个class属性值为hello123的p标签</p><!--这是一个id属性值为3的p标签--><p id= "3">我是一个id属性值为3的p标签</p><!--这是一个id属性值为5的p标签--><p id="5">我是一个id属性值为5的p标签</p><!--这是一个id属性值为hui123的div标签--><div id="123hui">我是id属性值为123hui的div标签</div><!--这是一个id属性值为hui123的div标签--><div id="hui123">我是id属性值为hui123的div标签</div><!--这是一个id属性值为hui123789的div标签--><div id="hui123789">我是id属性值为hui123789的div标签</div></body></html>