CSS选择器
2017-07-17 19:53
232 查看
1关系选择器
（1）后代选择器：可以选择一个元素的
后代元素。这个后代元素包括儿子、孙子...........
写法：E（元素）
F（父元素）
案例
.content a{
font-size: 30px;
}
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
（2）子元素选择器：某一个元素选中直接后代元素。
写法：E > F（“>”英文状态输入下输入）
<styletype="text/css">
.content > a{
font-size: 30px;
}
</style>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
2并选择器
将相同的样式放在一起，类名直接用英文逗号分隔。
写法：E , E （中间用英文的逗号分隔）
案例：
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid yellow;
}
.div2{
border: 1px solid blue;
}
<body>
<divclass="div1 ">我是div1</div>
<divclass="div2">我是div2</div>
</body>
3通配符选择器
通配符选择器可以选中页面所有的标签
写法：*{}
案例：
<styletype="text/css">
*{
padding: 0;
margin: 0;
}
</style>
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。
4兄弟选择器
（1）写法：E + F 选中最近的一个“弟弟”元素。不选中自己。
.go-to+a{
font-size: 20px;
}
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<ahref="http://www.huadianedu.com">前往现场</a>
<a class="go-to"href="http://www.huadianedu.com">前往现场1</a>
<ahref="http://www.huadianedu.com">前往现场2</a>
<ahref="http://www.huadianedu.com">前往现场3</a>
</div>
</body>
（2）写法：E ~ F 选中所有的“弟弟”元素，不选中自己
案例：
<styletype="text/css">
div{
min-height: 30px;
max-width: 300px;
background-color:white;
margin-left: 50px;
border: 1px solid red;
}
#myself ~ div{
background-color:yellowgreen;
}
</style>
<divid="myself">
<p>我</p>
<div>
<p>大儿子</p>
<div>大孙子</div>
<div>二孙子</div>
</div>
<div>二儿子</div>
<div>小儿子</div>
</div>
<div>二弟</div>
<div>三弟</div>
5伪类、伪元素选择器
1伪类选择器：条件一、根据元素不同的状态，自动选择不同的样式。或条件二、直接添加一个class（类），给这个class设定特殊的样式
li:first-child
a:hover:鼠标划过的时候添加样式
a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）
a:link :链接地址未被访问时候添加的状态。必须设置href属性。
a:vistied：链接地址点击之后添加的样式。必须设置href属性
input:focus :拥有键盘输入获取焦点时候添加的样式
2伪元素选择器：
（2.1）需要设置特殊效果的内容放到一个元素（标签）里面span
（2.2）在添加一个class，对class设置特殊样式。
P:first-letter、p:first-line、p:before、p:after
E:before
li:after{
content:"。";
color: blue;
}
（1）后代选择器：可以选择一个元素的
后代元素。这个后代元素包括儿子、孙子...........
写法：E（元素）
F（父元素）
案例
.content a{
font-size: 30px;
}
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
（2）子元素选择器：某一个元素选中直接后代元素。
写法：E > F（“>”英文状态输入下输入）
<styletype="text/css">
.content > a{
font-size: 30px;
}
</style>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
2并选择器
将相同的样式放在一起，类名直接用英文逗号分隔。
写法：E , E （中间用英文的逗号分隔）
案例：
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid yellow;
}
.div2{
border: 1px solid blue;
}
<body>
<divclass="div1 ">我是div1</div>
<divclass="div2">我是div2</div>
</body>
3通配符选择器
通配符选择器可以选中页面所有的标签
写法：*{}
案例：
<styletype="text/css">
*{
padding: 0;
margin: 0;
}
</style>
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
<ahref="http://www.huadianedu.com">前往现场</a>
</div>
<ahref="http://www.huadianedu.com">查看原文</a>
</body>
注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。
4兄弟选择器
（1）写法：E + F 选中最近的一个“弟弟”元素。不选中自己。
.go-to+a{
font-size: 20px;
}
<body>
<h1>中央气象台继续发布高温橙色预警局地超40度</h1>
<divclass="content">
<ahref="http://www.huadianedu.com">前往现场</a>
<a class="go-to"href="http://www.huadianedu.com">前往现场1</a>
<ahref="http://www.huadianedu.com">前往现场2</a>
<ahref="http://www.huadianedu.com">前往现场3</a>
</div>
</body>
（2）写法：E ~ F 选中所有的“弟弟”元素，不选中自己
案例：
<styletype="text/css">
div{
min-height: 30px;
max-width: 300px;
background-color:white;
margin-left: 50px;
border: 1px solid red;
}
#myself ~ div{
background-color:yellowgreen;
}
</style>
<divid="myself">
<p>我</p>
<div>
<p>大儿子</p>
<div>大孙子</div>
<div>二孙子</div>
</div>
<div>二儿子</div>
<div>小儿子</div>
</div>
<div>二弟</div>
<div>三弟</div>
5伪类、伪元素选择器
1伪类选择器：条件一、根据元素不同的状态，自动选择不同的样式。或条件二、直接添加一个class（类），给这个class设定特殊的样式
li:first-child
a:hover:鼠标划过的时候添加样式
a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）
a:link :链接地址未被访问时候添加的状态。必须设置href属性。
a:vistied：链接地址点击之后添加的样式。必须设置href属性
input:focus :拥有键盘输入获取焦点时候添加的样式
2伪元素选择器：
（2.1）需要设置特殊效果的内容放到一个元素（标签）里面span
（2.2）在添加一个class，对class设置特殊样式。
P:first-letter、p:first-line、p:before、p:after
E:before
li:after{
content:"。";
color: blue;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 