zoukankan      html  css  js  c++  java
  • CSS选择器

    1.为文档添加样式的三种方法

    a.行内样式

    b.嵌入样式

    c.链接样式

    在head标签插入如下代码引入外部样式表:

    <link href="style.css" rel="stylesheet" type="text/css"/>

    d.@import指令

    @import url(css/style.css)

    @import指令必须出现在样式表中其他样式之前,否则@import引用的样式不会被加载。

    2.上下文选择符(后代组合式选择符)

    格式:标签1 标签2 {声明}

    实例:article p {font-weight:bold;}

    Tip:上下文选择符以空格作为分隔符,而分组选择符则以逗号作为分隔符。

    3.特殊的上下文选择符

    3.1 子选择符 >

    格式:标签1 > 标签2

    实例:section > h2 {font-style:italic;}

    说明:标签2必须是标签1的子元素,或者反过来说,标签1必须是标签2的父元素。与常规的上下文选择符不同,这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

    3.2 紧邻同胞选择符 +

    格式:标签1 + 标签2

    实例:h2 + p {font-variant:small-caps;}

    说明:标签2必须紧跟在其他同胞标签1的后面。

    3.3 一般通报选择符~

    格式:标签1 ~ 标签2

    实例:h2 ~ a {color:red;}

    说明:标签2必须跟(不一定紧跟)在其他同胞标签1后面。

    3.4 通用选择符 *

    格式:* {...}

    实例:* {color:green}

    说明:会导致所有元素(的文本和边框)都变成绿色。

    实例1: p * {color:red;} //p包含的所有元素文本变成红色。

    实例2:section * a {font-size:1.3em;} //构成非子选择符。即任何section孙子元素,而非子元素的a标签都会被选中。

    4. ID和类选择符

    4.1 类属性

    4.1.1 类选择符

    格式:.类名

    实例:.specialtext{font-style:italic;}

    4.1.2 标签带类选择符

    格式:标签名.类名

    实例:p.speicaltext{color:red;}

    4.1.3 多类选择符

    格式:.类名.类名

    实例:.specialtext.featured{font-size:120%};

    说明:两个类名之间没有空格,选择的是同时具有这两个类名的那个元素。如果加了空格,就变成了“祖先/后代”关系的上下选择符。

    4.2 ID属性

    格式:#ID名 或 标签名#ID名

    实例:#specialtext {CSS 样式声明}或者 p#specialtext {CSS 样式声明}

     

  • 相关阅读:
    Synplify9.6.2破解(转帖)
    让博客园博客自动生成章节目录索引
    如何学好FPGA
    verilog 不可综合语句
    在FPGA中使用for循环一定浪费资源吗?
    在verilog中调用VHDL模块
    C#和Java中执行SQL文件脚本的代码(非常有用)
    C#通用JSON帮助类
    公共的Json操作C#类
    Calendar.NET
  • 原文地址:https://www.cnblogs.com/hlna/p/5477868.html
Copyright © 2011-2022 走看看