zoukankan      html  css  js  c++  java
  • css选择器(1)——元素选择器、类名和id选择器

    css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式。当然它是通过选择器来实现这一点的。

    基本规则结构:

    语法= 选择器 +声明块

    1.元素选择器——直接使用html元素名,指向文档元素

      如果想给所有段落都添加缩进的话使用元素选择器是最好的选择

    p{
       text-indent:2em;  
    }

    2.类选择器和id选择器——独立于文档元素来指定样式

      a)类选择器:

      给部分段落文本加粗,以及列表的某些项,这时可以使用类选择器来应用样式而不需要像使用元素选择器一样考虑具体涉及的元素,只要事先给要指定样式的元素添加相同的类名即可(给需要指定样式元素的class属性指定相同的值)。

      选择器写法:"."加上类名

    .target{
        font-weight:bold;
    }

      b)多类选择器:

      一个元素可以不只有一个类名,class值还可以包含一个词列表,比如:class="first second";

    <style>
        /*通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素,类名的顺序可以颠倒*/
        /*匹配class既有one又有two的段落,第三段和第四段的字体被设置成了粗的*/
        p.one.two{
            font-weight: bold;
        }
    </style>
    <body>
            <p class='one'>one</p>
            <p class='two'>two</p>
            <p class='one two'>one + two</p>
            <p class='one two third'>one + two + third</p>
    </body>

      c)id选择器:

      你可能知道会在一个给定的文档中会有一个ID值为important的元素,但是你不知道这个最重要的东西是一个段落,一个短语,一个列表项还是一个小节标题,你只知道每个文档中都会有这么一个最重要的内容,它可能会出现在任何元素中,且只出现一次,那么这种情况下就可以使用id属性了。

      与class属性不同,id属性的一个值仅可以赋给一个元素,如果有一个元素的id值为one,那么该文档中其他元素的id值都不能是one。(实际上浏览器一般不检查html中id属性的唯一性,你设置多个元素有相同的id属性并不会报错)

      另外,与class属性不同,id值不能为词列表。如:id='one two'是错的。

      选择器写法:"#"加上id值。

    <style>
        #one{
            font-weight: bold;
        }
    </style>
    <body>
            <p id='one'>利用id选择器来指定样式</p>
    </body>

      

  • 相关阅读:
    axis2 WebService的发布与调用
    sql语句having子句用法,很多时候你曾忘掉
    linux下tomcat开机自启动
    框架使用的技术主要是SpringMVC 在此基础上进行扩展
    SpringMVC整合Mongodb开发 架构搭建
    解决Linux下3T硬盘分区只有2T(2199G)可用
    ubuntu cp(copy) command
    Linux如何根据UUID自动挂载磁盘分区
    python exec和eval
    在OpenERP报表中使用selection 类型字段
  • 原文地址:https://www.cnblogs.com/goforwards/p/8457012.html
Copyright © 2011-2022 走看看