编程教育资源分享平台

网站首页 > 后端开发 正文

前端培训 CSS选择器及文字段落属性背景属性和列表属性(上)

luoriw 2024-02-01 14:29:12 后端开发 13 ℃ 0 评论

我们已经讲了一部分选择器了,今天还要继续讲一些选择器,以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式,比如背景图像,文字间距等,所以我们还讲些样式。通过以下几点介绍:

√ 关系选择器

√ 动态伪类选择器

√ 结构性伪类选择器

√ 文字属性

√ 段落属性

√ 背景属性

√ 列表属性

好了,我们先来看一下关系选择器

一、关系选择器

好了,我们一 一介绍一下:

1.E F:后代选择器,找到页面中相应的的子元素及孙子及重孙子元素,因为这些元素都是后代元素,我们把标签的第一层嵌套的元素叫子元素,再一层嵌套及以后嵌套的元素及子元素都叫后代元素。(当然也是相对的)。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种,我们先理一下元素之间的层次关系

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

</style>

</head>

<body>

<div>

<p>相关的内容<span>我是div的孙子元素(后代元素),但是我也是p的儿子,这就体现出“相对”了</span></p>

<span>我是div的儿子,并且我是p紧邻的兄弟元素,我还是p后面的所有的兄弟元素</span>

<span>我是p后面的所有的兄弟元素</span>

</div>

</body>

</html>

