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

     最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总。部分源码来自www.w3school.com.cn!

     插入样式表的方法有三种:

     第一种:外部样式表

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

    第二种:内部样式表

    <head>
    <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>
    </head>

    第三种:内联样式表

    <p style="color: sienna; margin-left: 20px">
    This is a paragraph
    </p>

    CSS基本的选择器有四种,其它复杂的选择器都由这四种组合而成

    1. 元素选择器(类型选择器)
    2. id选择器
    3. 类选择器
    4. 属性选择器

    选择器的基础语法,规则由两个主要的部分构成:选择器,以及一条或多条声明。

    //CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
    
    selector {declaration1; declaration2; ... declarationN }
    
    //每条声明由一个属性和一个值组成。
    
    selector {property: value}

         1. 元素选择器(类型选择器)

    1. h1 {font-family: sans-serif;}
    同时也可以为XML文档设置样式:

    XML文档:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <?xml-stylesheet type="text/css" href="note.css"?>
    <note>
    <to>George</to>
    <from>John</from>
    <heading>Reminder</heading>
    <body>Don't forget the meeting!</body>
    </note>

    CSS样式:

    note
      {
      font-family:Verdana, Arial;
      margin-left:30px;
      }
    
    to
      {
      font-size:28px;
      display: block;
      }
    
    from
      {
      font-size:28px;
      display: block;
      }
    
    heading
      {
      color: red;
      font-size:60px;
      display: block;
      }
    
    body
      {
      color: blue;
      font-size:35px;
      display: block;
      }

        2.id选择器

    id 属性只能在每个 HTML 文档中出现一次!

    HTML代码:

    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

    CSS样式:

    #red {color:red;}
    #green {color:green;}

        3.类选择器

    在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

    <h1 class="center">
    This heading will be center-aligned
    </h1>
    
    <p class="center">
    This paragraph will also be center-aligned.
    </p>

    CSS样式:

    .center {text-align: center}

        4.属性选择器

    css属性选择器参考
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

    为了更准确的定位HTML元素并对其添加样式,在上面四种基础选择器上面,CSS选择器还可以分成:分组选择器,派生选择器,后代选择器,子元素选择器,相邻兄弟选择器,伪类和伪元素。

    *1.分组选择器

    /* no grouping */
    h1 {color:blue;}
    h2 {color:blue;}
    h3 {color:blue;}
    h4 {color:blue;}
    h5 {color:blue;}
    h6 {color:blue;}
    
    /* grouping */
    h1, h2, h3, h4, h5, h6 {color:blue;}

    *2.派生选择器

    派生选择器是通过依据元素在其位置的上下文关系来定义样式的。

    HTML代码:

    <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
    
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>

    CSS代码:

    li strong {
        font-style: italic;
        font-weight: normal;
      }

     *3.后代选择器

    后代选择器又称包含选择器,可以选择某元素的任意一代的后代元素。

    HTML代码:

    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>

    CSS代码:

    h1 em {color:red;}

    *4.子元素选择器

    子元素选择器只可选择某元素第一代后代的选择器。

    HTML代码:

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

    CSS代码:

    h1 > strong {color:red;}

    *5.相邻兄弟选择器

    相邻兄弟选择器会选择某一元素紧随其后的元素,但是前提是他们拥有相同的父级。

    eg1:

    HTML代码:

    <h1>
        <h2>This is a heading<h2>
        <strong>This will be styled.</strong>
        <strong>This will not be styled.</strong>
    <h1>

    CSS代码:

    h2 + strong {color:red;}
    • 语法规则是h2和strong之间有一个“+”,“+”和前面的h1或者后面的strong之间的空格都是可有可无的。
    • 在 以上例子中,第一个strong紧邻着h2并且他们拥有相同的父级(h1),所以h2 + strong会选择到第一个<strong>而不会选到第二个<strong>.

    eg2:

    HTML代码:

    <div> 
        <ul>     
            <li>List item 1</li> 
            <li>List item 2</li> 
            <li>List item 3</li> 
        </ul> 
         <ol> 
             <li>List item 1</li> 
             <li>List item 2</li> 
             <li>List item 3</li> 
        </ol> 
    </div>

    CSS代码:

    li + li {color:red;}
    • 在以上的例子中li+li是选择紧挨着li后面的第一个<li>,所以第一个<li>不会被选择;而第二个<li>是紧挨着第一个li的,所有会被选择;第三个<li>是紧挨着第二个<li>的,也会被选择。

     *6伪类

    伪类的语法:

    selector : pseudo-class {property: value}

    CSS 类也可与伪类搭配使用:

    selector.class : pseudo-class {property: value}
    属性 描述
    :active 向被激活的元素添加样式。
    :focus 向拥有键盘输入焦点的元素添加样式。
    :hover 当鼠标悬浮在元素上方时,向元素添加样式。
    :link 向未被访问的链接添加样式。
    :visited 向已被访问的链接添加样式。
    :first-child 向元素的第一个子元素添加样式。
    :lang 向带有指定 lang 属性的元素添加样式。

    超链接例子:

    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */

    *7伪元素

    属性 描述
    :first-letter 向文本的第一个字母添加特殊样式。
    :first-line 向文本的首行添加特殊样式。
    :before 在元素之前添加内容。
    :after 在元素之后添加内容。
  • 相关阅读:
    Android中的“再按一次返回键退出程序”代码实现
    Android UI编程之自定义控件初步——ImageButton
    21岁,我想当“大帅”
    茑萝改变了我
    茑萝,梦想的加油站
    放弃了我的国企工作
    性能调优之访问日志IO性能优化
    性能调优之提高 ASP.NET Web 应用性能的 24 种方法和技巧
    性能调优之剖析OutOfMemoryError
    老李分享:单元测试检查清单:让测试有效,避免致命错误
  • 原文地址:https://www.cnblogs.com/zhongJaywang/p/5456891.html
Copyright © 2011-2022 走看看