CSS 样式表基础(八)——其他选择器

10、属性选择器

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
如:
[title] { color:red; }
p[title] { font-size: 24pt; }
[title*="标题"] { color:green; }
例:

<html>
<head>
<title>CSS</title>
<style>
<--! 带有title属性的执行以下操作-->
[title] {
  color:red;
}
<--! 带有p title属性的执行操作,注意这次会覆盖上面的操作-->
p[title] {
  font-size: 24pt;
}
<--! 属性中包含“标题”两个字的执行以下操作 -->
[title*="标题"] {
  color:green;
}
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2 title="这是标题">HTML5网页设计</h2>
<p>这是第一段文字内容</p>
<p title="这是这段文字的title属性">这是第二段文字内容</p>
<p title="这段文字不是标题">这是第三段文字内容</p>
</body>
</html>

网页生成结果如下:
图片说明
结合代码和图片我们可以得知:

  1. 首先[title] { color:red; },带有title属性的执行这步操作:也就是h2的“HTML5网页设计”、第二段和第三段文字内容两句话都应执行,字体颜色变为红色。

  2. 然后p[title] { font-size: 24pt; },带有p title属性的执行这步操作:第二段和第三段文字内容两句话都应执行,字体大小变为24pt。
    若修改的属性与上次重复或冲突,会覆盖上面的操作*(比如这次color:green,上次color:red,那么color应是green覆盖red)

  3. 最后[title*="标题"] { color:green; },属性中包含“标题”两个字的执行这步操作:第三段文字内容执行,文字颜色变绿。

11、其他几个选择器

1) 后代选择器
后代选择器可以选择作为某元素后代的元素。如:
p em { color: red; } 表示作为 p 元素的任何后代的 em 元素

2) 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。如:
p > em { color: red; } 表示作为 p 元素的子元素的 em 元素

3) 相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。如:
h2 + p { color: green; } 表示选择紧接在 h2 元素后出现的段落,h2 和 p 元素

拥有共同的父元素。

4) 兄弟选择器
如:h2 ~ p 表示h2后面的所有同级的p元素。

例:

<html>
<head>
<title>CSS</title>
<style>
p { font-size: 16pt; color: blue; }
p em { color: red; }
h2 + p { color: green; }
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2>HTML5<em>网页设计</em></h2>
<p>这是<em>第一段</em>文字内容</p>
<p>这是第二段文字内容</p>
<p>这是第三段文字内容</p>
</body>
</html>

图片说明

12、伪类

:first-child 向元素的第一个子元素添加样式。
:nth-child(n) 第n个元素
可以用even、odd来代替 2n、2n+1

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
<style>
  body {
    background-color: #9ff;
  }
  p:first-letter {
    font-size: 200%;
  }
  p:hover {
    color: red;
  }
</style>
</head>
<body>
<h1><em>网页设计</em></h1>
<p>Hello,World!</p>
<p>网页设计 HTML 文档和 HTML 元素是通过HTML签进行标记的HTML 标签由开始标签和结束标签组成,开始标签是被括号包围的元素名,结束标签是被括号包围的斜杠和元素名,某些 HTML 元素没有结束标签。 </p>
</body>
</html>

图片说明
em标签表示语气加重,故为斜体。
p:first-letter表示p的第一个字符执行,故可看到图片中两个p文本的第一个字的大小都变大了。
hover表示鼠标覆盖文字时的样式,覆盖时字体颜色变红。

全部评论

相关推荐

不愿透露姓名的神秘牛友
06-21 11:33
昨天是学校最后一场招聘会,鼠鼠去参加了,全场只有一个招聘java的岗位,上来先做一份笔试题,做完后他拿张纸对答案,然后开始问简历上的问题,深圳小厂,6-8k(题目如下),后面还有两轮面试。然后我就在招聘现场逛呀逛,看到有公司招聘电商运营,给的比上年的小厂还多,鼠鼠就去了解了下,然后hr跟鼠鼠要了份简历,虽然我的简历上面全是求职Java开发相关的内容,但是hr还是鼓励我说没关系,她帮我把简历给老板看看,下周一会给我通知。招聘会结束后鼠鼠想了一段时间,也和朋友聊了聊,发现我可能是不太适合这个方向,然后就跟爸爸说回家了给我发条微信,我有些话想跟他说说。晚上爸爸到家了,跟我发了条微信,我立马跑出图书馆跟他打起了电话,这个通话长达一个小时,主要是跟爸爸坦白说我不想找这行了,是你的儿子太没用了,想试试其他行业。然后爸爸也跟我说了很多,说他从来没有希望我毕业后就赚大钱的想法,找不到就回家去,回家了再慢慢找,实在找不到就跟他干(帮别人装修房子,个体户),他也知道工作不好找,让我不要那么焦虑,然后就是聊一些家常琐事。对于后面的求职者呢我有点建议想提一下,就是如果招实习的时间或者秋招开始,而你的简历又很差的情况下,不要说等做好项目填充完简历之后再投,那样就太晚了,建议先把熟悉的项目写上简历,然后边投边面边完善,求职是一个人进步的过程,本来就比别人慢,等到一切都准备好后再投岂不是黄花菜都凉了。时间够的话还是建议敲一遍代码,因为那样能让你加深一下对项目的理解,上面那些说法只是针对时间不够的情况。当然,这些建议可能没啥用,因为我只是一个loser,这些全是建立在我理想的情况下,有没有用还需其他人现身说法。上篇帖子没想到学校被人认了出来,为了不丢脸只能匿名处理了。
KPLACE:找研发类或技术类,主要还是要1.多投 2.多做准备,很多方面都要做准备 3.要有心理准备,投累了就休息一两天,再继续,要相信自己能找到
投递58到家等公司10个岗位
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务