全栈之前端 | 2.CSS3基础知识之选择器学习

0x00 前言简述

Q: 选择器是什么？

你也许已经见过选择器了。CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式, 选择器所选择的元素，叫做“选择器的对象”。

在上一章节，作者针对CSS选择器做了一个简单介绍有那些选择器，本章将表中的选择器进行一一实践展示。

例如，CSS中常用的选择器列表:

选择器名称	选择的内容	示例
类型选择器（标签或元素选择器）	所有指定类型的 HTML 元素	p 选择 <p>元素
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	.my-class 选择 <p class="my-class"> 和<a class="my-class">
属性选择器	拥有特定属性的元素	img[src] 选择 <img src="myimage.png"> 但不是 <img>
全局选择器	它使一个(*)号指定,它的作用是匹配html中所有的标签,	* 表示选择了body元素的包含的所有可见子元素
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	a:hover 选择仅在鼠标指针停在链接上时的 <a> 元素
关系选择器	将其他选择器组合起来，更复杂的选择元素。	article p 或者 article > p 表示选择了<article>元素的初代 <a>子元素

0x01 CSS选择器

1.类型选择器

描述: 类型选择器（type selector）类型选择器有时也叫做“标签名选择器”或者是“元素选择器”，它是CSS最常用的选择器，如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，除此之外CSS 元素选择器（类型选择器）还可以设置 XML 文档中元素的样式。

示例1.HTML中使用元素选择器

代码语言：javascript复制

<!-- 内部样式表 -->
<style type="text/css">
  html {color:black;}
  h1 {color:blue;}
  h2 {color:silver;}
</style>

<!-- 文档主体 -->
<body>
  <h1>这是 heading 标题 1</h1>
  <h2>这是 heading 标题 2</h2>
  <p>这是一段普通的段落</p>
</body>

示例2.XML中使用元素选择器

代码语言：javascript复制

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>  
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

使用外部样式文件note.css载入自定义的XML呈现样式。

代码语言：javascript复制

note {
  font-family:Verdana, Arial;
  margin-left:30px;
}
to {
  font-size:28px;
  display: block;
}
from {
  font-size:28px;
  display: block;
}
heading {
  color: red;
  font-size:60px;
  display: block;
}
body {
  color: blue;
  font-size:35px;
  display: block;
}

执行结果:

2.id选择器

描述: id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，CSS选择器以 "#" 来定义。示例1.下面的 HTML 代码中，id 属性为 section-red 的 p 元素显示为红色，而 id 属性为 section-green 的 p 元素显示为绿色。

代码语言：javascript复制

<style type="text/css">
  #section-red {color:red;}
  #section-green {color:green;}
</style>
<body>
  <p id="section-red">这个段落是红色</p>
  <p id="section-green">这个段落是绿色</p>
</body>

温馨提示: CSS中id 选择器与类选择器的区别。

区别1: id选择器只在HTML文档中使用一次。
区别2: id选择器不能结合使用，即其不允许有空格分隔的词列表。
区别3: id选择器能包含更多含义，表示唯一。

偷偷的告诉你哟？【极客全栈修炼】微信小程序已开放

可直接在微信里面直接浏览博主文章哟，后续将上线更多有趣的小工具。

3.class类选择器

描述: class 类选择器可以为标有class属性值的 HTML 元素指定特定的样式, 类选择器以 "." 来定义, 在HTML中与id不同的是一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

示例1.在下面的 HTML 代码中，h1 和 p 元素都有 center 类,这意味着两者都将遵守 ".center" 选择器中的规则。

代码语言：javascript复制

<style type="text/css">
.center {
 text-align: center;
 color: white;
 background-color: #771100;
}
</style>

<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

示例2.如果希望将一个特定的元素同时标记为重要（important）和警告（warning），假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 .

代码语言：javascript复制

<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}  /**两个类选择器链接在一起，如不存在则会设置失败**/
</style>

<p class="important warning">  
这两个词的顺序无关紧要，写成 warning important 也可以
This paragraph is a very important warning.
</p>

weiyigeek.top-类与多类选择器图

温馨提示: 在多类选择器中，如果通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），若一个多类选择器包含类名列表中没有的一个类名，匹配就会失败无法设置样式。

温馨提示: 在HTML中类名的第一个字符不能使用数字,否则它无法在 Mozilla 或 Firefox 中起作用，语法格式非常重要。

4.属性选择器

描述: 对带有指定属性的 HTML 元素设置样式, 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性，即属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。

CSS 属性选择器语法:

[attribute] : 用于选取带有指定属性的元素。
[attribute=value] : 用于选取带有指定属性和值的元素
[attribute~=value] : 用于选取属性值中包含指定词汇的元素
[attribute|=value] : 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词匹配属性值以指定值开头的每个元素。
[attribute^=value] : 匹配属性值以指定值开头的每个元素
[attribute$=value] : 匹配属性值以指定值结尾的每个元素
[attribute*=value] : 匹配属性值中包含指定值的每个元素。

示例演示:示例1.常规使用，针对title属性以及对有 href 属性的锚（a 元素）应用样式。

代码语言：javascript复制

<style type="text/css">
/* 带有title属性的元素 */
[title]{
  color:red;
}
/* a标签且带有hred属性的元素 */
a[href] {
  color:blue;
  text-decoration:none;
  border:1px solid black;
}
</style>

<b>可以应用样式：</b>
<h2 title="Hello World">Hello World</h2>
<a title="test" href="http://weiyigeek.top" target="_blank" />利用属性选择器的样式</a>

<b>无法应用样式：</b>
<h2 name="Hello World">Hello world</h2>
<a name="weiyigeek.top">weiyigeek.top</a>

示例2.在 XML 文档使用属性选择器，属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

代码语言：javascript复制

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>  
<root>
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
</root>

<!-- note.css -->
planet[moons] {color: red}

示例3.根据多个属性进行选择，只需将属性选择器链接在一起即可，无顺序要求。

代码语言：javascript复制

<style>
a[href][title] {background-color:green;color:white;}
</style>
<a title="test" href="http://weiyigeek.top" target="_blank" />根据多个属性进行选择设置样式</a>

weiyigeek.top-属性选择器与多属性选择器图

示例4.使用表达式进行属性的选择匹配。

代码语言：javascript复制

<style>
/* 元素[属性=value],常用 */
[title=weiyigeek]{
  border:5px solid blue;
}
a[title="test"][href="http://weiyigeek.top"]{
  border:5px solid blue;
}

</style>
<a title="weiyigeek" href="https://blog.weiyigeek.top">blog.weiyigeek.top</a>
<a title="test" href="https://weiyigeek.top">weiyigeek.top</a>

示例5:为没有id以及class的表单设置样式。

代码语言：javascript复制

<style>
input[type="text"]     /**元素[属性=属性值] 进行对应**/
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color: #f60;
  font-family: Verdana, Arial;
}

input[type="button"]  /**元素[属性=属性值] 进行对应**/
{
  width:120px;
  margin-left:15px;
  display:block;
  font-family: Verdana, Arial;
}
</style>

<form name="input" action="" method="get">
  <input type="text" name="Name" value="Bill" size="20">   <!--对应 type属性-->
  <input type="text" name="Name" value="Gates" size="20">
  <input type="button" value="Example Button">             <!--对应 type属性-->
</form>

温馨提示: 注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器，在 IE6 及更低的版本中，不支持属性选择, 不过好在当前基本都是win7~win10系统，所以浏览器方面的因数可以不用

css3 前端全栈语法字符串

0 人点赞