CSS选择器

最新推荐文章于 2024-05-09 13:14:11 发布

Right.W

最新推荐文章于 2024-05-09 13:14:11 发布

阅读量525

点赞数 2

分类专栏：总结

本文链接：https://blog.csdn.net/Right__/article/details/98266207

版权

总结专栏收录该内容

44 篇文章 1 订阅

订阅专栏

一、CSS 样式单的基本使用

链接外部样式文件（推荐使用): 这种方式将样式文件彻底与HTML 文档分离，需要额外引入样式文件，一批样式可以控制多份文档。
引入外部样式文件(不建议使用) :与上面方法类似，只是要用@import 引入外部样式单。
使用内部样式定义:通过在HTML 文档头定义样式单部分来实现的，每批CSS 样式只控制一份文档。
使用行内样式:将样式行内定义到具体的HTML 元素，用于精确控制一个HTML 元素的表现，每批CSS 样式只控制一份文档。

1、引入外部样式文件
HTML 文档代码: 在这里插入图片描述
CSS 样式文件代码:

使用CSS 样式单需要在HTML 页面代码的 <head…/> 内插入 <link…/> 子元素:

<link href = "outer.css" rel="stylesheet" type="text/css">

页面效果:
在这里插入图片描述
2、导入外部样式单
需要在<style…/>使用 @import 来执行导入

<style type="text/css">
	@import "outer.css";
	@import url("mycss.css");
</style>

由于某些浏览器在导入外部样式单时导致"屏闪",所以尽量避免使用.

3、使用内 CSS 样式

内部CSS 样式需放在<style…/>中定义,每个CSS 样式与外部CSS 样式文件的内容完全相同,<style…/>应放在<head…/>元素内作为子元素.
语法格式:

<style type="text/css"> 样式单文件定义 </style>

4、使用行内样式

行内样式只对单个标签有效,不会影响整个文件.
定义行内CSS 样式的语法格式:

style=“property1:value1;property2:value2…”

二、CSS 选择器

Selector(选择器): 选择器决定该样式定义对哪些元素起作用.
{property1:value1;property2:value2;…}(属性定义):这部分决定这些样式起什么作用.

1、元素选择器

语法格式:

E { . . . } /* E代表有效的HTML 元素名 */

下面示范如何使用:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-Type" content="text/html" charset="utf-8" >
 <title>元素选择器</title>
 <style type="text/css">
  div{
   background-color:grey;
   font: italic normal bold 14pt normal 楷体_GB2312;
  }
  p{
   background-color:#444;
   color:#fff;
   font:normal small-caps bold 20pt normal 宋体;
  }
 </style>
</head>
<body>
<div>div内的文字</div>
<p>p 内的文字</p>
</body>
</html>

页面效果:
在这里插入图片描述

2、属性选择器

广义上来讲,元素选择器其实是属性选择器的特例.

E{ … } : 指定CSS 样式对所有E 元素起作用.
E[attr]{ … }:指定CSS 样式只对具有 attr 属性的 E 元素起作用.
E[attr=value] { … }: 指定CSS 样式对所有包含 attr 属性,并且attr 属性为 value 的E 元素起作用.
E[attr ~=value] { … }: 指定CSS 样式对所有包含 attr 属性,且 attr 属性值为空格隔开的系列值,其中某个值为 value 的E 元素起作用.
E[attr]=value{ … }: 指定CSS 样式对所有包含 attr 属性,且 attr 属性值为以连字符分割的系列值,其中第一个值为 value 的E 元素起作用.
E[attr^=“value”]{ … }: 指定CSS 样式对所有包含 attr 属性,且 attr 属性值为以连字符分割的系列值,其中以 value 开头的字符串的E 元素起作用.
E[attr$=“value”]{ … }: 指定CSS 样式对所有包含 attr 属性,且 attr 属性值为以连字符分割的系列值,其中以 value 结尾的字符串的E 元素起作用.
E[attr*=“value”]{ … }: 指定CSS 样式对所有包含 attr 属性,且 attr 属性值为以连字符分割的系列值,其中attr 属性值包含value的字符串的E 元素起作用.

3、ID 选择器

语法格式:

#idValue { ... }

4、class 选择器

语法格式 :

[E] . classValue { . . . . . . }  /* 其中 E 是有效的 HTML 元素*/

还有包含选择器,子选择器,兄弟选择器等等.
div >.a : 对于div 之内且 class 属性为a 的元素起作用(a与div是直系关系).
#Android ~ .long : .long 只从 id 为 Android 的属性以后的找.

三、伪元素选择器

first-letter : 该选择器对应的 CSS 样式对指定对象内的第一个字符起作用.
first-line: 该选择器对应的 CSS 样式对指定对象内的第一行内容起作用.
before: 该选择器与内容相关的属性结合使用,在指定对象内部前端插入内容.
after: 该选择器与内容相关的属性结合使用,在指定对象内部尾部添加内容.
content 属性的值可支持普通字符串,也可用于插入图像.

