CSS属性选择符与简化规则解读

需积分: 9 117 浏览量更新于2024-08-17 收藏 617KB PPT 举报

"属性选择符-CSS那些事读书笔记" 在CSS中，属性选择符是一种高级选择器，用于更精确地定位具有特定属性或者特定属性值的元素。本笔记主要探讨了四种属性选择符模式： 1. E[attr]：这种模式选择具有指定属性`attr`的所有`E`元素，不考虑属性值。例如，`img[alt]`将选择所有具有`alt`属性的`img`元素。 2. E[attr=“value”]：这种模式选择`E`元素中`attr`属性值等于`value`的元素。例如，`a[rel="nofollow"]`会选择所有`rel`属性值为`nofollow`的链接。 3. E[attr~=“value”]：这个模式匹配`E`元素中`attr`属性值包含`value`的元素，且`value`与其它值之间由空格分隔。例如，`p[class~="highlight"]`会选择`class`属性包含`highlight`的段落，即使`class`还有其他值。 4. E[attr|=“value”]：此模式选择`E`元素中`attr`属性值以`value`开头，并可能后跟一个连字符（-）的元素。这常用于语言选择，如`lang`属性。例如，`span[lang|="en"]`将选择所有语言设置以`en`开头的`span`元素，如`en-US`或`en-GB`。接下来，笔记介绍了CSS的基础知识，包括如何植入CSS代码，如在HTML文档的`<head>`部分使用`<style>`标签，以及CSS的结构——选择器（Selector）与声明（Declarations）的组成，如`Selector{property:value}`。 CSS简写是提高代码效率和可读性的关键。例如，颜色值可以用十六进制、RGB函数或颜色名称表示，且十六进制颜色可以缩写。当数值为0时，单位可以省略。对于内外补丁（padding和margin），可以有不同方式的简写，从单值到四值，以实现对各个边的快速设置。边框的简写允许同时设置宽度、样式和颜色，而背景属性的简写则可以合并背景颜色、图像和重复模式等。总结来说，属性选择符是CSS中的强大工具，它们帮助开发者更精准地定位和应用样式。而CSS的简写规则则有助于减少代码量并提高代码的可维护性，是CSS编写中不可或缺的部分。理解并熟练运用这些概念将对提升CSS布局和设计能力大有裨益。

八亿中产

粉丝: 27
资源: 2万+

CSS属性选择符与简化规则解读

jQuery核心技术：属性选择符与实战应用

深入理解CSS3属性选择符

JavaScript工具valid-css-props检查CSS属性有效性

Head+First+HTML与CSS、XHTML读书笔记

CSS+DIV学习笔记(史上最实用的CSS笔记).pdf

CSS学习笔记

html+css+js总结笔记

CSS样式学习笔记之一：基础知识

Jquery实战_读书笔记2 选择器

personal-notes:个人笔记整理，便于查看复习

最新资源