CSS选择器【上】
2016-08-03 15:18
169 查看
效果：
index.html
<!DOTTYPE html>
<html lang ="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS选择器[上]</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="abc">这是一个<span><b>段落</b></span></p>
<b class="abc">这是一个加粗</b>
<span class="abc def">这是一个什么都没有</span>
<b class="abc">这是一个加粗</b>
<a href="http://www.baidu.com">百度</a>
<a href="javascript:void(0)">好搜</a>
<a href="http://www.360.cn"></a>
<i lang="en-us">HTML5</i>
/////////复合选择器
<input type="text">
<input type="password">
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
<p>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</p>
<span>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</span>
<div>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</div>
<p>this is...</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
style.css
@charset "utf-8";
///1通用选择器还包括了body和html,不建议使用，容易混乱或修改原先
*{
border:1px solid red;
}
///2元素选择器
p{
color:red;
}
///3段落选择器
#abc{
color:green;
}
///（类选择器用法一）
.abc{
color:blue;
}
///限定每个元素使用类选择器（类选择器用法二）
b.abc{
color:orange;
}
///类选择器可以调用多个样式，中间用空格隔开进行层叠（类选择器用法三）
.abc{
color:red;
}
.def{
font-size:30px;
}
///属性选择器
[href]{
color:red;
}
///属性匹配相关的属性值
[type="password"]{
border:1px solid red;
}
///属性值开头匹配的属性选择器（以http开头的均适用）
[href^="http"]{
color:red;
}
///属性值结尾匹配的属性选择器（以.cn结尾的均适用）
[href$=".cn"]{
color:red;
}
///属性值包含指定字符的属性选择器（有baidu的均适用）
[href*="baidu"]{
color:red;
}
///属性值具有多个值时，匹配其中一个值的属性选择器
[class~="def"]{
color:red;
}
///[lang|="en"]{
color:red;
}
/////////复合选择器
///1分组选择器
p,b,i,span{
color:red;
}
#abc,.abc,i,span{
color:blue;
}
///2后代选择器
///后代选择器(p里面内嵌了一个b)
p b{
color:red;
}
///子选择器，必须是儿子那一代，不能是孙子
p>b{
color:blur;
}
///后代均适用
ul li{
border:1px solid red;
}
///仅儿子那辈适用
ul>li{
border:1px solid red;
}
///相邻兄弟选择器
b+p{
color:red;
}
///普通兄弟选择器
p~b{
color:red;
}
/////////伪元素选择器
1块级首行p或者div
::first-line{
color:red;
}
2块级首字母
::first-letter{
clolr:red;
}
1块级首行p或者div
p::first-line{
color:red;
}
2块级首字母
p::first-letter{
clolr:red;
}
3///::before文本前插入
a::before{
content:'点击';
}
4///::after文本后插入
a::after{
content:'搜索'；
}
ppt:
index.html
<!DOTTYPE html>
<html lang ="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS选择器[上]</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="abc">这是一个<span><b>段落</b></span></p>
<b class="abc">这是一个加粗</b>
<span class="abc def">这是一个什么都没有</span>
<b class="abc">这是一个加粗</b>
<a href="http://www.baidu.com">百度</a>
<a href="javascript:void(0)">好搜</a>
<a href="http://www.360.cn"></a>
<i lang="en-us">HTML5</i>
/////////复合选择器
<input type="text">
<input type="password">
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
<p>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</p>
<span>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</span>
<div>aalfkeiakfjasfjjjjjjjjjjjjjjjjsfffffffffffffffffffffffffeeeeeeeeeeeeeeeeeeeeeeee</div>
<p>this is...</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
style.css
@charset "utf-8";
///1通用选择器还包括了body和html,不建议使用，容易混乱或修改原先
*{
border:1px solid red;
}
///2元素选择器
p{
color:red;
}
///3段落选择器
#abc{
color:green;
}
///（类选择器用法一）
.abc{
color:blue;
}
///限定每个元素使用类选择器（类选择器用法二）
b.abc{
color:orange;
}
///类选择器可以调用多个样式，中间用空格隔开进行层叠（类选择器用法三）
.abc{
color:red;
}
.def{
font-size:30px;
}
///属性选择器
[href]{
color:red;
}
///属性匹配相关的属性值
[type="password"]{
border:1px solid red;
}
///属性值开头匹配的属性选择器（以http开头的均适用）
[href^="http"]{
color:red;
}
///属性值结尾匹配的属性选择器（以.cn结尾的均适用）
[href$=".cn"]{
color:red;
}
///属性值包含指定字符的属性选择器（有baidu的均适用）
[href*="baidu"]{
color:red;
}
///属性值具有多个值时，匹配其中一个值的属性选择器
[class~="def"]{
color:red;
}
///[lang|="en"]{
color:red;
}
/////////复合选择器
///1分组选择器
p,b,i,span{
color:red;
}
#abc,.abc,i,span{
color:blue;
}
///2后代选择器
///后代选择器(p里面内嵌了一个b)
p b{
color:red;
}
///子选择器，必须是儿子那一代，不能是孙子
p>b{
color:blur;
}
///后代均适用
ul li{
border:1px solid red;
}
///仅儿子那辈适用
ul>li{
border:1px solid red;
}
///相邻兄弟选择器
b+p{
color:red;
}
///普通兄弟选择器
p~b{
color:red;
}
/////////伪元素选择器
1块级首行p或者div
::first-line{
color:red;
}
2块级首字母
::first-letter{
clolr:red;
}
1块级首行p或者div
p::first-line{
color:red;
}
2块级首字母
p::first-letter{
clolr:red;
}
3///::before文本前插入
a::before{
content:'点击';
}
4///::after文本后插入
a::after{
content:'搜索'；
}
ppt:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 