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

Chapter2 选择器

2016-02-29 11:28 477 查看

CSS权威指南

Chapter1

1．块级元素：p、div、列表项

2．行内元素：strong、em、span等

3．Css的display属性可取的值，默认为inline，行内元素

4．Link标签必须放在head中，link的meta媒体属性，目前支持较为广泛的是all,screen,print

Link的rel=alternate stylesheet时为候选样式 title=default的CSS文件为默认样式表

5．@import指令：出现在style容器中，放在规则的前面@import url(st1.css) 媒体类型

6．内联样式：

Chapter2 选择器

1．CSS关键字

2．选择器分组：通用选择器 *星号

类选择器：

ID选择器：可能区分大小写

属性选择器：

<!doctype>
<html>
<head>
<meta charset="UTF8">
<title>CSS选择器</title>
<style type="text/css">
#ab{
color: red;
}
.warn.danger{
color: yellow;
}
.danger{
color: blue;
}
h4[class]{
background: yellow;
}
a[href="bb"]{
color: pink;
}
h3[class~="my"]{
color: white;
background: pink;
}
h3[title*="in"]{
color: green;
}
h3[title^="in"]{
color: orange;
}
h3[title$="in"]{
color: blue;
}
p[title|="en"]{
color: grey;
}
H1 em{
color: grey;
}
H1 > em{
color: brown;
}
H1 + p{
color: green;
}
LI + LI{
color: pink;
}
a:visited{
color: pink;
}
a:link{
color: blue;
}
h3:first-letter{
font-weight: bold;
font-size: 200%;
}
h2:before{
content: "**";
color: silver;
}
</style>
</head>
<body>
<p id="a" class="warn danger">a</p>
<p id="ab">ab</p>
<h4 class="a">属性选择器</h4>
<h4 class="b">举例</h4>
<h4 class="c">如下
h4[class]{
background: yellow;
}
多个属性
a[href][class]{
background: red;
}
</h4>
<a href="aa">选择特定的属性值选择器,要求属性值和给定值完全相同</a>
<a href="bb">
a[href="bb"]{
color: pink;
}
</a>
<h3>部分属性值选择器,属性中包含给定值即可匹配</h3>
<h3 class="my style">
h3[class~="my"]{
color: white;
background: pink;
}
</h3>
<h3>子串属性匹配器，开头结尾和包含</h3>
<h3 title="interest">开头
h3[title^="in"]{
color: orange;
}
</h3>
<h3 title="interest in">结尾
h3[title$="in"]{
color: blue;
}
</h3>
<h3 title="interest">包含
h3[title*="in"]{
color: green;
}
</h3>
<p>
特定属性选择器
p[title|="en"]{
color: grey;
}
</p>
<p title="en">title为en</p>
<p title="en-or">title以en-开头</p>
<p title="noo">title不包含en</p>
<H1>后代选择器，上下文选择器</H1>
<H1>test<p><em>
H1 em{
color: grey;
}
</em></p></H1>
<H1>
选择子元素
<em>
H1 > em{
color: brown;
}
</em>
</H1>
<a></a>
<p>我是前面的兄弟元素，不被选择</p>
<H1>
选择兄弟元素
<em>
H1 + p{
color: green;
}
</em>
</H1>
<p>我是兄弟元素</p>
<ol>
<LI>1</LI>
<LI>1</LI>
<LI>1</LI>
</ol>
<b>伪类和伪元素</b>
<p>静态伪类</p>
<a href="http://yjxt.bupt.edu.cn/Gstudent/Default.aspx?UID=2015111438">015111438</a>
<a href="http://baidu.com">015111438</a>
<p>动态伪类，:focus,:hover:active</p>
<P>:first-child</P>
<p>设置首字母样式first-letter,第一行first-line,</p>
<h3>
Tim Jone
h3:first-letter{
font-weight: bold;
font-size: 200%;
}
</h3>
<p>插入元素：before</p>
<h2>
h2:before{
content: "**";
color: sliver;
}
</h2>
</body>
<script type="text/javascript">
window.onload = function(){
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航