Css 简明教程
CSS - Selectors
CSS 选择器用于选择要在网页上设置样式的 HTML 元素。它们允许你针对特定元素或组元素来应用诸如颜色、字体和边距之类的样式。
CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.
由选择器选择的元素或元素被称为 subject of the selector 。
The element or elements that are selected by the selector are referred to as subject of the selector.
CSS Universal Selector
通配符选择器（以星号 ( )* 表示）是一种特殊选择器，它匹配 HTML 文档中的所有元素。它们通常用于向文档中的所有元素添加相同长度的边距和内边距。
Universal selector, denoted by an asterisk mark ()*, is a special selector that matches all elements in an HTML document. These are generally used to add a same length margin and padding to all the elements in document.
Syntax
* {
margin: 0;
padding: 0;
}根据上述语法，通配符选择器用于将 0 的边距和内边距应用至所有 HTML 元素。
As per the above syntax, the universal selector is used to apply a margin and padding of 0 to all HTML elements.
Example
以下示例演示了通配符选择器 (*) 的用法：
Following example demonstrates the use of a universal selector (*):
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
background-color: peachpuff;
color: darkgreen;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Universal selector (*)</h1>
<div>
Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p>
</div>
<p>Paragraph 3</p>
</body>
</html>CSS Element Selector
A element selector targets an HTML element, such as * <h1>, <p>*, etc. This is used when we want to apply similar style to all the <p> tags or <h1> tags in the document.
Syntax
/* Sets text color of all p tags to green */
p {
color: green;
}
/* Add underline to all h1 tags in document */
h1 {
text-decoration-line: underline;
}Example
以下示例演示了元素选择器的用法：
Following example demonstrates the use of a element selector:
<html>
<head>
<style>
div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
p {
color: green;
}
h1 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<div>
<h1>Element selector</h1>
<p>Div with border </p>
<p>Text aligned to center</p>
<p>Paragraph with green color</p>
<p>h1 with an underline</p>
</div>
</body>
</html>CSS Class Selector
类选择器以其 * class attribute * 的特定值针对元素设置样式。CSS 中的一个类用 "." （句点）符号表示。
A class selector targets an element with a specific value for its * class attribute* to style it. A class in CSS is denoted by "." (period) symbol.
Example
以下示例演示了类选择器的用法，其中 .style-div, .topDivs 和 .bottomDivs 是类选择器：
Following example demonstrates the use of a class selector, where .style-div, .topDivs and .bottomDivs are class selectors:
<html>
<head>
<style>
.style-div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
.topDivs{
font-weight: bold;
font-size: 30px;
}
.bottomDivs{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<div class="style-div">
<div class="topDivs">
Hello World
</div>
<div class="topDivs">
Learn CSS
</div>
<div class="bottomDivs">
From
</div>
<div class="bottomDivs">
TutorialsPoint
</div>
</div>
</body>
</html>CSS ID Selector
ID 选择器以特定值为 * id attribute * 的单个元素为目标进行设置样式。CSS 中的 id 用“#”（井号）符号表示。同一个类可以应用到多个元素，但一个 id 是元素唯一的。
An ID selector targets single element with a particular value for * id attribute* to style it. An id in CSS is denoted by "#" (hash) symbol. Same class can be applied to multiple elements, but an id is unique for an element.
Syntax
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
text-decoration-line: underline;
color: red;
}Example
以下示例演示了 ID 选择器的用法，其中 #style-div, #tutorial 和 #stylePoint 是应用于元素上的 ID 选择器：
Following example demonstrates the use of an id selector, where #style-div, #tutorial and #stylePoint are the id selectors applied on the elements:
<html>
<head>
<style>
#style-div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
#tutorial{
color: green;
font-size: 20px;
}
#stylePoint{
color: black;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="style-div">
<div id="tutorial">
Tutorials
<span id="stylePoint">
Point
</span>
</div>
<p>
Here we used ids to
style different elements.
</p>
</div>
</body>
</html>CSS Attribute Selector
属性选择器根据元素上的特定属性或属性值定位元素。
An attribute selector targets an element based on a specific attribute or attribute values on an element.
有关属性选择器的详细说明，请参阅此 * attribute selector* 文章。
For a detailed explanation of attribute selectors, refer this attribute selector article.
Syntax
/* Style all anchor tag with target attribute */
a[target] {
background-color: peachpuff;
}
/* Style all anchor tag that links to tutorialspoint */
a[href="https://www.tutorialspoint.com"] {
background-color: peachpuff;
}Example
以下示例演示了属性选择器的用法：
Following example demonstrates the use of an attribute selector:
<html>
<head>
<style>
a[href]{
font-size: 2em;
}
a[target] {
background-color: peachpuff;
color: blueviolet;
}
/* Attribute with value have more priority*/
/* Hence black background applied to CSS link*/
a[target="_self"] {
background-color: black;
}
</style>
</head>
<body>
<h2>Attribute selector</h2>
<p>
Styling applied to anchor element:
</p>
<a href="https://www.tutorialspoint.com/">
Tutorialspoint
</a>
<br><br>
<a href="/html/index.htm" target="_blank">
HTML Tutorial
</a>
<br><br>
<a href="/css/index.htm" target="_self">
CSS Tutorial
</a>
</body>
</html>CSS Group Selector
CSS 分组选择器允许我们一次向多个元素应用相同的样式。元素的名称可以用逗号分隔。此方法是推荐的，因为它使 CSS 简洁，并避免冗余。
CSS group selector allow us to apply same style to multiple elements at a time. Name of elements can be separated by commas. This method is recommended as it keep CSS concise and avoid redundancy.
Example
以下示例演示了如何在 CSS 中使用分组选择器。
Following example shows how to use group selectors in CSS.
<html>
<head>
<style>
/* This applies to both <h1> and <h2> elements */
h1, h2 {
background-color: grey;
padding: 4px;
}
/*Applies to all paragraphs, elements with class*/
/*'highlight', and element with ID 'hightlightSpan'*/
p, .highlight, #hightlightSpan {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<h2>Group Selectors</h2>
<p>This is a paragraph.</p>
<div class="highlight">
This is div
</div>
<br>
<span id="hightlightSpan">
This is span
</span>
</body>
</html>CSS Pseudo Class Selector
伪类选择器用于设置元素的特定状态样式，例如 :hover 用于在悬停时为元素设置样式。
A pseudo-class selector is used to style a specific state of an element, such as :hover is used to style an element when hovered.
有关伪类选择器的详细信息列表，请参阅此 * CSS Pseudo Classes* 教程。
For a detailed list of pseudo-class selectors, refer this CSS Pseudo Classes tutorial.
Syntax
/* Change background color on hover */
a :hover {
background-color: peachpuff;
}
/* Change background color on clicking button */
button:active {
background-color: yellow;
}
/* Change border color on focusing input */
input:focus {
border-color: blue;
}Example
以下示例演示了伪类选择器的用法：
Following example demonstrates the use of a pseudo-class selector:
<html>
<head>
<style>
a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
button:active {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>
Styling applied to anchor element and
button with a pseudo-class:
</p>
<a href="https://www.tutorialspoint.com">
Tutorialspoint
</a>
<br><br>
<button>Click Me</button>
</body>
</html>CSS Pseudo Element Selector
伪元素选择器用于设置元素的特定部分样式，而不是元素本身。
A pseudo-element selector is used to style a specific part of an element rather than the element itself.
有关伪元素选择器的详细列表，请参阅此 * CSS Pseudo elements* 教程。
For a detailed list of pseudo-element selectors, refer this CSS Pseudo elements tutorial.
Syntax
/* Define contents before paragraph */
a::before {
content: " ";
}
/* Style first letter of paragraph */
p::first-letter {
font-size: 2em;
}Example
以下示例演示了伪元素选择器 (::before) 和 (::after) 的用法：
Following example demonstrates the use of a pseudo-element selector (::before) and (::after):
<html>
<head>
<style>
/* Add and style contents before paragraph */
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}
/* Add and style contents after paragraph */
p::after {
content: " [Read more]";
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h2>Pseudo-element selector</h2>
<p>This is a paragraph.</p>
</body>
</html>CSS Descendant Selector
后代选择器在 css 中用于设置所有作为特定指定标签的子标签的文本样式。母元素和子元素之间的空格用于指定为后代。
Descendant selector is used in css to style all the tags which are child of a particular specified tag. A single space between parent element and child element is used to mention as descendant.
Syntax
div p {
color: blue;
}上面的代码将 div 元素里面的段落标签的文本颜色设置为蓝色。
The above code set text color of paragraph tags that are inside div element to blue.
Example
以下示例演示了如何在 css 中使用后代选择器。
The following example show how to use descendant selector in css.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border: 2px solid;
}
div p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>
This paragraph is inside a div
and will be blue.
</p>
<section>
<p>
This paragraph is inside a
section which is inside a
div and will also be blue.
</p>
</section>
</div>
<p>
This paragraph is outside the div
and will not be blue.
</p>
</body>
</html>CSS Child Selector
css 中的子选择器用于定位特定元素的所有直接子元素。这由“>”（大于）符号表示。
The child selector in css is used to target all the direct child of a particular element. This is denoted by '>' (Greater than) symbol.
Syntax
div > p {
color: blue;
}上面的代码将 div 元素里面直接的段落标签的文本颜色设置为蓝色。
The above code set text color of paragraph tags that are directly inside div element to blue.
Example
以下示例演示了如何在 css 中使用子选择器。
The following example shows how to use child selector in css.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border: 2px solid;
}
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>
This paragraph is inside a div and
will be blue.
</p>
<section>
<p>
This paragraph is inside a
section which is inside a div
and will not be blue as this
is not direct child
</p>
</section>
</div>
<p>
This paragraph is outside the div
and will not be blue.
</p>
</body>
</html>CSS Adjacent Sibling Selectors
在 CSS 中，邻接兄弟选择器用于定位紧接在指定元素之前的元素。加号 ( "+" ) 用于表示邻接兄弟。
In CSS, adjacent sibling selector is used to target an element that is immediately preceded by a specified element. A plus symbol ( "+" ) is used to denote adjacent sibling.
Syntax
h1 + p {
margin-top: 0;
}上面的代码将 h1 标记后面的段落标记的顶部边距设置为 0。
The above code sets top margin of paragraph tag just after h1 tag to 0.
Example
以下示例展示了如何在 CSS 中使用邻接兄弟选择器。
The following example shows how to use adjacent sibling selector in css.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border: 4px solid;
}
div + p {
color: blue;
}
</style>
</head>
<body>
<p>
This paragraph is above the div
and will not be blue
</p>
<div>
<p>
This paragraph is inside a div
and will not be blue.
</p>
</div>
<p>
This paragraph 1 after the div
and will be blue.
</p>
<p>This paragraph 2 after the
div and will not be blue.
</p>
</body>
</html>CSS General Sibling Selector
在 CSS 中，通用兄弟选择器用于定位所有紧接在指定元素之前的元素。波浪号 ( "~" ) 用于表示通用兄弟。
In CSS, general sibling selector is used to target all the element that is preceded by a specified element. A tilde symbol ( "~" ) is used to denote general sibling.
Syntax
h1 ~ p {
color: gray;
}上面的代码将 h1 标记后面的所有段落的文本颜色设置为灰色。
The above code sets text color of all the paragraph after h1 tag to gray.
Example
以下示例展示了如何在 CSS 中使用通用兄弟选择器。
The following example shows how to use general sibling selector in css.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border: 4px solid;
}
div ~ p {
color: blue;
}
</style>
</head>
<body>
<p>
This paragraph is above the div
and will not be blue
</p>
<div>
<p>
This paragraph is inside a div
and will not be blue.
</p>
</div>
<p>
This paragraph 1 after the div
and will be blue.
</p>
<p>This paragraph 2 after the
div and will be blue.
</p>
</body>
</html>Nested Selectors In CSS
CSS 嵌套允许将一个样式规则嵌套进另一个规则内，子规则的选择器相对于父规则的选择器。
CSS nesting allows to nest one style rule inside another rule, with the selector of the child rule relative to the selector of the parent rule.
Characteristics of CSS nesting Selectors
nesting selector 展示了父规则和子规则之间的关系。
The nesting selector shows the relationship between the parent and child rules.
-
When the nested selectors are parsed by the browser, it automatically adds a whitespace between the selectors, thus creating a new CSS selector rule.
-
In situations where the nested rule needs to be attached to the parent rule (without any whitespace), like while using the pseudo-class or compound selectors, the & nesting selector must be prepended immediately to achieve the desired result.
-
In order to reverse the context of rules, the & nesting selector can be appended.
-
There can be multiple instances of & nesting selector.
Syntax
nav {
& ul {
list-style: none;
& li {
display: inline-block;
& a {
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}Example
以下示例展示了嵌套选择器 (&) 的用法：
Following example demonstrates the use of a & nesting selector (&):
<html>
<head>
<style>
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
& a {
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
}
</style>
</head>
<body>
<h1>& nesting selector</h1>
<p id="sample">
Hover <a href="#">over the link</a>.
</p>
</body>
</html>