赞
踩
教学讲解视频:视频地址
语法结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有的这类标签,并设置样式。
注意
一类
标签,而不是单独的一个。无论嵌套关系有多深
,都能够找到对应的标签。<style> p { color: red; } </style> <body> <div> 111 <p> 2222 <div> 333 <p>444</p> </div> </p> </div> </body>
语法结构:.类名{css属性名:属性值;}
作用:通过类名,找到页面中所有的带有这个类名的标签,并设置样式。
注意
都有
class属性,class属性的属性值成为类名。数字,字母,下划线,中划线
组成,但是不能以数字开头
。多个
类名,类名之间用空格
隔开。重复
,一个类选择器可以同时选中多个
标签。<style> .class-one { color: red; } .class-two { font-weight: bold; } </style> <body> <div class="class-one"> 111 <div> <div class="class-one class-two"> 222 </div> </div> </div> </body>
语法结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,并设置样式。
注意
唯一
的,不可重复的。一个
标签上只能有一个
id属性值。一个
id选择器只能选中一个
标签。<style>
#id-one {
color: red;
}
</style>
<body>
<div id="id-one">
111
</div>
</body>
语法结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,然后设置样式。
注意
极少
,只有在特殊的情况
下才会使用。<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<div>
111
</div>
</body>
语法结构:选择器1选择器2{css样式}
作用:选中页面中同时满足多个选择器的标签。
注意
紧挨
着的。标签选择器必须放在前面
。<style> div.class-one { color:red; } div#id-one { color:green; } </style> <body> <div class="class-one"> 111 </div> <div id="id-one"> 222 </div> <div> 333 </div> </body>
语法结构:选择器1,选择器2{css样式}
作用:同时选择多组标签,设置相同的样式。
注意
,
隔开。<style> p, div, .class-one { color: red; } </style> <body> <div class="class-one"> 111 </div> <div> 222 </div> <p> 333 </p> </body>
作用:选中含有指定属性的元素。
<style>
[title] {
color: red;
}
</style>
<body>
<div title="111">
111
</div>
<div>
222
</div>
</body>
作用:选中含有指定属性和指定
属性值的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title=aaa] {
color: red;
}
</style>
<body>
<div title="aaa">
aaa
</div>
<div title="bbb">
bbb
</div>
</body>
作用:选中含有指定属性和指定属性值开头
的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title^=aaa] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="aa">
bbb
</div>
</body>
作用:选中含有指定属性和指定属性值结尾
的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title$=aaa] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="bbb-aaa">
bbb
</div>
</body>
作用:选中指定属性和含有
指定属性值的元素。
注意
数字,字母,下划线,中划线
组成,并且不能以数字
开头。<style>
[title*=a] {
color: red;
}
</style>
<body>
<div title="aaa-one">
aaa
</div>
<div title="bbb-aaa">
bbb
</div>
</body>
作用:选择某元素后面的第一代
子元素。
<style> .class-one > .class-two { color: red; } </style> <body> <div class="class-one"> <div class="class-two"> aaa </div> <div> <div class="class-two"> bbb </div> </div> </div> </body>
作用:选择某元素后面的所有
子元素。
<style> .class-one .class-two { color: red; } </style> <body> <div class="class-one"> <div class="class-two"> aaa </div> <div> <div class="class-two"> bbb </div> </div> </div> </body>
作用:可选择紧接
在另一元素后的元素,且二者有相同
父元素。
<style>
.class-one+.class-two {
color: red;
}
</style>
<body>
<div class="class-one">
aaa
</div>
<div class="class-two">
bbb
</div>
</body>
作用:选取某个元素之后的所有相同
元素。
注意
.class-one ~ h2
这句就是选取 .class-one后面所有
的 h2。同一个
父元素内,被选取的元素不必直接紧随
。<style> .class-one ~ .class-two { color: red; } </style> <body> <div class="class-one"> aaa </div> <div> <div class="class-two"> bbb </div> </div> <div class="class-two"> ccc </div> </body>
请浏览博客:CSS中伪类详解和用法例子详解
请浏览博客:CSS中伪元素详解和用法例子详解
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。