css中 body > .wrap 什么意思

html-css026

css中 body > .wrap 什么意思,第1张

CSS中的>是代表选择器的层级关系为直接子级。如下示例代码:

<body>

    <div class="wrap"></div>

    <div class="content">

        <div class="wrap"></div>

    </div>

</body>

如上边这个html代码结构。

body .wrap{}  这样写控制的就是body里边的所有class为wrap的元素,包括所有子孙级。

body >.wrap{} 这样写就只会控制直接子级,content里边的wrap就不会受控制。

各有好处,设置后就是一个整体,好操作,很少出现下面左偏右偏的情况,不设置的话,加载可能会快一些,因为加载的时候是一个一个的加载的,一个DIV包含的越小加载的越快(以上解答是听公司前端人员说的,我很久没写代码了,仅供参考)

他们是CSS中不同的选择器!

1、#wrap{ ... ... }表示ID选择器(唯一选择)id 选择器以 "#" 来定义。

下面是id选择器实例

<html>

<head>

    <style>

        #red {color:red}

        #green {color:green}

    </style>

</head>

<body>

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

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

</body>

</html>

2、.active   表示Class选择器(类选择器)在 CSS 中,类选择器以一个点号显示。

类选择器实例

<html>

<head>

    <style>

        .red {color:red}

    </style>

</head>

<body>

    <p class="red">这个段落是红色。</p>

    <p class="red">这个段落也是红色。</p>

</body>

</html>

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

伪类选择器实例:

<html>

<head>

  <style>

   a:link {color: #FF0000}/* 未访问的链接 */

   a:visited {color: #00FF00}/* 已访问的链接 */

   a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

   a:active {color: #0000FF}/* 选定的链接 */

  </style>

</head>

<body>

    <a href="zhidao.baidu.com">百度知道</a>

</body>

</html>

XXX { ...  ... }  表示元素选择器,最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身

元素选择器实例:

<html>

<head>

  <style>

   h1{color:red}

   h2{color:green}

  </style>

</head>

<body>

    <h1>百度知道</h1>

    <h2>百度知道</h2>

</body>

</html>