html5 css3网站设计基础教程电子书 html5 css3网页设计基础教程

转载

mob64ca13f9a97c 2023-11-13 21:44:12

文章标签 css3 选择器属性值伪元素 文章分类 HTML5 移动开发

文章目录

第9章
第9章定义选择器

9.1 构造选择器
9.2 按名称选择元素
9.3 按类或ID选择元素
9.4 按上下文选择元素
9.5 选择第一个或最后一个子元素
9.6 选择元素的第一个字母或者第一行
9.7 按状态选择链接元素
9.8 按属性选择元素
9.1 构造选择器
9.2 按名称选择元素
9.3 按类或ID选择元素
9.4 按上下文选择元素
9.5 选择第一个或最后一个子元素
9.6 选择元素的第一个字母或者第一行
9.7 按状态选择链接元素
9.8 按属性选择元素

第9章

第9章定义选择器

9.1 构造选择器

5种选择器标准

1.元素的名称

h1{
    color:red;
}

2.元素所在的上下文

h1 em{  /* em所在的上文是h1 */
    color:red;
}

3.元素的类或id

.error{ /* error是类名 */
    color:red;
}

#gaudi{ /* guadi是id名 */
    color:red;
}

/* 非必要的另外一个方法——在类名或id前加上其所属元素，会增强其特殊性 */
strong.error{ 
    color:red; /*该选择器只适应于strong元素，而不适应同样拥有error类名的其他元素 */ 
}

4.元素的伪类或者伪元素

a:link{
    color:red
}

5.元素的属性或者属性的值

a[title]{ /* 选择a元素的title属性*/
    color:red;
}

a[title="https://www.baidu.com"]{  /*选择a元素中title属性的值 */
    color:red;
}

提示　编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。

9.2 按名称选择元素

类型选择器：选择元素的名称

h1{
    color:red;
}

提示　通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。

9.3 按类或ID选择元素

类选择器：.classname{...}
id选择器：#id{...}

提示　可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。

9.4 按上下文选择元素

上下文选择器：根据元素的祖先、父元素或同胞元素来定位

<article>
    <h1>Hello</h1>
    <p>hello world</p>
    <p>hello neighbor</p> <!-- 两个二代的<p>元素 -->
    <section>
        <p>hello son<p> <!-- 三代的<p>元素 -->
    </section>
</article>

1.按祖先元素的祖先

/* ancestor祖先选择器，descendant目标元素选择器 */
ancestor descendant{
    ...
}

2.按父元素

/*parent是父选择器，child是子选择器*/
parent>child{
    ...
}

3.按同胞元素

相邻同胞结合符+：可以选择直接跟在指定的同胞元素后面的同胞元素

sibling+element{
    ...
}

普通同胞结合符~：可以选择那些并非直接出现在另一同胞元素后面的同胞元素

sibling~element{
    ...
}

9.5 选择第一个或最后一个子元素

first-child和last-child伪类：可以选择某元素的第一个或最后一个子元素进行格式化

<head>
	<title></title>
	<style type="text/css">
		li:first-child{
			color: red;
		}
		li:last-child{
			color:green;
		}
	</style>
</head>
<body>
	<ul>
		<li>line one</li>
		<li>line two</li>
		<li>line three</li>
	</ul>
</body>

9.6 选择元素的第一个字母或者第一行

first-letter伪元素：只选择元素的第一个字母

`first-letter可以实现每段首字母大写大写的效果

p:first-letter{
    color:red;
    font-size:1.4em;
    font-weight:bold;
}

first-line伪元素：只选择元素的第一行

调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行

p:first-line{
    color:red;
}

提示　只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。
提示　第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性

CSS3语法
伪元素：::first-line、::first-letter、::before、::after
伪类：:first-child、:link、:hover等

未来，::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。

9.7 按状态选择链接元素

<head>
	<title></title>
	<style type="text/css">
		a:link{
			color: red;
		}
		a:visited{
			color: orange;
		}
		a:focus{
			color: purple;
		}
		a:hover{
			color: green;
		}
		a:active{
			color: blue;
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com" title="百度">打开百度</a>
</body>

CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性

输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观
输入visited以设置访问者已激活过的链接的外观
输入focus，前提是链接是通过键盘选择并已准备好激活的
输入hover以设置光标指向链接时链接的外观
输入active以设置激活过的链接的外观

提示　要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。
提示　也可以对其他类型的元素使用:active和:hover伪类。例如，设置p:hover { color: red; }以后，鼠标停留在任何段落上段落都会显示为红色
提示　由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）

9.8 按属性选择元素

选择器	属性值
`[attribute`]`	匹配指定属性，不论具体值是什么
`[attribute="value"]`	完全匹配指定属性值
`[attribute~="value"]`	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
`[attribute\|="value"]`	属性值以`value-`打头
`[attribute^="value"]`	属性值以`value`开头，`value`为完整的单词或单词的一部分
`[attribute$="value"]`	属性值以`value`结尾，`value`为完整的单词或单词的一部分
`[attribute*="value"]`	属性值为指定值的子字符串

9.1 构造选择器

5种选择器标准

1.元素的名称

h1{
    color:red;
}

2.元素所在的上下文

h1 em{  /* em所在的上文是h1 */
    color:red;
}

3.元素的类或id

.error{ /* error是类名 */
    color:red;
}

#gaudi{ /* guadi是id名 */
    color:red;
}

