html之后就是css了,本来以为css花里胡哨的那些特效没什么用,学了之后才感觉用途真的很广。
就好比一套别墅一样,html就是房子的一砖一瓦组成的裸框架,css就是基于该房子的装饰,JavaScript就是主人在房子内的一系列操作......
还有一个重要性,学习css能完善一个人的审美level......maybe......我反正是信了
基础选择器有很多,比如标记选择器、id选择器、后代选择器、通配符选择器、类选择器、并集选择器、子元素选择器、兄弟选择器等等,我就挑几个我认为我喜欢用的,总结一波吧
首先是css最基本的选择器的概念,也就是说你要选择什么html元素套上你的css样式呢?(个人理解)
1.标签选择器
<body>
<p>hello world!</p>
</body>
<style>
p{
color: red;
}
</style>
比如上面的代码,css是对<p>这个段落标签设置红色,所以在<body>内的所有<p>元素都会套上这个css样式。当然运行结果当然是红色的hello world!
2.id选择器
<body>
<p id="id1">hello world!</p>
</body>
<style>
#id1{
color: red;
}
</style>
id选择器 顾名思义就是根据id来进行选择,上面代码给标签起名为id1,在css处前置一个#即可,固定语法。常用于对单个元素进行编辑。效果同 标签选择器。
3.类选择器
<body>
<p class="text1">hello world!</p>
</body>
<style>
.text1{
color: red;
}
</style>
类选择器比较类似id选择器, 也是用于单个元素,html元素内添加class属性,css中前置个点。效果同 标签选择器。
4.后代选择器
<body>
<div id="father">
<p>hello zwz1</p>
<div id="son">
<p>hello zwz2</p>
</div>
<p>hello zwz3</p>
</div>
</body>
<style>
#father p{
color: red;
}
</style>
后代选择器就是指定一个父元素,其自身和其所有的子元素都应用该属性,运行效果为3个<p>都为红色。
注:如果只需要直接子元素,不需要子孙元素,就是关系选择器。
如果只需要同级别的兄弟元素,那就是兄弟选择器。
如果是某个元素之后的第一个指定元素,那就是相邻兄弟选择器。
如果是页面全部元素都使用,那就是通配符选择器。
5.并集选择器
<body>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
</body>
<style>
h1,h3{
color: red;
}
</style>
并集选择器主要作用是可以应用于多个不同的html元素,可以缩减代码量。如上方代码对<h1>、<h3>设置红色,然后<h2>不变,还是黑色。效果如下图所示:
注:最后修改于 2020 年 1 月 24 日