CSS基础篇之选择符

关系选择符

E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            P b{

                font-size: 60px;

                font-family: "微软雅黑";

                color: red;

            }

        </style>

    </head>

    <body>

        <p>

            <b>dd</b>

            <b>dd</b>

            <b>dd</b>

            <b>dd</b>

            <b>dd</b>

        </p>

    </body>

</html>

这里我调节h1元素内的所有P元素的字体大小为19像素。

用包含选择符时可以适用子元素里面全部包括子元素里面孙子元素都会有。

E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /* none 无 */

            .nav > li {

                list-style: none;

            }

        </style>

    </head>

    <body>

        <ul class="nav">

            <li>

                <a href="">菜单项1</a>

                <ul>

                    <li>AAA</li>

                    <li>BBB</li>

                    <li>CCC</li>

                </ul>

            </li>

            <li>

                <a href="">菜单项2</a>

                <ul>

                    <li>AAA</li>

                    <li>BBB</li>

                    <li>CCC</li>

                </ul>

            </li>

            <li>

                <a href="">菜单项3</a>

            </li>

            <li>

                <a href="">菜单项4</a>

            </li>

            <li>

                <a href="">菜单项5</a>

            </li>

        </ul>

    </body>

</html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /* none 无 */

            .nav > li {

                list-style: none;

            }

        </style>

    </head>

    <body>

        <ul class="nav">

            <li>

                <a href="">菜单项1</a>

                <ul>

                    <li>AAA</li>

                    <li>BBB</li>

                    <li>CCC</li>

                </ul>

            </li>

            <li>

                <a href="">菜单项2</a>

                <ul>

                    <li>AAA</li>

                    <li>BBB</li>

                    <li>CCC</li>

                </ul>

            </li>

            <li>

                <a href="">菜单项3</a>

            </li>

            <li>

                <a href="">菜单项4</a>

            </li>

            <li>

                <a href="">菜单项5</a>

            </li>

        </ul>

    </body>

</html>

这里调节了最外部的ul删除了前面的实心圆但是li标签里面的ul没有收到影响。

选用子选择符F元素只能是第一个子元素里有效在孙子元素里没用。

E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            h3 + small {

                color: red;

            }

        </style>

    </head>

    <body>

        <h3>这是h3标题</h3>

        <small>这是小标题</small>

        <p>这是内容...</p>

        <p>这是内容...</p>

        <h3>这是h3标题</h3>

        <small>这是小标题</small>

        <p>这是内容...</p>

        <p>这是内容...</p>

        <div>

            <small>我是div里面的small</small>

        </div>

    </body>

</html>

这里我调节了h3标签后面的small标签的颜色但是P标签没有影响。+号就是他们在上下关系中间不能间隔。建立相邻选择符时要在统一个父标签内。

E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            h3 ~ small {

                color: red;

            }

        </style>

    </head>

    <body>

        <h3>这是h3标题</h3>

        <small>这是小标题</small>

        <p>这是内容...</p>

        <p>这是内容...</p>

        <h3>这是h3标题</h3>

        <small>这是小标题</small>

        <p>这是内容...</p>

        <p>这是内容...</p>

        <div>

            <small>我是div里面的small</small>

        </div>

    </body>

</html>

这里选择的是h3的所有的兄弟标签small但是div标签内的small没有改变。你也可以把h3~p也是可以的。Small里面是没有变化。这个可以间隔。建立兄弟选择符时要在统一个父标签内。

Id和class

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

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

Id的属性值只能页面内存在一个，就像自己的身份证一样。

<h3 id="p1"> 这是一个段落 </p>

#h31 {

          font-size:12px;

          font-weight:bold;

        }

class选择符

<p class="p1"> 这是一个段落 </p>

        .p1 {

          font-size:12px;

          font-weight:bold;

        }

在网页中，每个id名称中只能使用一次，不得重复。

与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。

a:link {

                color: white;

            }

            a:visited {

                color: white;

            }

            a:hover {

                background: #c9e4ec;

            }

            a:active {

                background: #c9e4ec;

            }

这四个属性是在一起的而且顺序不能变按照上面一样可以设置字体颜色、样式、大小、背景颜色等...

持续更新。。。

CSS基础篇之选择符的更多相关文章

CSS基础篇之选择符2
属性选择符: 选择符版本描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
CSS基础篇之选择符3
border(边框) 如何用CSS调出边框我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度第二个值是为边框线样式为直线 ...
CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体作者: https://www.cnb ...
CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改注:HTML5不再支持使用frame,iframe只有src 属性一. ...
html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格正常情况下书写 ...
html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

随机推荐

海外建VPS并支持VPN
推荐 DigitalOcean http://www.digitalocean.com/?refcode=7c26aea99ed6
Tensorflow- tensor的列操作
几个point [:,i]类似python直接的index 列操作是可行的, 注意i不能是variable,如果是使用slice slice操作会保持和输入tensor一样的shape 返回而1对应 ...
Delphi容器类之---TList、TStringList、TObjectList，以及一个例程的代码分析
转载自:http://blog.csdn.net/jqandjq/article/details/5429137 看了这里标题,大家可能以为我会谈TListBox控件,那就错了.我要谈的是Delphi ...
[Spring] Spring配置文件中特殊字符的规定
今天查找一个错误,发现在xml里面不能包含特殊字符:&,特来总结一下: XML中共有5个特殊的字符,分别是:&<>“’.如果配置文件中的注入值包括这些特殊字符,就需要进行特 ...
Qt中 QString 和int， char等的“相互”转换
转载:http://blog.csdn.net/ei__nino/article/details/7297791 Qt中 int ,float ,double转换为QString 有两种方法 1.使用 ...
jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
0421 & SX2016
山西省选...这个省...不算强吧...然而就是这么腊鸡题目还是wa得一无是处...怎么办啊怎么办啊...无处拯救青春和未来啊... T1: POI2004原题 BZOJ1524 n<=16.这 ...
CSharp数据库代码生成工具
项目中遇到很多数据库表字段特别多的项目,手动一个一个去敲也不知道敲到什么时候,突发奇想做一个工具一劳永逸.花了一晚上做了这个东西,代码写的比较乱,用这个工具后减少了很多时间. Git地址:https: ...
Java Servlet规范
截自网址:http://blog.csdn.net/u010391029/article/details/46521051 JavaServlet Specification Version 2.3 ...

CSS基础篇之选择符

CSS基础篇之选择符的更多相关文章

随机推荐

热门专题