CSS 选择器

最新推荐文章于 2022-08-25 22:31:05 发布

fengguowusheng

最新推荐文章于 2022-08-25 22:31:05 发布

阅读量73

点赞数

分类专栏： HTML + JS + CSS

本文链接：https://blog.csdn.net/fengguowusheng/article/details/84091421

版权

HTML + JS + CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

<html>
 <head>
  <style type="text/css">
   h1 { color : red }
  </style>
 </head>
 <body>
  <h1> selected </h1>
  <h2> non-selected </h2>
  <h1> selected 1</h1>
 </body>
</html>

2. 选择器分组

将不同选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

可以将任意多个选择器分组在一起，对此没有任何限制。

<html>
	<head>
		<style type="text/css">
			h1, h2 { color : red }
		</style>
	</head>
	<body>
		<h1> selected </h1>
		<h2> selected 1 </h2>
	</body>
</html>

3.通配符选择器

显示为一个星号（*），该选择器可以与任何元素匹配，就像是一个通配符。

<html>
	<head>
		<style type="text/css">
			* { color : red }
		</style>
	</head>
	<body>
		<h1> selected </h1>
		<h2> selected 1 </h2>
	</body>
</html>

4.类选择器

以.开头，前面为元素选择器、*或者空（即为*），后面为类名，与元素中的class属性匹配

一个元素可包含多个class名称，之间用" "分开

<html>
	<head>
		<style type="text/css">
			.important { color : red }
			h1.warning { background:silver }
		</style>
	</head>
	<body>
		<h1 class="important warning"> selected </h1>
		<h2 class="important"> selected 1</h2>
		<h2 class="warning"> non-selected </h2>
	</body>
</html>

5.ID选择器

和类选择器类似，区别如下

1）#

2）匹配id属性

3）一个元素不能对应多个ID

<html>
	<head>
		<style type="text/css">
			#important { color : red }
			h1#warning { background:yellow }
		</style>
	</head>
	<body>
		<h1 id="important warning" > non-selected 1 </h1>
		<h1 id="important" > selected </h1>
		<h1 id="Important" > selected 2 </h1>
		<h1 id="warning" > selected 3 </h1>
		<h2 id="important" > selected 4</h2>
		<h2 id="warning" > non-selected 2</h2>
	</body>
</html>

6.属性选择器

根据元素的属性和属性值来匹配元素，语法

elementName[attrName1=attrValue1][attrName2=attrValue2]...

elementName可以省略（默认为*），attrValue可以省略，多个[]为&&的关系

关于值匹配的几种特殊情况

1）部分匹配：匹配属性值用" "分隔后的一个元素，常用于CLASS属性

attrName1~=attrValue1

当应用到class属性时，可使用elementName["className"]简化

例如：p.important <==> p["important"] <==> p[class~="important"]

2)字串匹配

[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

3）特定属性选择器

[abc\|="def"]

[abc|="def"]

<==> [abc="def"] + [abc^="def-"]

<html>
 <head>
  <style type="text/css">
   *[title] { color : red; }
   h1[value] { background : yellow }
   h1[title][value] { font-style : italic }
   h1[title="element1"] { font-style : italic }
   h1[title~="eleme"] { font-size : 12px }
   h1[title^="eleme"] { font-size : 20px  }
   h2[title$="ent2"] { background : yellow }
   h2[title*="eleme"] { font-size : 15px }
   h1[title~="element12"] { font-size : 12px }
   h3[value|="en"] { color : red; font-size : 12px }
  </style>
 </head>
 <body>
  <h1 title="element1"> selected </h1>
  <h1 title="element12 element1" value="element1"> selected 1</h1>
  <h2 title="element2"> selected 2</h2>
  <h2 title="element3"> selected 3</h2>
  <h3> non-selected </h3>
  <h3 value="en"> selected </h3>
  <h3 value="en-"> selected </h3>
  <h3 value="en-123"> selected </h3>
  <h3 value="en123"> non-selected </h3>
 </body>
</html>

7.后代选择器

选择某元素后代的元素

selector1 selector2 ...

先祖和后代之间用" "分开

<html>
	<head>
		<style type="text/css">
			h1 em { color : red }
			div h1 em { font-size : 20 }
		</style>
	</head>
	<body>
		<div> <h1> non-selected <em> selected </em> non-selected </h1> </div>
		<h2> non-selected <em> non-selected </em> non-selected </h2>
	</body>
</html>

8.子元素选择器

选择某元素子元素的元素

selector1 > selector2

<html>
	<head>
		<style type="text/css">
			h1 > em { color : red }
		</style>
	</head>
	<body>
		<h1> non-selected <em> selected </em> non-selected </h1>
		<h1> non-selected <div> <em> non-selected </em> </div> non-selected </h1>
	</body>
</html>

9.兄弟选择器

选择与某元素并列（具有相同的父元素）并且在其之后的元素

1）相邻

selector1 + selector2

2）弟妹

selector1 ~ selector2

<html>
	<head>
		<style type="text/css">
			h1 + h1 { color : red }
			h1 + h2 { color : blue }
			h1 ~ h2 { background : yellow }
			h2 + h3 { background : yellow }
			h2 + h3 { color : blue }
		</style>
	</head>
	<body>
		<div>
			<h1> non-selected </h1>
			<h1> selected </h1>
			<h3> non-selected </h3>
			<h2> selected </h2>
		</div>
	</body>
</html>

10.伪类选择器

selector : pseudo-class {property: value}

:active      向被激活的元素添加样式。
:focus       向拥有键盘输入焦点的元素添加样式。
:hover       当鼠标悬浮在元素上方时，向元素添加样式。
:link        向未被访问的链接添加样式。
:visited     向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang        向带有指定 lang 属性的元素添加样式。

关于elementName:first-child

指的是作为其它元素的第一个子元素的element，而不是element的第一个子元素

<html>
	<head>
		<style type="text/css">
			h1:first-child { color : red }
		</style>
	</head>
	<body>
		<div>
			<h1> selected </h1>
			<h1> non-selected </h1>
		</div>
		<h1> <div> non-selected </div> </h1>
	</body>
</html>

11.伪元素

selector:pseudo-element {property:value;}

:first-letter 向文本的第一个字母添加特殊样式。
:first-line   向文本的首行添加特殊样式。
:before       在元素之前添加内容。
:after        在元素之后添加内容。

12.参考资料

http://www.w3school.com.cn/css/css_selector_type.asp

http://baike.baidu.com/view/3677855.htm

fengguowusheng

关注

0
点赞
踩
0

收藏

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

1. 元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; h1 { color : red } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&
复制链接

扫一扫