<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值得元素
[属性名^=属性值]选择属性值以指定的值开头的元素
[属性名$=属性值]选择属性值以指定的值结尾的元素
-->
<style type="text/css">
/*p[title]*/
/*p[title=abc]*/
/* p[title^=abc]
*/
/*p[title$=abc]*/
{
color: orange;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤到起飞</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*
* 将ul里的第一个li设置为红色
*/
/*
* 伪类（不存在的类，特殊的类）
* -伪类用来描述一个元素的特殊状态
* 比如：第一个元素子元素，被点击的元素，鼠标移入的元素、、、、
* 伪类一般情况下都是使用，开头
* ：first-child 第一个元素
* ：last-child最后一个元素
* ：nth-child（）选中第N个元素
* 特殊值：
* n 第n个n的范围0到正无穷
* 2n或even表示选中偶数位的元素
* 2n+1或odd表示选中奇数位的元素
* -以上这些伪类都是根据所有的资源是你进行排序
*
*/
/*
* first-of-type
* last-of-type
* nth-of-type
* -这几个伪类的功能和上述的类似，不同点是他们是在同类型中进行排序
*
*/
/*
* ：not（）否定伪类
* -将符合条件的元素从选择器
*/
/*ul>li:first-child*/
/*ul>li:last-child*/
/*ul>li:nth-child(2)*/
/*ul>li:nth-child(n)*/
/*ul>li:nth-child(2n)*/
/*ul>li:nth-child(2n+1)*/
/*ul>li:first-of-type*/
/*ul>li:last-of-type*/
/*ul>li:nth-last-child(2)*/
{
color: aqua;
}
</style>
<body>
<ul>
<li class="abc">abc</li>
<li class="abc">fsaf</li>
<li class="safd">abc</li>
<li class="sdfsdf">asfasfdsa</li>
</ul>
</body>
</html>