CSS系列知识(2)——CSS选择器

概要

学习本篇博客
事先阅读：
1. http://www.runoob.com/cssref/css-selectors.html
2. http://www.runoob.com/cssref/sel-before.html
3. http://www.runoob.com/cssref/sel-after.html
将会学到以下内容：
1. CSS选择器：属性选择器
2. CSS选择器：before选择器、after选择器

CSS选择器

属性选择器
语法：[attribute] 或 [attribute=value] 或 S[attribute] 或 S[attribute=value]
含义：
1. [attribute] 设置属性名为attribute的样式
2. [attribute=value] 设置属性名为attribute且属性值为value的样式
3. S[attribute] 设置S标签下属性名为attribute的样式
4. S[attribute=value] 设置S标签下属性名为attribute且属性值为value的样式

<style>
p[name="123"]{
    color:red;
}
</style>
<!--Hello World!为红色-->
<p name="123">Hello World!</p>

before选择器
语法：S:before{…}
含义：在S标签前插入内容，并设置该内容的样式。

<style>
p:before
{
    content:"输出:";
}
</style>
<!--输出:Hello World!-->
<p>Hello World!</p>

after选择器
语法：S:after{…}
含义：在S标签后插入内容，并设置该内容的样式。

<style>
p:after
{
    content:"输出:";
}
</style>
<!--Hello World!输出:-->
<p>Hello World!</p>