css的选择器
Posted lilyxiaoyy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css的选择器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的选择器 </title> <style> p:first-lettercolor:red; p:beforecontent:"我是段落前的内容 "; color: green; p:aftercontent: ‘我是段落后的内容 ‘;color: blue; </style> </head> <body> <p><strong>我是段落内容 </strong></p> <dl> <dt><strong>CSS的选择器</strong></dt> <dd> <dl> <dt><strong>基本选择器</strong></dt> <dd>标签选择器 div</dd> <dd>id选择器 .box</dd> <dd>类选择器 #box</dd> <dt><strong>高级选择器</strong></dt> <dd>后代选择器 div p 选中的是子子孙孙</dd> <dd>子代选择器 div>p 选中的是儿子</dd> <dd>组合选择器(并集选择器) body,div,p,ul,ol,dl,form,table,span,label,imgpadding:0; margin:0;</dd> <dd>交集选择器 第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active</dd> <dd>属性选择器 input[type=text] label[for="username"]</dd> <dd>通配符选择器 *padding:0; margin:0;</dd> <dd> <dl> <dt>reset.css</dt> <dd>body,div,p,ul,ol,dl,form,table,span,label,imgpadding:0; margin:0;</dd> <dd>atext-decoration:none;</dd> <dd>inputborder:0; outline:0;</dd> </dl> </dd> <dd> <dl> <dt>伪类选择器(爱恨准则)</dt> <dd>a:link 没有被访问a标签的样式</dd> <dd>a:visited 访问过后的a标签样式</dd> <dd>a:hove 鼠标悬停时a标签的样式</dd> <dd>a:active 鼠标按住时a标签的样式</dd> </dl> </dd> <dd> <dl> <dt>伪元素选择器</dt> <dd>p:first-letter 设置第一个首字母样式</dd> <dd>p:before 在...之前,添加内容</dd> <dd>p:after 在...之后,添加内容</dd> </dl> </dd> </dl> </dd> </dl> </body> </html>
我是段落内容
- CSS的选择器
- 基本选择器
- 标签选择器 div
- id选择器 .box
- 类选择器 #box
- 高级选择器
- 后代选择器 div p 选中的是子子孙孙
- 子代选择器 div>p 选中的是儿子
- 组合选择器(并集选择器) body,div,p,ul,ol,dl,form,table,span,label,imgpadding:0; margin:0;
- 交集选择器 第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
- 属性选择器 input[type=text] label[for="username"]
- 通配符选择器 *padding:0; margin:0;
- reset.css
- body,div,p,ul,ol,dl,form,table,span,label,imgpadding:0; margin:0;
- atext-decoration:none;
- inputborder:0; outline:0;
- 伪类选择器(爱恨准则 LoVe HAte)
- a:link 没有被访问a标签的样式
- a:visited 访问过后的a标签样式
- a:hove 鼠标悬停时a标签的样式
- a:active 鼠标按住时a标签的样式
- 伪元素选择器
- p:first-letter 设置第一个首字母样式
- p:before 在...之前,添加内容
- p:after 在...之后,添加内容
以上是关于css的选择器的主要内容，如果未能解决你的问题，请参考以下文章