CSS规则

一条CSS规则由选择器和声明组成,选择器有分组选择器,上下文选择器,id选择器,类选择器,伪类,伪元素 声明由属性和值组成.

CSS规则

• 选择符(选择器):指出规则所要选择的元素
  • 分组选择符
    • 以逗号作为分隔符
    • 多个选择符的简写形式
  • 上下文选择符：基于祖先或同胞元素选择一个元素。
    • 后代组合式选择符
      • 一组以空格分隔的标签名
      • 用于选择作为指定祖先元素后代的标签。
      • 只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。
    • 特殊的上下文选择符
      • 子选择符:`>`
        • 语法:标签1>标签2
        • 标签2必须是标签1的子元素，
      • 紧邻同胞选择符:`+`
        • 语法:标签1+标签2
        • 标签2必须紧跟在其同胞标签1的后面。
      • 一般同胞选择符`~`
        • 标签1~标签2
        • 标签2必须跟（不一定紧跟）在其同胞标签1后面。
      • 通用选择符`*`
        • `*`是一个通配符，它匹配任何元素，
        • 常被称为星号选择符
        • `p*{color:red;}`这样只会把p包含的所有元素的文本变成红色。
        • 构成非子选择符:`标签1 * 标签2`
          • `section*a{font-size:1.3em;}`:任何是section孙子元素，而子元素没有a标签的元素都会被选中。
  • ID和类选择符:基于id和class属性的值选择元素。
    • 类选择符
      • 语法:`.类名`，注意点号和类名之间不要有空格
      • 标签带类选择符
      • 多类选择符
        • HTML：`<p class="specialtext featured">`
        • CSS:`.specialtext.featured{font-size:120%;}`,选择同时存在这两个类名的元素,注意多个类名之间没有空格
    • ID选择符
      • HTML:`<p id="specialtext">`
      • CSS:` #specialtext{CSS样式声明}`, `p#specialtext{CSS样式声明}`
  • 属性选择符
    • 基于HTML标签的属性选择元素
    • 属性名选择符
      • 标签名[属性名]
        • 选择任何带有该属性标签。
        • HTML:`<img src="..." title="yellowflower" alt="yellowflower"/>`
        • CSS:`img[title]{...}`,选择带有title属性的img元素
    • 属性值选择符
      • `标签名[属性名="属性值"]`
      • 这个选择符可以让你控制到属性的值是什么。
      • HTML:`<img src="..." title="red flower" alt="red flower"/>`
      • CSS:`img[title="red flower"]{...}`:img标签的的title属性值为`red flower`的情况下才会选中该标签
  • 伪类
    • UI（UserInterface，用户界面）伪类
      • 基于特定HTML元素的状态应用样式。（比如鼠标指针位于链接上时）
      • 链接伪类
        • Link。此时，链接就在那儿等着用户点击。
          • a:link{color:black;}
        • Visited。用户此前点击过这个链接。
          • a:visited{color:gray;}
        • Hover。鼠标指针正悬停在链接上。
          • a:hover{text-decoration:none;}
        • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。
          • a:active{color:red;}
      • `:focus`伪类
        • 语法:`e:focus`,e表示任意标签
      • `:target`伪类
        • 语法:`e:target`
    • 结构化伪类
      • 结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。
      • 1.`:first-child`和`:last-child`
        • :`first-child`代表一组同胞元素中的第一个元素，而:`last-child`则代表最后一个。
      • 2.`:nth-child(n)`
        • e表示元素名，n表示一个数值（也可以使用`odd`或`even`）。
        • `li:nth-child(3)`
          • 会选择一组列表项中的每个第三项。
  • 伪元素
    • 1.`::first-letter`伪元素
      • 语法:`e::first-letter`
      • `::first-letter`伪元素可以用来创建首字符放大效果
    • 2.`::first-line`伪元素
      • 选中文本段落（一般情况下是段落）的第一行。
      • `e::first-line`
      • 注意，::first-line伪元素的长度会随浏览器窗口大小的变化而改变。
    • 3.`::before`和`::after`伪元素
      • 可用于在特定元素前面或后面添加特殊内容。
      • HTML:`<p class="age">25</p>`
      • CSS
        • `p.age::before{content:"Age:";}`
        • `p.age::after{content:"years.";}`
      • 显示结果
        • `Age:25years.`
      • 如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明性文字。
    • 搜索引擎不会取得伪元素的信息
• 声明
  • 属性
    • 属性指出要影响元素哪个方面的样式
  • 属性的值
    • 值是属性的一个状态
  • 每个声明以分号结尾,属性和值以冒号分隔