002_CSS选择器

最新推荐文章于 2023-07-21 22:32:22 发布

wnashi_万石

最新推荐文章于 2023-07-21 22:32:22 发布

阅读量124

点赞数

分类专栏： 005_CSS

本文链接：https://blog.csdn.net/w_wangewanbuhuidege/article/details/114536794

版权

005_CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

001_CSS核心之常见的选择器及使用场景(h3)

必须掌握的选择器
- 元素（标签）选择器
- 类选择器
- id选择器(JavaScript)
开发过程中常用的选择器
- 通配符选择器 *
- 派⽣生选择器根据文档dom结构来选择html元素
  - 后代选择器
  - ⼦元素选择器
  - 相邻选择器
源代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>常见的选择器及使用场景</title>
	</head>
	<body>
		<h1>一篇文章</h1>
		<p id="second">
			Dolor, facilis. Dolorum maiores similique
		</p>
		<p class="first">
			<span>L <i>o</i>rem</span> ipsum dolor sit amet consectetur
		</p>
		<p id="second">
			Dolor, facilis. Dolorum maiores similique
		</p>
		<p>
			Molestias dolore obcaecati possimus voluptatum
		</p>
	</body>
</html>

<style>
	/* 通配符选择器 */
	* {
		padding: 0;
		margin: 0;
	}

	/* 元素选择器 */
	h1 {
		color: red;
	}

	p {
		padding: 20px;
	}

	/* 类选择器 */
	.first {
		border: 1px solid #000;
	}

	/* id选择器 */
	#second {
		background-color: red;
	}

	/* 后代选择器 */
	p span {
		color: red;
	}

	/* 相邻选择器 */
	.first+p {
		color: gold;
	}
</style>

浏览器界面

002_CSS核心之特殊的选择器及使用场景(h3)

源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      /* 未选中 */
      a:link {
        color: violet;
      }
      /* 已选中 */
      a:visited {
        color: yellow;
      }
      /* 悬浮的 */
      a:hover {
        color: green;
      }
      /* 点击瞬间 */
      a:active {
        color: red;
      }
      /* 选择父元素下的第一个子元素 */
      div p:first-child {
        color: green;
      }
      div p:last-child {
        color: red;
      }
      /* nth-child n是从0开始的  */ 
      div p:nth-child(n + 2) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="http://xdclass.net">小滴课堂</a>
    <a href="http://baidu.com">小滴课堂</a>
    <div>
      <!-- <a href="http://baidu.com">小滴课堂</a> -->
      <p>
        Lorem ipsum dolor sit 
      </p>
      <p>
        Dolores nam minima nesciunt
      </p>
      <p>
        Cumque, soluta maxime quasi
      </p>
    </div>
  </body>
</html>

浏览器界面

表格来自于www.runoob.com

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有`<p>`元素	1
element,element	div,p	选择所有`<div>`元素和`<p>`元素	1
element element	div p	选择`<div>`元素内的所有`<p>`元素	1
element>element	div>p	选择所有父级是 `<div>` 元素的 `<p>` 元素	2
element+element	div+p	选择所有紧接着`<div>`元素之后的`<p>`元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个`<p>`元素的第一个字母	1
:first-line	p:first-line	选择每一个`<p>`元素的第一行	1
:first-child	p:first-child	指定只有当`<p>`元素是其父级的第一个子级的样式。	2
:before	p:before	在每个`<p>`元素之前插入内容	2
:after	p:after	在每个`<p>`元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有`<p>`元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^=“https”]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*=“runoob”]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not§	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 “readonly”（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 “required” 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

wnashi_万石

关注

0
点赞
踩
0

收藏

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

001_CSS核心之常见的选择器及使用场景(h3)必须掌握的选择器元素（标签）选择器类选择器id选择器(JavaScript)开发过程中常用的选择器通配符选择器 *派⽣生选择器根据文档dom结构来选择html元素后代选择器⼦元素选择器相邻选择器源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta
复制链接

扫一扫

专栏目录