CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)

选择器的作用是选中页面中的指定元素。
只有选中了需要的元素,我们才能够做相应的样式更改。

选择器的类型

一般可以将选择器分为五类:

  1. 基础选择器
  2. 复合选择器
  3. 伪类选择器
  4. 伪元素选择器
  5. 属性选择器

本文主要介绍前三种,前三种在学习初期已经够用了,后两种的选择器,有需要可以点击链接进行拓展学习。

1、基础选择器

基础选择器包括

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器
  • 分组选择器

1.1 标签选择器

  • 可以快速的将同一类型都选择出来
  • 但选择的范围太广,不能做单独调整

实例:

DOCTYPE html>
<html>
<head>
<style>
	p {
	  text-align: center;
	  color: red;
	} 
style>
head>
<body>

	<p>每个段落都会受到样式的影响。p>
	<p id="para1">我也是!p>
	<p>还有我!p>

body>
html>

页面上的所有

元素都将居中对齐,并带有红色文本颜色:
CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第1张图片
注: 此处给出完整代码,后文将会简写,只写出关键代码。

1.2 类选择器

  • 可以选择有特定 class 属性的 HTML 元素。
  • 为多个标签都是用一个类,更改为同一样式。

使用方法: 选择拥有特定 class 的元素,使用一个句点(.)字符,后面跟类名。
实例:
所有带有 class="center" 的 HTML 元素将为红色且居中对齐:

<style>
	.center {
	  text-align: center;
	  color: red;
	}
style>
<body>
	<h1 class="center">居中的红色标题h1>
	<p class="center">居中的红色段落。p> 
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第2张图片
对一个元素设置多个类:

这个段落引用两个类。


注: 类名不能以数字开头。

1.3 id选择器

  • 使用 HTML 元素的 id 属性来选择特定元素。
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

使用方法: 使用 # 开头表示 id 选择器。
实例:

<style>
    #hello {
    	text-align: center;
        color: red;
   }
style>
<body>
<div id="hello">Hello world!div>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第3张图片

1.4 通配符选择器

  • 使用 * 的定义, 选取所有的标签。

实例:
下面的CSS样式会影响所有的元素:

<style>
	* {
	  text-align: center;
	  color: red;
	}
style> 
<body>
	<h1>Hello world!h1>
	<p>页面上的每个元素都会受到样式的影响。p>
	<p id="para1">我也是!p>
	<p>还有我!p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第4张图片

1.5 分组选择器

可以选取所有具有相同样式定义的元素。
实例:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

以上的代码对选择器进行分组,用都好分割每个选择器,则会大大缩减代码量,如下:

h1, h2, p {
  text-align: center;
  color: red;
}

2、复合选择器

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器

2.1 后代选择器

  • 又称作包含选择器。选择属于指定元素的某个子元素。
  • 使用: div p { }

示例:
选择

元素内的所有

元素:

<style>
div p {
  background-color: yellow;
}
style>
<body>
<h1>后代选择器h1>
<p>后代选择器匹配作为指定元素后代的所有元素。p>
<div>
  <p>div 中的段落 1。p>
  <p>div 中的段落 2。p>
  <section><p>div 中的段落 3。p>section>
div>
<p>段落 4。不在 div 中。p>
<p>段落 5。不在 div 中。p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第5张图片

2.2 子选择器

  • 和后代选择器类似, 但是只能选择子标签。
  • 使用大于号分割,使用: div > p { }
    示例:
<style>
div > p {
  background-color: yellow;
}
style>
<body>
<h1>子选择器h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。p>
<div>
  <p>div 中的段落 1。p>
  <p>div 中的段落 2。p>
  <section><p>div 中的段落 3。p>section> 
  <p>div 中的段落 4。p>
div>
<p>段落 5。不在 div 中。p>
<p>段落 6。不在 div 中。p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第6张图片

2.3 相邻兄弟选择器

<style>
div + p {
  background-color: yellow;
}
style>
<body>
<h1>相邻兄弟选择器h1>
<p>相邻的同胞选择器(+)选择所有作为指定元素的相邻的同级元素。
p>
<div>
  <p>div 中的段落 1。p>
  <p>div 中的段落 2。p>
div>
<p>段落 3。不在 div 中。p>
<p>段落 4。不在 div 中。p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第7张图片

2.4 通用选择器

<style>
div ~ p {
  background-color: yellow;
}
style>
<body>
<h1>通用兄弟选择器h1>
<p>通用的兄弟选择器(~)选择指定元素的所有同级元素。p>
<p>段落 1。p>
<div>
  <p>段落 2。p>
div>
<p>段落 3。p>
<code>一些代码。code>
<p>段落 4。p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第8张图片

3、伪类选择器

伪类用于定义元素的特殊状态。
它可以用于:

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

3.2 基本的伪类选择器

示例:

<style>
/*未访问的链接 */
a:link {
  color: red;
}

/* 已经访问的链接 */
a:visited {
  color: green;
}

/* 鼠标悬停链接 */
a:hover {
  color: hotpink;
}

/* 已选择的链接 */
a:active {
  color: blue;
}
style>
<body>
<h1>CSS 链接h1>
<p><b><a href="/index.html" target="_blank">这是一个链接a>b>p>
<p><b>注释:b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。p>
<p><b>注释:b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。p>
body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第9张图片
CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第10张图片

3.1 :force伪类选择器

下面示例实现的是当鼠标选择表单时会触发的效果。
示例:

<style>
input:focus {
  background-color: yellow;
}
style>
<body>

<form action="/action_page.php" method="get">
  账号: <input type="text" name="account"><br>
  密码: <input type="text" name="password"><br>
  <input type="submit" value="提交">
form>

body>

CSS中选择器的使用(如何选中HTML中的元素,如何使用CSS对某个元素样式进行设置,这里都有哦)_第11张图片

你可能感兴趣的:(JavaWeb,css,html,前端)