网页选择器-30天学会HTML+CSS,制作精美网站

在写网页样式时,最重要的就是选择器的使用,写得好容易理解,修改没烦恼,也可以让网页快速呈现效果。以下会介绍css有哪些选择器及使用方法

通用选取器

样式套用在所有元素上

*{...}

范例:将所有元素的文字颜色套用蓝色

<h1>title</h1>
<h2>sub title</h2>
<p>content</p>
*{
	color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120531AjASQ1TXT.png

标签选择器

使用html标签做选择器,将档案里面有使用到的标签直接修改样式,适合用来定义全站通用的样式。通常都会建议设定样式时给予class名称。

element{...}

范例:设定<ul>不要项目标签,当所有页面里有使用到<ul>就都不会有项目符号,除非另外各别做设定,范例中我将一个<ul>class名称设定为"hastype",并给予它disc的样式。

<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
<ul class="hastype">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
ul{
	list-style-type: none;
}
.hastype{
	list-style-type: disc;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053n8ExhQLM9i.png

class选择器

在网页中,会有两个地方以上使用到相同的样式时,就可以使用class选择器。

class选择器会使用「.」加上名称,通常也会建议html标签给有意义的名称,避免针对标签做样式修改时,只要有使用到的地方就会被套用样式。

.classname{....}

范例:我要设定class="box"里面的<p>标签字体大小为14px、颜色为#999,但如果我指针对<p>标签做设定,所有使用到<p>标签的样式都会被套用

<div class="box">
	<h2 class="title">title</h2>
	<p>content2</p>
</div>
<ul>
	<li><p>item1</p></li>
	<li><p>item2</p></li>
	<li><p>item3</p></li>
</ul>
.title{
	margin-bottom:5px;
	font-size:18px;
}
p{
	font-size:14px;
	color:#999;
	margin: 0;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053xUv0GVkVfP.png
所以要将样式改为 .box p{...},box名称区块下层的<p>标签

.box > p{
	font-size:14px;
	color:#999;
	margin: 0;
}

id选择器

在一个页面里,id名称不可以重复,是唯一值,就像身分证一样不会重复。id选择器使用「#」加上名称,比较常用在javascript动态网页来控制html组件,用法与class选择器相同,只是「.」改为「#」。

#idname{....}

群组选择器

同时设定多个选取器样式,并用「,」逗号隔开,这样可以避免重复写相同的css样式

element,element{...}

范例:将.box head及.list li背景色设为#efefef

<div class="box">
	<div class="head">head</div>
	<div class="body">
		<p>content</p>
	</div>
</div>

<ul class="list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
.box .head, .list li{
	background-color:#efefef;
}
p{
	margin:0;
}
.list li{
	margin-bottom:5px;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120531IGQXLxxZi.png

组合选择器

後代选择器

E F,选取E元素内的F元素,以「半形空格」隔开两个元素

E F{...}

范例:选取元素内的元素

<ul class="list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
.list li{
	color: #333;
}

子选择器( > )

与後代选择器不同,子选择器只选取向下一层的子元素,选取E元素下一层的F元素,以「>」隔开两个元素

E > F{...}

范例:将box名称的下一层元素文字设定为蓝色

<div class="box">
	<p>content</p>
	<ul class="list">
		<li><p>item1</p></li>
		<li><p>item2</p></li>
		<li><p>item3</p></li>
	</ul>
</div>
.box > p{
		color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053JdL6WvAL9U.png
如果只针对box名称内的元素,所有使用元素的都会变蓝色文字

<div class="box">
	<p>content</p>
	<ul class="list">
		<li><p>item1</p></li>
		<li><p>item2</p></li>
		<li><p>item3</p></li>
	</ul>
</div>
```css
.box  p{
    color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053HSEdO1ETKn.png

相邻选择器( + )

只会选取E元素相邻的第一个F元素

E + F{....}

我自己比较常用到的地方是做选单的样式,设定元素与元素中间有线条做分隔

<nav class="navbar-box">
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
</nav>
.navbar-box{
	display:inline-block;
}
.navbar-box a{
	color:#333;
	text-decoration: none;
	padding:0 10px;
}
.navbar-box a+a{
	border-left: 1px solid #ccc;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120534bBxZpLymY.png

间接选择器( ~ )

设置E元素之後的F元素

E ~ F{...}

范例:将red-after名称之後的都设为红色文字

<ul>
	<li>item1</li>
	<li>item2</li>
	<li class="red-after">item3</li>
	<li>item4</li>
	<li>item5</li>
</ul>
.red-after ~ li{
	color: red;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053HqHlLu9Vvr.png
参考资料:
https://medium.com/ui-ux练功坊/css选择器介绍-1-ec19bc5b33a
https://injerry.pixnet.net/blog/post/38847966


<<:  [前端暴龙机,Vue2.x 进化 Vue3 ] Day13.Class 与 Style 绑定

>>:  [Day10]-字典2

Day30-结语

参赛心得 很感动终於到了最後一天,虽然之前已经参加过两次了,但可能因为这次是边工作边参加,所以比我预...

Day-29 请说明 RDBMS 和 NOSQL 是什麽?

传说中的资料库来了,我也不太熟,所以大家快来认识一下吧! 据说面试中有提到资料库就会考这题 RDB...

做人如果没梦想,跟咸鱼有什麽区别!

简单自我介绍! 我是一位正在参加五倍红宝石勤奋转职的菜鸟工程师, 这也是我第一次参加IT铁人赛!同时...

在 Rust 中使用 log: log / slog / tracing

最近在写一些 side project 时碰到了一些 bug ,这个时候除了用 println! 大...

Day23-pytorch(6)iris资料集示范classifier模型pytorch完整训练过程

先import各种会用到的套件 载入iris资料集 此载入iris方式我是使用别人提供的方法 此资料...