/* 非必要的另外一个方法——在类名或id前加上其所属元素，会增强其特殊性 */
strong.error{ 
    color:red; /*该选择器只适应于strong元素，而不适应同样拥有error类名的其他元素 */ 
}

4.元素的伪类或者伪元素

a:link{
    color:red
}

5.元素的属性或者属性的值

a[title]{ /* 选择a元素的title属性*/
    color:red;
}

a[title="https://www.baidu.com"]{  /*选择a元素中title属性的值 */
    color:red;
}

提示　编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。

9.2 按名称选择元素

类型选择器：选择元素的名称

h1{
    color:red;
}

提示　通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。

9.3 按类或ID选择元素

类选择器：.classname{...}
id选择器：#id{...}

提示　可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。

9.4 按上下文选择元素

上下文选择器：根据元素的祖先、父元素或同胞元素来定位

<article>
    <h1>Hello</h1>
    <p>hello world</p>
    <p>hello neighbor</p> <!-- 两个二代的<p>元素 -->
    <section>
        <p>hello son<p> <!-- 三代的<p>元素 -->
    </section>
</article>

1.按祖先元素的祖先

/* ancestor祖先选择器，descendant目标元素选择器 */
ancestor descendant{
    ...
}

2.按父元素

/*parent是父选择器，child是子选择器*/
parent>child{
    ...
}

3.按同胞元素

相邻同胞结合符+：可以选择直接跟在指定的同胞元素后面的同胞元素

sibling+element{
    ...
}

普通同胞结合符~：可以选择那些并非直接出现在另一同胞元素后面的同胞元素

sibling~element{
    ...
}

9.5 选择第一个或最后一个子元素

first-child和last-child伪类：可以选择某元素的第一个或最后一个子元素进行格式化

<head>
	<title></title>
	<style type="text/css">
		li:first-child{
			color: red;
		}
		li:last-child{
			color:green;
		}
	</style>
</head>
<body>
	<ul>
		<li>line one</li>
		<li>line two</li>
		<li>line three</li>
	</ul>
</body>

9.6 选择元素的第一个字母或者第一行

first-letter伪元素：只选择元素的第一个字母

`first-letter可以实现每段首字母大写大写的效果

p:first-letter{
    color:red;
    font-size:1.4em;
    font-weight:bold;
}

first-line伪元素：只选择元素的第一行

调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行

p:first-line{
    color:red;
}

提示　只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。
提示　第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性

CSS3语法
伪元素：::first-line、::first-letter、::before、::after
伪类：:first-child、:link、:hover等

未来，::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。

9.7 按状态选择链接元素

<head>
	<title></title>
	<style type="text/css">
		a:link{
			color: red;
		}
		a:visited{
			color: orange;
		}
		a:focus{
			color: purple;
		}
		a:hover{
			color: green;
		}
		a:active{
			color: blue;
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com" title="百度">打开百度</a>
</body>

CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性

输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观
输入visited以设置访问者已激活过的链接的外观
输入focus，前提是链接是通过键盘选择并已准备好激活的
输入hover以设置光标指向链接时链接的外观
输入active以设置激活过的链接的外观

提示　要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。
提示　也可以对其他类型的元素使用:active和:hover伪类。例如，设置p:hover { color: red; }以后，鼠标停留在任何段落上段落都会显示为红色
提示　由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）

9.8 按属性选择元素

选择器	属性值
`[attribute`]`	匹配指定属性，不论具体值是什么
`[attribute="value"]`	完全匹配指定属性值
`[attribute~="value"]`	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
`[attribute\|="value"]`	属性值以`value-`打头
`[attribute^="value"]`	属性值以`value`开头，`value`为完整的单词或单词的一部分
`[attribute$="value"]`	属性值以`value`结尾，`value`为完整的单词或单词的一部分
`[attribute*="value"]`	属性值为指定值的子字符串