伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/**
* 伪元素
* 使用伪元素表示元素中的一些特殊的位置
*
*/
/**
* p中的第一个字符设置一个特殊的元素
*/
p:first-letter{
color: red;
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
/**
* before表示元素最前边的部分
* 一般的before都需要结合content这个样式一起使用，
* 通过content可以向before或after的位置添加一些内容
*
*:after表示元素的最后面的部分
*
*/
p:before{
content:"我会出现在段落最前面"
}
p:after{
content: "我会出现在段落的最后边";
}
</style>
</head>
<body>
<p>
海客谈瀛洲，烟涛微茫信难求，
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。
我欲因之梦吴越，一夜飞度镜湖月。
湖月照我影，送我至剡溪。
谢公宿处今尚在，渌水荡漾清猿啼。
脚著谢公屐，身登青云梯。
半壁见海日，空中闻天鸡。
千岩万转路不定，迷花倚石忽已暝。
熊咆龙吟殷岩泉，栗深林兮惊层巅。
云青青兮欲雨，水澹澹兮生烟。
列缺霹雳，丘峦崩摧。
洞天石扉，訇然中开。
青冥浩荡不见底，日月照耀金银台。
霓为衣兮风为马，云之君兮纷纷而来下。
虎鼓瑟兮鸾回车，仙之人兮列如麻。
忽魂悸以魄动，恍惊起而长嗟。
惟觉时之枕席，失向来之烟霞。
世间行乐亦如此，古来万事东流水。
别君去兮何时还？且放白鹿青崖间。须行即骑访名山。
安能摧眉折腰事权贵，使我不得开心颜！</p>
</body>
</html>属性选择器篇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/**
* 为所以具有title属性的元素p元素，设置背景颜色为
* 黄色
* 属性选择器：
* 作用-
* 可以根据元素中属性或属性中的值将作为提示文字显示
* -语法
* [属性名]选取含有指定属性的元素
* [属性名="属性值"]选取含有指定属性的元素
* [属性名^="属性值"] 选取title开头指定值的元素
* [属性名$="属性值"] 选取title结尾指定值的元素
* [属性名*="属性值"] 选取title中包含指定值的元素
*/
/* p[title]{
background-color: yellow;
} */
/*选取title为指定值*/
/* p[title="hello"]{
background-color: yellow;
} */
/*选取title以什么什么开头的值*/
/* p[title^="ab"]{
background-color: yellow;
} */
/**
* 为title属性以c结尾的元素设置一个背景颜色
*/
/* p[title$="c"]{
background-color: yellow;
} */
/*为title属性中有c的元素设置一个背景颜色*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会做我提示文字显示
-->
<p title="我是title中的文字">我是一个段落</p>
<p>我是一个段落</p>
<p title="abca">我是一个段落</p>
<p title="cbda">我是一个段落</p>
<p title="abdc">我是一个段落</p>
<p title="hello">我是一个段落</p>
</body>
</html>子元素伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/**
* 为第一个p标签设置一个背景颜色为黄色
* :fist-child 可以选中第一个子元素
* :last-child 可以选中最后一个子元素（测试无法实现）
*/
/* body>p:first-child{
background-color: yellow;
} */
/* p:last-child{
background-color: yellow;
} */
/**
* :nth-child 可以选中任意位置的子元素
* 该选择器候补可以指定一个参数，指定要选中第几个子元素
* even表示偶数位置的子元素
* odd表示奇数位置的子元素
*/
/* p:nth-child(even){
background-color: yellow;
} */
/* p:first-child{
background-color: yellow;
} */
/**
* :first-of-type
* :last-of-type
* nth-of-type
* 和first-child这些非常类似。
* 只不过child，是在所有的子元素中排列
* 而type，是在当前类型的子元素排列
*/
p:first-of-type{
background-color: yellow;
</style>
</head>
<body>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<!-- <div><p>我的一个p标签</p></div> -->
<p>我是一个p标签</p>
</body>
</html>