选择器
规则结构:
分两个基本部分 选择器(selector)和声明块(declaration block) 组成
声明块:由一个或多个声明组成,每一个声明都是属性-值对
选择器分为:元素选择器,类选择器,后代选择器,通配选择器,ID选择器,属性选择器,伪类选择器.子元素选择器,相邻兄弟选择器.
元素选择器:往往是html元素,但是在XML允许创造新的标记语言.
eg:h1 p
h1{font-size:14px;}
类选择器:应用样式而不考虑具体涉及的元素.
eg:
.main{font-size:14px;}}
<p class="main">123</p>
ID选择器:和类选择器差不多.区别在于只能在文档运用一次,多次不符合规范,
eg:
#main{font-size:14px;}}
<p id="main">123</p>
通配选择器:运用在全局,但是不推荐.易出错.
eg:
*{font-size:14px;}
后代选择器:运用在父元素的所有子元素上,
eg:
h1 p{font-size:14px;} //运用在h1下的所有p元素
子元素选择器:运用在父元素的第一代子元素上
eg:
h1 > p{font-size:14px;} //运用在h1下的第一代p元素
相邻兄弟选择器:相同父元素下,选择紧跟着另一个元素后的元素
eg:
h1 p{font-size:14px;}//运用在h1和p的父元素下,接下来的P元素
属性选择器:根据元素的属性来选择元素,分为四种:简单属性选择,具体属性选择,部分属性选择,特定元素选择
简单属性选择:
h1[class]{color:red;}
<p class="main">hello world</p>
具体属性选择:
h1[class="main"]{color:red;}
<p class="main">hello world</p>
部分属性选择:
h1[class*="main"]{color:red;}//含有就可以
h1[class^="main"]{color:red;}//main开头的元素
h1[class$="main"]{color:red;}//main结尾的元素
h1[class~="main"]{color:red;}//独立单词的元素
<p class="main qq">hello world</p>
特定属性选择:
*[lang|="en"]{color:red;}
<p lang="en-ss">Hello</p>
伪类元素选择器:为链接选择
eg:
顺序为LVHA
a:link{color:red;}//未访问的链接
a:visited{color:green;}//已访问的链接
a:hover{ color:red;}//悬浮在链接上
a:active{color:yellow;}//激活后的链接
还有 p:first-child 第一个子元素
:first-letter 首字母样式
:first-line 第一行样式
:before 之前插入内容 //body:before{content:"hello ";}
:after 之后插入内容 //body:after{content:"hello ";}
这是我总结的部分选择器基础知识.
更多专业前端知识，请上 【猿2048】www.mk2048.com
