您的位置：首页 > Web前端 > CSS

CSS选择器总结

2015-07-10 11:45 746 查看
通用选择器（*）——选择所有元素（css2）；

类型选择器（element）——根据类型选择元素（css1）；

类选择器（.class）——根据全局属性class的值选择元素（css1）；

id选择器（#id）——根据全局属性id的值选择元素（css1）；

属性选择器（[attr]）——基于属性选择元素（css2）；

([attr="val"])——选择定义attr属性，且属性值为val的元素（css2）；

([attr^="val"]）——选择定义attr属性，且属性值以字符串val打头的元素（css3）；

([attr$="val"]）——选择定义attr属性，且属性值以字符串val结尾的元素（css3）；

([attr*="val"]）——选择定义attr属性，且属性值包含字符串val的元素（css3）；

([attr~="val"]）——选择定义attr属性，且属性值具有多个值，其中一个为字符串val的元素（css2）；

([attr|="val"]）——选择定义attr属性，且属性值为连接符分割的多个值，其中第一个为字符串val的元素（css2）；

并集选择器（用逗号隔开）——同时匹配多个选择器（css1）；

后代选择器（用空格隔开）——选择元素的后代元素（css1）；

子代选择器（用>连接）——选择元素的子元素（css2）；

相邻兄弟选择器（用+连接）——选择紧跟在某元素之后的兄弟元素（css2）；

普通兄弟选择器（用~连接）——选择某元素之后的兄弟元素（不限于相邻）（css3）；

::first-line选择器——选择文本块的首行文本（css1）；

::first-letter选择器——选择文本块的首字母（css1）；

:before和:after选择器——在元素之前或之后插入内容（css2）；

使用counter函数(CSS计数器)——向元素插入数字内容；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<style type="text/css">
::first-line{
background-color: grey;
color: white;
}
::first-letter{
background-color: grey;
border:thin black solid;
padding: 4px;
}
a:before{
content: "请点击";
}
a:after{
content: "!";
}
body{
counter-reset: paracount;
}
p:before{
content:counter(paracount) ". ";
counter-increment:paracount 2 ;
}
</style>
<body>
<p>
远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p>
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。
</p>
<a href="http://www.shydzc.com">访问远地资产</a>

</body>
</html>


:root——选择文档中根元素(css3)；

:first-child——匹配其父元素定义的第一个子元素(css2)；

:last-child——匹配其父元素定义的最后一个子元素(css3)；

:only-child——匹配父元素包含的唯一子元素(css3)；

:only-of-type——匹配父元素定义类型的唯一子元素(css3)；

:nth-child(n)——选择父元素的第n个子元素(css3)；

:nth-last-child(n)——选择父元素的倒数第n个子元素(css3)；

:nth-of-type(n)——选择父元素定义类型的第n个子元素(css3)；

:nth-last-of-type(n)——选择父元素定义类型的倒数第n个子元素(css3)；

:enabled——选择启用状态的元素（css3）；

:disabled——选择禁用状态的元素（css3）；

:checked——选择被选中的input元素(只用于单选按钮和复选框)（css3）；

:default——选择默认元素（css3）；

:valid——根据输入验证选择有效的input元素（css3）；

:invalid——根据输入验证选择无效的input元素（css3）；

:in-range——选择在指定范围之内受限的input元素（css3）；

:out-of-range——选择在指定范围之外受限的input元素（css3）；

:required——匹配具有required属性的input元素（css3）；

:optional——匹配没有required属性的input元素（css3）；

:link——选择链接元素（css1）；

:visited——选择用户已访问的链接元素（css1）；

:hover——匹配用户鼠标悬停在其上的任意元素（css2）；

:active——匹配当前被用户激活的元素（css2）；

:focus——匹配当前获得桥店的元素（css2）；

:not(选择器)——对括号内选择器的选择取反（css3）；

:empty——匹配没有定义任何子元素的元素（css3）；

:lang(目标语言)——选择基于lang全局属性值的元素（css1）；

:target——匹配url片段标识符指向的元素（css3）；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<style type="text/css">
/*
:root{
border: thin black solid;
padding: 4px;
}
*/
/*
p>span:first-child{
border: thin black solid;
padding: 4px;
}
*/
/*
:only-child{
border: thin black solid;
padding: 4px;
}*/
/*
:only-of-type{
border: thin black solid;
padding: 4px;
}
*/
/*
body>:nth-child(2){
border: thin black solid;
padding: 4px;
}
*/
/*
:disabled{
border: thin black solid;
padding: 4px;
color: #005599;
}
*/
/*
:checked+span{
background-color: red;
color: white;
padding: 5px;
border: medium solid black;
}
:default{
outline: medium solid red;
}
*/
/*
label>input:invalid{
outline: medium solid red;
}
label>input:valid{
outline: medium solid green;
}
*/
/*
:link{
border: thin black solid;
background-color: lightgray;
padding: 4px;
color: red;
}
:visited{
background-color: grey;
color: white;
}
:hover{
border: thin green solid;
padding: 8px;
}
:active{
border: thin red solid;
padding: 15px;
}
*/
/*
a:not([href*="sina"]){
border: thin black solid;
padding: 4px;
}
*/
:target{
border: thin black solid;
padding: 4px;
color: red;
}
</style>
<body>
<p>
<span>远地</span>本着“构筑诚信，永续发展”的理念为客户提供专业的<span>理财服务、</span>财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p>
<span>远地</span>秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。
</p>
<a href="http://www.shydzc.com">访问远地资产</a>
<p id="mytarget">我喜欢新浪</p>
<a href="http://www.sina.com" id="sina">访问新浪</a>

<textarea>已为200多家企业包括国企</textarea>
<textarea disabled>民企和院所提供了企业转型升级</textarea>
<form method="post" action="http://www.shydzc.com">
<p>
<label for="apples">你喜欢苹果吗？</label>
<input type="checkbox" id="apples" name="apples"/>
<span>如果选择，此处变红</span>
</p>
<input type="submit" value="Submit">
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<form method="post" action="http://www.shydzc.com">
<p>
<label for="name">姓名：
<input required id="name" name="name"/>
</label>
</p>
<p>
<label for="city">城市：
<input required id="city" name="city"/>
</label>
</p>
<input type="submit" value="Submit">
</form>
</body>
</html>
ps:对于标示为css3的选择器需考虑是否得到了主流浏览器的支持，需谨慎使用，具体可查看http://caniuse.com.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航