1、通用选择符(通配符):*
CSS样式
*{ color: #000000; }
p{color: #0000FF; }
p *{color: #FF0000;}
HTML代码
<p>蓝色</p>
<div>黑色</div>
<p>蓝色,<span>红色,</span><em>红色,</em><strong>红色,</strong>很神奇!</p>
2、类选择符:.类名
使用之前
使用之后
源码
<p>CSS很强大,可以控制页面中任何元素的表现形式</p>
<p class="second">与众不同,突出个性</p>
<p>与世界同步,做一个成功的页面</p>
3、包含选择符(派生/后代选择符):元素 子元素(div p)
作用于某个元素中的子元素
示例效果:
源码:
-
CSS
p strong{ color: #FF0000; font-size: 18px; text-decoration: underline; }
-
HTML
<p>CSS很强大,<strong>可以控制页面中<span>任何元素</span>的表现形式</strong></p> <p class="second">与众不同,突出个性</p> <strong>与世界同步,做一个成功的页面</strong>
特别说明:
p span和p strong span的效果一样
4、子选择符(对象选择符):>
定义子元素对象的样式,html同上。
效果图:
CSS样式:
5、相邻选择符:+
匹配同一父级下某个元素之后的元素,HTML代码见包含选择符中
效果图:
CSS样式:
6、属性选择符:是在标签中直接使用,不能在CSS文件中
模式
- E[atttr]:具有某个属性的所有标签
- E[atttr="value"]:属性值等于某个值的标签
- E[atttr~="value"]:属性的属性值用空格隔开的标签
- E[atttr|="value"]:属性的属性值必须以value开始及使用连字符“-”分割的标签E
E:表示任一标签
attr:标签E的任一属性
value:属性的属性值
注:当属性值没有空格只是一个单词时,“=”、“|=”和“~=”效果一样
示例效果图:
CSS样式:
HTML:
p class="paragraphs">带class属性的段落标签p</p>
<a href="http://www.baidu.com">没有class属性的标签a</a>
<p>这个没有class属性</p>
<a href="http://www.google.com" class="link">带class属性的链接标签a</a>
7、ID选择符:#
同一个页面中ID最好唯一
源码
-
HTML代码:
<p class="paragraphs">带class属性的段落标签p</p> <a href="http://www.baidu.com">没有class属性的标签a</a> <p id="paragraphs">这个没有class属性</p> <a href="http://www.google.com" class="link">带class属性的链接标签a</a>
-
CSS样式:
效果图:
8、选择符的组合关系
- 针对性使用类选择符或者ID选择符
- 选择符群组:使用英文逗号隔开多个选择符
- 选择符组合:选择符之间使用空格分割且为父子关系
个人感觉选择符组合的使用和包含选择符一样的
9、伪类
语法
选择符:伪类{属性:属性值;}
使用对象
经常是a标签使用
a:link{}:链接默认状态
a:visited{}:链接访问后状态
a:hover{}:鼠标放在链接上状态
a:active{}:链接点击时状态
10、伪对象
在HTML文档指定的信息之外,创建了文档的额外信息。
语法
选择符:伪对象{属性:属性值;}