好了,了解所有元素之间的关系后,我们就可以通过相关的选择器来改变他们的样式了。

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div span{

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>相关的内容<span>我是div的孙子元素(后代元素)</span></p>

<span>我是div的儿子</span>

<span>我是div的儿子</span>

</div>

</body>

</html>

页面效果

2.E>F子元素选择器 找到页面中相应元素的子元素

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div span{

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>相关的内容<span>我是div的孙子元素(后代元素)</span></p>

<span>我是div的儿子</span>

<span>我是div的儿子</span>

</div>

</body>

</html>

页面效果

3.E+F 选取当前元素后一个兄弟元素

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

p+span{

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>相关的内容<span>我是div的孙子元素(后代元素)</span></p>

<span>我是p的紧邻的元素</span>

<span>我是p后面的所有的元素</span>

</div>

</body>

</html>

页面效果

4. E ~ F 选取当前元素后所有的兄弟元素

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

p~span{

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>相关的内容<span>我是div的孙子元素(后代元素)</span></p>

<span>我是p后面的所有的元素</span>

<span>我是p后面的所有的元素</span>

</div>

</body>

</html>

页面效果

关系选择器我们经常使用,因为我们写代码的时候,经常这样写:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

</head>

<body>

<div>

<h3>我是h3标签</h3>

<p>我是段落标签</p>

<input type="button" value="提交" />

</div>

<div>

<h3>我是h3标签</h3>

<p>我是段落标签</p>

<input type="button" value="提交" />

</div>

</body>

</html>

观察上面的两段代码,以后我们写代码经常会这样写,一模一样的代码,我们设置第一个div的h3,p,input标签,第二个div里的h3,p,input标签不一样怎么办,我们不可能再定义很多个类别选择器对吧,所以我们就想到了用关系选择器。

来看代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

.box_1 h3{

color: red;

}

.box_1 p{

color: greenyellow;

}

.box_1 input{

color: blue;

}

.box_2 h3{

color: pink;

}

.box_2 p{

color: violet;

}

.box_2 input{

color: orange;

}

</style>

</head>

<body>

<div class="box_1">

<h3>我是h3标签</h3>

<p>我是段落标签</p>

<input type="button" value="提交" />

</div>

<div class="box_2">

<h3>我是h3标签</h3>

<p>我是段落标签</p>

<input type="button" value="提交" />

</div>

</body>

</html>

页面效果

当然我们也可以将两个类别选择器换成id选择器,当然标签嵌套更多层的话,我们选择器也可以嵌套更多层,但是我们尽量让选择器之间的嵌套控制在三层。

二、 动态伪类选择器

动态伪类选择器,常给a标签使用,尤其是在IE6的年代,只能给a标签使用,但是在最新的浏览器,动态伪类选择器可以给任何一个标签使用。另外还要注意一点,写动态伪类选择器时,还要注意他的顺序,他顺序一定按照定义:link,:visited,:hover,:active的顺序定义,要不有的浏览器会识别的不是很好。方便大家记忆我们给其取个名字叫”爱情原则”,也就是”LoVeHAte”.好了,其实我们在学习a标签的时候,我们已经注意到了只要给文字添加了超链接,文字本身就会自带颜色,而这些效果往往不是我们不想要的。我们需要从新定义文字的状态。我们先来看一下原始状态。

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

</style>

</head>

<body>

<a href="#">加了超链接的文字状态</a>

</body>

</html>

页面效果

默认添加了超链接时的状态(:link):文字颜色为蓝色,文字带有下划线。

默认添加了超链接时的状态(:visited):文字颜色为紫色,文字带有下划线。

默认鼠标经过时的状态(:hover):文字颜色为蓝色,文字带有下划线。

默认鼠标点时的状态(:active):文字颜色为红色,文字带有下划线。

以上四种状态时默认的时候的状态,不是我们想要的,如果我们想改变,就要从新设置这四种状态的样子就可以了。(因为我们学的样式还不多,所以我们主要还是以颜色为例,其实下划线及背景颜色等都是可以改变的)请看代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

a:link {color:red;}/*红色*/

a:visited {color:blue;}/*蓝色*/

a:hover {color:greenyellow;}/*黄绿色*/

a:active {color:orange;}/*橙色*/

</style>

</head>

<body>

<a href="#">加了超链接的文字状态</a>

</body>

</html>

页面效果

改变之后链接时(:link)的状态:文字颜色为红色,有下划线。

改变之后访问之后(:visited)的状态:文字颜色为蓝色,有下划线。

改变之后鼠标经过(:hover)的状态:文字颜色为黄绿色,有下划线。

改变之后鼠标点击(:active)的状态:文字颜色为橙色,有下划线。

其实我们在页面中看到的超链接的状态,不需要分设置这四种情况,这样设置的办法一是麻烦,二是浏览器中也存在着兼容问题(比如在谷歌浏览器中,给多个文字添加了超链接,我们只是点了其中一个,另其它的颜色都变成了访问过之后的了)。所以我们平时只需要设置a标签的状态,他表示四个状态,然后我们再设置:hover的状态,就把a标签的:hover的状态给替换掉了。就解决了以上两种问题。

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

a{

color:red; /*红色*/

}

a:hover{

color:greenyellow;/*黄绿色*/

}

</style>

</head>

<body>

<a href="#">加了超链接的文字状态</a>

<a href="#">加了超链接的文字状态</a>

</body>

</html>

页面效果

这样的时候,这四种状态都是都是一样的颜色。都是红色。

然后鼠标经过时是这样的:鼠标经过时为黄绿色。

好了,动态伪类选择器我们就讲到这里,其它的状态等我们学了更多的CSS样式直接往里加就可以了。

三、结构性伪类选择器

好了,我们对以上的结构性伪类选择器不做全部讲解,我们只讲一些在制制作网页时常用到的,其它我们可以参考一下手册就可以学会了!

1. E:first-child 匹配父元素的第一个子元素

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

p:first-child{

color: red;

}

</style>

</head>

<body>

<div>

<p>我是div第一个子元素</p>

<p>我是div第二个子元素</p>

<p>我是div第三个子元素</p>

<p>我是div最后一个子元素</p>

</div>

</body>

</html>

页面效果

2. E:last-child 匹配父元素的最后一个子元素

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

p:last-child{

color: red;

}

</style>

</head>

<body>

<div>

<p>我是div第一个子元素</p>

<p>我是div第二个子元素</p>

<p>我是div第三个子元素</p>

<p>我是div最后一个子元素</p>

</div>

</body>

</html>

页面效果

3. E:nth-child(n) 匹配父元素的第n个子元素,注意n是从1开始的。N的写法可以用多种,比如(2n2n+1oddeven)

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

p:nth-child(2){

color: red;

}

</style>

</head>

<body>

<div>

<p>我是div第一个子元素</p>

<p>我是div第二个子元素</p>

<p>我是div第三个子元素</p>

<p>我是div最后一个子元素</p>

</div>

</body>

</html>

页面效果

下面请看一个综合案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

li:nth-child(even){

color:greenyellow;

}

li:nth-child(odd){

color:deeppink;

}

li:first-child{

color: red;

}

li:last-child{

color: blue;

}

</style>

</head>

<body>

<ul>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

</ul>

<ul>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

<li>北国之美,雪花飘舞</li>

</ul>

</body>

</html>

页面效果

但是我们写代码的时候会遇到这种情况:

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

p:first-child{

color:red;

}

p:nth-child(3){

color: blue;

}

</style>

</head>

<body>

<div>

<h3>我是标题</h3>

<p>我是一些内容1</p>

<p>我是一些内容2</p>

<p>我是一些内容3</p>

<p>我是一些内容4</p>

<span>总之:今天很开心了</span>

</div>

</body>

</html>

仔细观察代码,第一个p标签已经不是div的第一个子元素了,所以再写p:first-child是找不到这个标签的。所以不会改变颜色,而nth-child(3)也是找到的是第二个p标签,因为h3才是div的第一个子元素,这样导致后面的代码都会出现跟真正理解上的不一样,这个时候我们需要:of-type选择器。

页面效果

4. E:first-of-type 匹配同类型中的第一个同级兄弟元素E

5. E:last-of-type 匹配同类型中的最后一个同级兄弟元素E

6. E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS选择器</title>

<style type="text/css">

p:nth-of-type(odd){

color: greenyellow;

}

p:nth-of-type(even){

color: deeppink;

}

p:first-of-type{

color:red;

}

p:last-of-type{

color: blue;

}

</style>

</head>

<body>

<div>

<h3>我是标题</h3>

<p>我是一些内容1</p>

<p>我是一些内容2</p>

<p>我是一些内容3</p>

<p>我是一些内容4</p>

<p>我是一些内容5</p>

<p>我是一些内容6</p>

<p>我是一些内容7</p>

<p>我是一些内容8</p>

<span>总之:今天很开心了</span>

</div>

</body>

</html>

页面效果

好了,CSS3中的选择器有很多种,但是我们目前先讲这么多,等我们后面用到那种选择器的时候,再继续讲解,而且到后也非常的好理解了。大家还记得样式的定义方式吗?选择器{样式1:样式值1;样式2:样式值2;…},所以大家应该猜得到我们接下来应该讲解那些内容了吧,明天我们主要讲解的内容是CSS样式(CSS属性)。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言