codecamp

Selectors

先决条件: 基本的计算机素养, 安装必备的软件 basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of How CSS works.
目的: 要了解CSS选择器如何工作的细节.

基础

在上一篇文章中,我们详细介绍了 CSS语法和术语 回顾一下,选择器是CSS规则的一部分,并且恰好在CSS声明块之前。

不同种类的CSS选择器:

选择器可以分为以下类别:

  • Simple selectors (简单选择器): Match one or more elements based on element type, class, or id.
  • Attribute selectors (属性选择器): Match one or more elements based on their attributes/attribute values.
  • Pseudo-classes (伪类选择器): Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
  • Pseudo-elements (伪元素选择器): Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.
  • Combinators (组合选择器): These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.
  • Multiple selectors (多样 选择器): Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

选择器文章概述

接下来的四篇文章都探讨了选择器的不同方面 - 我们已经打破了这些信息,因为它有很多,我们希望使它不那么吓人,并给你一些明确的要点,在中学期间休息。 文章如下:

强烈建议您先处理简单选择器,以防您错过任何相关信息。

Fundamental CSS comprehension
Simple selectors
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
CSS

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }