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

     

    CSS 元素选择器 http://www.w3school.com.cn/css/css_selector_type.asp

    h1 {color:blue;}

    选择器分组 http://www.w3school.com.cn/css/css_selector_grouping.asp

    h1,h2,h3,h4,h5,h6 {
      color: green;
      }
     
    所有的标题元素都是绿色的

    通配符选择器

    CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

    例如,下面的规则可以使文档中的每个元素都为红色:

    * {color:red;}

     

     

     

    在 CSS 中,类选择器以一个点号显示:http://www.w3school.com.cn/css/css_selector_class.asp

    .center {text-align: center}

    在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

     

    元素也可以基于它们的类而被选择:

    td.fancy {
    	color: #f60;
    	background: #666;
    	}

    在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

    <td class="fancy">

    CSS 多类选择器

    <p class="important warning">
    This paragraph is a very important warning.
    </p>
    .important {font-weight:bold;}
    .warning {font-weight:italic;}
    .important.warning {background:silver;}
     

    CSS ID 选择器详解 http://www.w3school.com.cn/css/css_selector_id.asp

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    id 选择器以 "#" 来定义。

    下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

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

    属性选择器 http://www.w3school.com.cn/css/css_selector_attribute.asp

    下面的例子为带有 title 属性的所有元素设置样式:

    [title]
    {
    color:red;
    }

    属性和值选择器

    下面的例子为 title="W3School" 的所有元素设置样式:

    [title=W3School]
    {
    border:5px solid blue;
    }
    [title~=hello] { color:red; }由空格分隔的属性值
    [lang|=en] { color:red; }连字符分隔的属性值
     

    CSS 后代选择器http://www.w3school.com.cn/css/css_selector_descendant.asp

    后代选择器(descendant selector)又称为包含选择器。

    后代选择器可以选择作为某元素后代的元素。

    如果写作 ul em {color:red;},这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深
     

    CSS 子元素选择器 http://www.w3school.com.cn/css/css_selector_child.asp

    与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

    例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {color:red;}

    CSS 相邻兄弟选择器 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

    例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}
     

    CSS 伪类 (Pseudo-classes) http://www.w3school.com.cn/css/css_pseudo_classes.asp

    CSS 伪类用于向某些选择器添加特殊的效果

    语法

    伪类的语法:

    selector : pseudo-class {property: value}

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

    selector.class : pseudo-class {property: value}

    锚伪类

    在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

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

    CSS2 - :first-child 伪类

    p:first-child {font-weight: bold;} 这个p是第一个子元素。修饰p
    li:first-child {text-transform:uppercase;}

    CSS 伪元素 (Pseudo-elements) http://www.w3school.com.cn/css/css_pseudo_elements.asp

    语法

    伪元素的语法:

    selector:pseudo-element {property:value;}

    CSS 类也可以与伪元素配合使用:

    selector.class:pseudo-element {property:value;}
    属性 描述 CSS
    :first-letter 向文本的第一个字母添加特殊样式。 1
    :first-line 向文本的首行添加特殊样式。 1
    :before 在元素之前添加内容。 2
    :after 在元素之后添加内容。 2
  • 相关阅读:
    图的深度遍历
    判断森林中有多少棵树
    基于邻接矩阵的广度优先搜索
    第三届程序设计知识竞赛网络赛
    大数相乘
    a+b=x,ab=y
    poj3278
    不敢死队
    单链表中重复元素删除
    poj2506
  • 原文地址:https://www.cnblogs.com/cute/p/2517908.html
Copyright © 2011-2022 走看看