四、CSS 3新增的伪类选择器

1、结构性伪元素选择器

Selector: root :匹配文档根元素.
Selector: first-child: 匹配符合Selector 选择器,且必须为其父元素第一个子节点元素.
Selector: last-child: 匹配符合Selectoro 选择器,且必须为其父元素最后一个子节点元素.
Selector: nth-child(n): 匹配符合Selecort 选择器,且必须为其父元素第n个子节点元素.
Selector: nth-last-child(n): 匹配符合Selector 选择器,且必须为其父元素倒数第n个子节点元素.
Selector: only-child(n): 匹配符合Selector 选择器,且必须为其父元素唯一子节点元素.
Selector: first-of-type: 匹配符合Selector 选择器,而且是与它同类型,同级别的兄弟元素中的第一个元素.
Selector: last-of-type: 匹配符合Selector 选择器,而且是与它同类型,同级别的兄弟元素中的最后一个元素.
Selector: nth-of-type(n): 匹配符合Selector 选择器,而且是与它同类型,同级别的兄弟元素中的第n个元素.
Selectoro: nth-last-of-type(n): 匹配符合Selector 选择器,而且是与它同类型,同级别的兄弟元素中的倒数第n个元素.
Selector: only-of-type: 匹配符合Selector 选择器,而且是与它同类型,同级别的兄弟元素中的唯一一个元素.
Selector: empty: 匹配符合Selector 选择器,而且内部没有任何子元素(包括文本节点).
Selector: lang(lang): 匹配符合Selector 选择器,而且内容是特定语言的元素.
Selector: nth-child(odd/even): 匹配符合Selector 选择器,且必须为其父元素的第奇数个/偶数个子节点元素.
Selector: nth-last-child(odd/even): 匹配符合Selector 选择器,且必须为其父元素的倒数第奇数个/偶数个子节点元素.
Selector: nth-child(xn+y): 匹配符合Selector 选择器,且必须为其父元素的第 xn+y 个子节点元素.
Selector: nth-last-child(xn+y): 匹配符合Selector 选择器,且必须为其父元素的倒数第 xn+y 个子节点元素.

2、UI 元素状态伪类选择器

Selector : link : 匹配Selector 选择器且未被访问前的元素.(通常为超链接)
Selector : visited : 匹配Selector 选择器且已被访问前的元素.(通常为超链接)
Selector : active : 匹配Selector 选择器且处于用户激活状态(鼠标点击与释放之间的事件).
Selector : hover : 匹配Selector 选择器且处于鼠标悬停状态的元素.
Selector : focus : 匹配Selector 选择器且处于已有焦点的元素.
Selector : enabled : 匹配Selector 选择器且处于可用状态的元素.
Selector : disabled : 匹配Selector 选择器且处于不可用状态的元素.
Selector : checked : 匹配Selector 选择器且处于选中状态的元素.

3、在脚本中修改显示样式

使用 getElementById() 方法获取到需要设置 CSS 样式的目标元素,
修改目标元素 CSS 样式,有两种常用方法:

修改行内 CSS 属性值 : 使用"obj.style.属性名=属性值 "的 JavaScript() 方法.
修改 HTML 元素的 class 属性值:使用 "obj.className= class 选择器"的JavaScript 脚本即可.

注意:
(1) 静态 CSS 属性名为 background-color,脚本中的属性名应该为 backgroundColor,即改为驼峰式写法.
(2) 修改 HTML 元素的 class 属性值应通过设置该元素的 className 属性来完成,合法的 className 是一个 class 选择器.
实例 :
随机改变页面的背景色
页面代码:

  <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-Type" content="text/html" charset="utf-8" >
 <title>随机改变页面背景色</title>
 <script type="text/javascript">
  function changeBg()
  {
   var bgColor="";
   for(var i = 0; i < 6; i++)
   {
    bgColor += "" + Math.round(Math.random() * 9);
   }
   document.body.style.backgroundColor = "#" + bgColor;
  }
  document.onclick = changeBg;
 </script>
</head>
<body>
</body>
</html>

页面效果为动态,点击浏览器空白处即开始随机改变颜色.

Right.W

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

一、CSS 样式单的基本使用链接外部样式文件（推荐使用）：这种方式将样式文件彻底与HTML 文档分离，需要额外引入样式文件，一批样式可以控制多份文档。引入外部样式文件：与上面方法类似，只是要用@import 引入外部样式单。使用内部样式定义：通过在HTML 文档头定义样式单部分来实现的，每批CSS 样式只控制一份文档。使用行内样式：将样式行内定义到具体的HTML 元素，用于精确控制一个...
复制链接

扫一扫

专栏目录