怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

高级选择器

  • 后代选择器:用空格隔开
  • 交集选择器:用.隔开
  • 并集选择器(分组选择器):用逗号隔开
  • 伪类选择器

后代选择器: 定义的时候用空格隔开

基本使用

举例 1:

<style type="text/css">
.div1 p{
color:red;
}
</style>

空格就表示后代。.div1 p 表示.div1的后代所有的p

是后代不是儿子

这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子

举例:

<style type="text/css">
h3 b i{
color:red ;
}
</style

上方代码的意思是说:定义了<h3>标签中的<b>标签中的<i>标签的样式。
同理:h3 和 b 和 i 标签不一定是连续紧挨着的,只要保持一个后代的关联即可。

效果:

或者还有下面这种写法:

上面的这种写法,<h3>标签和<i>标签并不是紧挨着的,但他们保持着一种后代关系。

还有下面这种写法:(含类选择器、id 选择器都是可以的)

子代选择器

用符号>表示

div>p{
color:red;
}

div 的儿子 p。和 div 的后代 p 的截然不同。

能够选择:

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

不能选择:

<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>

交集选择器

基本原理

来看下面这张图就明白了:

image

基本使用

<style type="text/css">
h3.special{
color:red;
}
</style>

选择的元素要求同时满足两个条件:必须是 h3 标签,然后必须是 special 标签。

只能在 h3 标签中使用它:

<h3 class="special">css</h3>

和后代选择器的区别

注意,交集选择器没有空格。所以,没有空格的div.red(交集选择器)和有空格的div .red(后代选择器)不是一个意思。

高阶使用

交集选择器可以连续交:(一般不要这么写)

h3.special.zhongyao{
color:red;
}

习惯写法

交集选择器,我们一般都是以标签名开头,比如div.haha 比如p.special

并集选择器:定义的时候用逗号隔开

三种基本选择器都可以放进来。

举例:

p,h1,#mytitle,.one/*定义了一个并集选择器,带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
color:red;
}

伪类选择器(待定)

a标签的五种状态

对于<a>标签,其对应几种不同的状态:

  • link:超链接点击之前
  • visited:超链接点击之后
  • focus:是某个标签获得焦点的时候(比如某个输入框获得焦点)
  • hover鼠标放到某个标签上的时候
  • active点击某个标签没有松鼠标

CSS 允许对于元素的不同状态,定义不同的样式信息。

分类

伪类选择器又分为两种:

  • 静态伪类:只能用于超链接
  • 动态伪类:针对所有标签都适用

下面来分别讲一下这两种伪类选择器。

(1)静态伪类:

用于以下两个状态(只能使用于超链接):

  • link:超链接点击之前
  • visited:超链接点击之后

举个例子:

<style type="text/css">
a:link {
color:red;
};
a:visited{
color:green;
}
</style>

image

a{}a:link{}的区别

问:既然a{}定义了超链接的属性,a:link{}定义了超链接点击之前的属性,那这两个有啥区别呢?
答:

a{}a:link{}的区别:

  • a{}定义的样式针对所有的超链接 (包括锚点)
  • a:link{}定义的样式针对所有写了 href 属性的超链接 (不包括锚点)

(2)动态伪类:

用于以下几种状态(适用于所有的标签):

  • focus(聚焦,点击某个文本框后输入文字,可以定义文本框和文字的属性):是某个标签获得焦点的时候(比如某个输入框获得焦点)
  • hover(盘旋,鼠标停留在上面):鼠标放到某个标签上的时候
  • active(长按状态):点击某个标签没有松鼠标时

举个例子:

<head>
<style type="text/css">
/* 伪类选择器:动态伪类*/
input:focus/*让input文本框获取焦点时:边框:#FF6F3D这种橙色;文字:绿色;背景色:#6a6a6a这种灰色*/{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
label:hover/*鼠标放在label标签上时显示蓝色*/{
color:blue;
}
label:active/*点击label标签鼠标没有松开时显示红色*/{
color:red;
}
</style>
</head>
<body>
<input type="text" ><br><br>
<label>css大神</label>
</body>

序选择器

设置无序列表<ul>中的第一个<li>为红色:

<style type="text/css">
ul li:first-child{
color:red;
}
</style>

设置无序列表<ul>中的最后一个<li>为红色:

ul li:last-child{
color:blue;
}

序选择器还有更复杂的用法。

下一个兄弟选择器

+表示选择下一个兄弟

<style type="text/css">
h3+p{
color:red;
}
</style>

上方的选择器意思是:选择的是 h3 元素后面紧挨着的第一个兄弟

<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>

效果如下:

这种选择器作用不大。

posted on   超级无敌美少男战士  阅读(141)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示