通配选择符（*）

          选定所有对象

  • 通配选择符(Universal Selector)
  • 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                color: #FF0000;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div>

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

        </div>

    </body>

</html>

   类型选择符（Element）

          以文档语言对象类型作为选择符

  • 类型选择符(Type Selector)
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p{

                color: #FF0000;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div>

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

        </div>

    </body>

</html>

   ID选择符（Element#ID）

          以唯一标识符id属性等于myid的E对象作为选择符

  • ID选择符(ID Selector)
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #language{

                color: #FF0000;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div>

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul id="language">

                <li>Java</li>

                <li>C#</li>

            </ul>

        </div>

    </body>

</html>

   类选择符（Element.class）

          以class属性包含myclass的E对象作为选择符

  • 类选择符(Class Selector)
  • 不同于ID选择符的唯一性，类选择符可以同时定义多个
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .a{

                color: #0000FF;

            }

            .b{

                font-weight:bold;

                font-size: x-large;

            }

        </style>

    </head>

    <body>

        <div>

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul class="a b">

                <li>Java</li>

                <li>C#</li>

            </ul>

        </div>

    </body>

</html>

CSS选择符-----元素选择符的更多相关文章

  1. CSS全览_选择符+特指+单位+字体

    CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...

  2. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  3. CSS选择符-----关系选择符

       包含选择符(E F)           选择所有被E元素包含的F元素 与 子选择符(E>F) 不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子... <! ...

  4. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  5. JQuery元素选择

    1.基本元素选择器 $(“p”) //选取<p>元素 $(“p.info”) //选取所有class=”info”的<p>元素 $(“p#demo”) //选取id=”demo ...

  6. CSS基本知识2-CSS选择

    选择就是CSS定义的第一部分,可以用面向对象的模式来理解,或者声明式的面向对象. 标准选择: #.E 进阶选择:“,”分隔多个相同项,相当于类的实例. 如:#btn1,#btn2,.btn {...} ...

  7. jq选择子元素

    jq选择子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="h ...

  8. Web自动化 - 选择操作元素 2

    文章转自 白月黑羽教Python 前面我们看到了根据 id.class属性.tag名 选择元素. 如果我们要选择的 元素 没有id.class 属性, 这时候我们通常可以通过 CSS selector ...

  9. 清除display:inline-block元素换行符间隙font-size:0;

    font-size:0; 清除display:inline-block元素换行符间隙 看例子: css: .dd {background-color: #ddd;} .dd2 {background- ...

随机推荐

  1. navicat新建用户，并赋予权限

    一.新建用户 二.设置主机和密码 主机%的意思是允许用户本地登入和远程登入. 三.选择表或者视图 右键,选择设置权限 四. 选择添加权限. 五. 选择用户以及Select  和  Show View ...

  2. 20165336 2017-2018-2 《Java程序设计》第2周学习总结

    学号 2017-2018-2 20165336 <Java程序设计>第2周学习总结 教材学习内容总结 第二章 标识符第一个字符不能是数字 标识符不能是关键字 byte型变量的取值范围是-2 ...

  3. python摸爬滚打之day14----内置函数,递归函数

    1.匿名函数 用一句话实现的简单函数. ret = lambda x : x ** 2      即 函数名 = lambda 形参 : 返回值 print(ret(5))  ----> 25 ...

  4. 元素class的增、删、查、toggle

    比如有一个元素div <div class="btn user">我是div</div> 之前只知道元素有一个className可以来改动  元素的类名 但 ...

  5. Servlet (二)ServletContext

    package cn.sasa.serv; import java.io.IOException; import javax.servlet.ServletContext; import javax. ...

  6. [GDOI2018]滑稽子图

    题目链接:[被和谐] 题目大意:对于一棵树$(V,E)$,对于$S\subset V$,$f(S)$为点集$S$的导出子图的边数.求$\sum_{S\subset V}f(S)^k$ 这里的导出子图说 ...

  7. nodejs 学习六 express 三种查询url参数方法

    req.param() 是被废弃的api req.params 俗点:取带冒号的参数 req.body 可以肯定的一点是req.body一定是post请求,express里依赖的中间件必须有bodyP ...

  8. system.out.printf()的使用方法

    package com.lzc.test; public class Main { public static void main(String[] args) { // 定义一些变量,用来格式化输出 ...

  9. 20171123初学demo爬去网页资料

    一.工具vs2015 +python3.5 import urllib.request import urllib.error import re def getcontent(url,page): ...

  10. element-table中使用checkbox

    <el-table-column label="> <template slot-scope="scope"> <el-checkbox v ...