第十六章 CSS选择器
2019独角兽企业重金招聘Python工程师标准>>>
一、基本选择器
1、选择所有元素(*)
<html>
<head>
<title>Example</title>
<style type="text/css">
* {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
2、根据类型选择元素
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
3、根据类选择元素(*.class;.class是一样的)
<html>
<head>
<title>Example</title>
<style type="text/css">
.class2 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="class1 class2" href="http://apress.com">Visit the Apress website</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
类型和类结合
<html>
<head>
<title>Example</title>
<style type="text/css">
span.class2 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="class1 class2" href="http://apress.com">Visit the Apress website</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
4、根据ID选择元素
<html>
<head>
<title>Example</title>
<style type="text/css">
#w3canchor {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
5、根据属性选择元素
<html>
<head>
<title>Example</title>
<style type="text/css">
[href] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
attr~=val:属性有多个值 ,其中一个值 为val
<html>
<head>
<title>Example</title>
<style type="text/css">
[class~="class2"] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
attr|=val:属性值为连字符分割的(-)其中第一个字为字符串val
<html>
<head>
<title>Example</title>
<style type="text/css">
[lang|="en"] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a lang="en-us" id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span lang="en-gb" class="class2">apples</span> and oranges.</p>
<a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
二、复合选择器
1、并集选择器
<html>
<head>
<title>Example</title>
<style type="text/css">
a, [lang|="en"] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
2、后代选择器
<html>
<head>
<title>Example</title>
<style type="text/css">
p span {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.<span lang="en-uk" class="class2">apples1</span></p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
3、选择子元素—-直接后代
<html>
<head>
<title>Example</title>
<style type="text/css">
body > * > span, tr > th {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<table id="mytable">
<tr><th>Name</th><th>City</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr><td>Joe Smith</td><td>New York</td></tr>
<tr><td>Anne Jones</td><td>Paris</td></tr>
</table>
<p><p>I like <span lang="en-uk" class="class2">apdddples</span> and oranges.</p></p>
<p>I like <span lang="en-uk" class="class2">apples111</span> and oranges.</p>
<table id="othertable">
<tr><th>Name</th><th>City</th></tr>
<tr><td>Peter Pererson</td><td>Boston</td></tr>
<tr><td>Chuck Fellows</td><td>Paris</td></tr>
<tr><td><span lang="en-uk" class="class2">apples11</span>Jane Firth</td><td>Paris</td></tr>
</table>
</body>
</html>
4、选择兄弟元素
p+a:相邻兄弟:紧跟在p元素之后的
<html>
<head>
<title>Example</title>
<style type="text/css">
p + a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
<a href="http://google.com">Visit Google</a>
</body>
</html>
p~a:普通兄弟
<html>
<head>
<title>Example</title>
<style type="text/css">
p ~ a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
<a href="http://google.com">Visit Google</a>
</body>
</html>
三、伪元素选择器
:匹配文本块的首行
<html>
<head>
<title>Example</title>
<style type="text/css">
::first-line {
background-color:grey;
color:white;
}
</style>
</head>
<body>
<p>Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created equal.</p>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
:文本块首字母
<html>
<head>
<title>Example</title>
<style type="text/css">
::first-letter {
background-color:grey;
color:white;
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<p>Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created equal.</p>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
:before和会生成内容并插入到文档
<html>
<head>
<title>Example</title>
<style type="text/css">
a:before {
content: "Click here to "
}
a:after {
content: "!"
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
css计数器
<html>
<head>
<title>Example</title>
<style type="text/css">
div {
counter-reset: paracount;//默认值为1;paracount 10
}
p:before {
content: counter(paracount) ". ";
counter-increment: paracount;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<div>
<p>I like <span>apples</span> and oranges.</p>
<p>I also like <span>mangos</span> and cherries.</p></div>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
转载于//my.oschina.net/u/2285087/blog/813217
还没有评论,来说两句吧...