精华内容
下载资源
问答
  • CSS选择器语法规则

    千次阅读 2018-09-16 22:23:57
    选择class=”intro”的所有节点 id firstname 选择id=”firstname”的所有节点 * * 选择所有节点 element p 选择所有p节点 element,element div,p 选择所有div节点和所有p节点 element element ...
    .class
    
    .intro
    
    选择class="intro"的所有节点
    
    #id
    
    #firstname
    
    选择id="firstname"的所有节点
    
    *
    
    *
    
    选择所有节点
    
    element
    
    p
    
    选择所有p节点
    
    element,element
    
    div,p
    
    选择所有div节点和所有p节点
    
    element element
    
    div p
    
    选择div节点内部的所有p节点
    
    element>element
    
    div>p
    
    选择父节点为div节点的所有p节点
    
    element+element
    
    div+p
    
    选择紧接在div节点之后的所有p节点
    
    [attribute]
    
    [target]
    
    选择带有target属性的所有节点
    
    [attribute=value]
    
    [target=blank]
    
    选择target="blank"的所有节点
    
    [attribute~=value]
    
    [title~=flower]
    
    选择title属性包含单词flower的所有节点
    
    :link
    
    a:link
    
    选择所有未被访问的链接
    
    :visited
    
    a:visited
    
    选择所有已被访问的链接
    
    :active
    
    a:active
    
    选择活动链接
    
    :hover
    
    a:hover
    
    选择鼠标指针位于其上的链接
    
    :focus
    
    input:focus
    
    选择获得焦点的input节点
    
    :first-letter
    
    p:first-letter
    
    选择每个p节点的首字母
    
    :first-line
    
    p:first-line
    
    选择每个p节点的首行
    
    :first-child
    
    p:first-child
    
    选择属于父节点的第一个子节点的所有p节点
    
    :before
    
    p:before
    
    在每个p节点的内容之前插入内容
    
    :after
    
    p:after
    
    在每个p节点的内容之后插入内容
    
    :lang(language)
    
    p:lang
    
    选择带有以it开头的lang属性值的所有p节点
    
    element1~element2
    
    p~ul
    
    选择前面有p节点的所有ul节点
    
    [attribute^=value]
    
    a[src^="https"]
    
    选择其src属性值以https开头的所有a节点
    
    [attribute$=value]
    
    a[src$=".pdf"]
    
    选择其src属性以.pdf结尾的所有a节点
    
    [attribute*=value]
    
    a[src*="abc"]
    
    选择其src属性中包含abc子串的所有a节点
    
    :first-of-type
    
    p:first-of-type
    
    选择属于其父节点的首个p节点的所有p节点
    
    :last-of-type
    
    p:last-of-type
    
    选择属于其父节点的最后p节点的所有p节点
    
    :only-of-type
    
    p:only-of-type
    
    选择属于其父节点唯一的p节点的所有p节点
    
    :only-child
    
    p:only-child
    
    选择属于其父节点的唯一子节点的所有p节点
    
    :nth-child(n)
    
    p:nth-child
    
    选择属于其父节点的第二个子节点的所有p节点
    
    :nth-last-child(n)
    
    p:nth-last-child
    
    同上,从最后一个子节点开始计数
    
    :nth-of-type(n)
    
    p:nth-of-type
    
    选择属于其父节点第二个p节点的所有p节点
    
    :nth-last-of-type(n)
    
    p:nth-last-of-type
    
    同上,但是从最后一个子节点开始计数
    
    :last-child
    
    p:last-child
    
    选择属于其父节点最后一个子节点的所有p节点
    
    :root
    
    :root
    
    选择文档的根节点
    
    :empty
    
    p:empty
    
    选择没有子节点的所有p节点(包括文本节点)
    
    :target
    
    #news:target
    
    选择当前活动的#news节点
    
    :enabled
    
    input:enabled
    
    选择每个启用的input节点
    
    :disabled
    
    input:disabled
    
    选择每个禁用的input节点
    
    :checked
    
    input:checked
    
    选择每个被选中的input节点
    
    :not(selector)
    
    :not
    
    选择非p节点的所有节点
    
    ::selection
    
    ::selection
    
    选择被用户选取的节点部分
    
    展开全文
  • 选择器 例子 例子描述 .class .intro 选择class="intro"的所有节点 #id #firstname 选择id="firstname"的所有节点 * * 选择所有节点 element p 选择所有p节点 element,element div,p 选择所有div节点和...
    选择器例子例子描述
    .class.intro选择class="intro"的所有节点
    #id#firstname选择id="firstname"的所有节点
    **选择所有节点
    elementp选择所有p节点
    element,elementdiv,p选择所有div节点和所有p节点
    element elementdiv p选择div节点内部的所有p节点
    element>elementdiv>p选择父节点为div节点的所有p节点
    element+elementdiv+p选择紧接在div节点之后的所有p节点
    [arttribute][target]选择带有target属性的所有节点
    [arttribute=value][target=blank]选择target="blank"的所有节点
    [arttribute~=value][title~=flower]选择title属性包含单词flower的所有节点
    :linka:link选择所有未被访问的链接
    :visiteda:visited选择所有已被访问的链接
    :activea:active选择活动链接
    :hovera:hover选择鼠标指针位于其上的链接
    :focusinput:focus选择获得焦点的input节点
    :first-letterp:first-letter选择每个p节点的首字母
    :first-linep:first-line选择每个p节点的首行
    :first-childp:first-child选择属于父节点的第一个子节点的所有p节点
    :beforep:before在每个p节点的内容之前插入内容
    :afterp:after在每个p节点的内容之后插入内容
    :lang(language)p:lang选择带有以it开头的lang属性值的所有p节点
    element~element2p~ul选择前面有p节点的所有ul节点
    [attribute^=value]a[src^=“https”]选择其src属性值以https开头的所有a节点
    [attribute$=value]a[src$=".pdf"]选择其src属性以.pdf结尾的所有a节点
    [attribute*=value]a[src*=“abc”]选择其src属性中包含abc子串的所有a节点
    :first-of-typep:first-of-type选择属于其父节点的首个p节点的所有p节点
    :last-of-typep:last-of-type选择属于其父节点的最后p节点的所有p节点
    :only-of-typep:only-of-type选择属于其父节点的唯一的p节点的所有p节点
    :only-childp:only-child选择属于其父节点的唯一子节点的所有p节点
    :nth-child(n)p:nth-child选择属于其父节点的第二个子节点的所有p节点
    :nth-last-child(n)p:nth-last-child同上,从最后一个子节点开始计数
    :nth-of-type(n)p:nth-of-type选择属于其父节点第二个p节点的所有p节点
    :nth-last-of-type(n)p:nth-last-of-type同上,但是从最后一个子节点开始计数
    :last-childp:last-child选择属于其父节点最后一个子节点的所有p节点
    :root:root选择文档的根节点
    :emptyp:empty选择没有子节点的所有p节点(包括文本节点)
    :target#news:target选择当前活动的#news节点
    :enabledinput:enables选择每个启用的input节点
    :disabledinput:disabled选择每个禁用的input节点
    :checkedinput:checked选择每个被选中的input节点
    :not(selector):not选择非p节点的所有节点
    ::selection::seclection选择被用户选取的节点部分
    展开全文
  • 1.什么是CSS:CSS全称为层叠样式表(Cascading Style Sheet),又称为风格样式表,表现HTML或XHTML文件样式的计算机语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。 2.CSS的优势 (1)内容与...

    1.1 CSS概述
    1.什么是CSS:CSS全称为层叠样式表(Cascading Style Sheet),又称为风格样式表,表现HTML或XHTML文件样式的计算机语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。
    2.CSS的优势
    (1)内容与表现分离
    (2)表现的统一
    (3)丰富的样式,使得页面布局更加灵活
    (4)减少网页的代码量,提高网页的浏览速度,节省网络宽度
    (5)运用独立于页面的CSS,还有利于网页被搜索引擎收录
    1.2 CSS的基本语法结构
    1 CSS的基本语法结构
    ① CSS规则由两部分构成,即选择器和声明
    ②声明必须放在大括号({})中,并且声明可以是一条或多条。
    ③每条声明由属性和值构成,属性和值之间用冒号分开,每条语句以英文分号结尾。
    h1 {
    font-size:12px;
    color:#F00;
    }
    2 认识< style>标签
    < style >标签用于为HTML文档定义样式信息,位于< head>标签中,它规定了浏览器中如何呈现HTML文档,用法如下:
    < style type=“text/css”>
    h1 {
    font-size:12px;
    color:#F00;
    }
    < /style>
    1.3 在HTML中引入CSS样式
    在HTML中引入样式的方法有三种,分别是行内样式、内部样式表和外面样式表
    1行内样式
    行内样式就是在HTML标签中直接使用style属性设置CSS样式,用法如下:
    < h1 style=“color:red;”>style属性的应用< /h1>
    < p style=“font-size:14px; color:green;”>直接在HTML标签中设置的样式< /p>
    2内部样式表
    CSS代码写在< head>的< style>标签中。
    < style>
    h1{color: green; }
    < /style>
    优点:方便在同页面中修改样式
    缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
    3外部样式表
    ①链接外部样式表
    链接外部样式表就是在HTML5页面中使用链接外部样式表,这个< link/>标签要放到页面的< head>标签内。
    语法:< head>
    ……
    < link href=“style.css” rel=“stylesheet” type=“text/css” />
    ……
    < /head>
    其中,rel="stylesheet"是指在页面中使用这个外部样式表;type="text/css"是指文件的类型是样式表文本; href="style.css"是文件所在的位置。
    ②导入外部样式表
    导入外部样式表就是在HTML网页中使用@import导入外部样式表,导入样式表的语句必须放在< style>标签中,而< style>标签必须放到页面的< head>标签内,语法如下:
    < head>
    ……
    < style type=“text/css”>
    < !–
    @import url(“style.css”);
    – >
    < /style>
    < /head>
    其中,@import表示导入文件,前面必须有一个@符号,url(“style.css”)表示样式表文件的位置。
    链接式与导入式的区别:
    < link/>标签属于XHTML,@import是属于CSS2.1
    使用< link/>链接的CSS文件先加载到网页当中,再进行编译显示
    使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
    @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的。
    4 样式优先级
    行内样式>内部样式表>外部样式表
    就近原则
    1.4 CSS3的选择器
    在CSS中,有三种最基本的选择器,分别是标签选择器、类选择器和ID选择器
    1、标签选择器
    HTML标签作为标签选择器的名称,语法如下:
    p { font-size:16px;}
    2、类选择器
    <标签名 class= “类名称”>标签内容</标签名>
    语法:.class { font-size:16px;}
    3、ID选择器
    语法:#id { font-size:16px;}
    小结:
    标签选择器直接应用于HTML标签
    类选择器可在页面中多次使用
    ID选择器在同一个页面中只能使用一次
    4、基本选择器的优先级
    ID选择器>类选择器>标签选择器
    问:标签选择器是否也遵循“就近原则”?
    答:不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

    任务2使用CSS高级选择器美化页面
    1.1 CSS3的高级选择器
    1层次选择器
    E F 后代选择权 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内。
    E>F 子选择器 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素。
    E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面。
    E~F 通用兄弟选择器 选择匹配的F元素,切位于匹配的E元素后的所有匹配的F元素。

    在这里插入图片描述
    (1)后代选择器
    后代选择器的作用就是可以选择某元素的后代元素,例如:“E F”中,E为祖先元素,F为后代元素,那么F元素无论是E的子元素。孙辈元素,或者更深层次的关系,都将被选选中。
    语法:body p{ background: red; }
    上面的代码表示body元素的后代元素p,即所有的p元素都会被选中
    注意:后代选择器的两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入
    (2)子选择器
    子选择器(E>F),只能选择某元素的子元素,其中E为父元素,F为子元素
    语法:body>p{ background: pink; }
    上面代码的意思是选择body的子元素,
    (1)相邻兄弟选择器
    相邻兄弟选择器(E+F)可以选择紧接在另一个元素后面的元素,它们有一个相同的父级元素。
    语法:.active+p { background: green; }
    上面代码的意思是选择类名为active的相邻兄弟p元素,也就是类active后面的一个p元素被选中
    (2)通用兄弟选择器
    通用兄弟选择器(E~F)用于选择某元素后面的所有兄弟元素。
    语法:.active~p{ background: yellow; }
    上面代码的意思是选择类名为active后面的所有兄弟元素p元素。
    2 结构伪类选择器
    所有结构伪类选择器都是基于HTML文档树的,也称文档对象模型(DOM)。文档树是HTML页面的层级结构,它由元素、属性和文本组成,它们都是一个节点。
    在这里插入图片描述
    根据上面的HTML文档,可以绘制一个清晰地DOM结构树,如下:
    在这里插入图片描述
    结构伪类选择器语法
    E:first-child:作为父元素的第一个子元素的元素E
    E:last-child: 作为父元素的最后一个子元素的元素E
    E F:nth-chuld(n): 选择父级元素E的第N个子元素F,(n可以是1,2,3),作为关键字为even、odd
    E:first-of-type:选择父元素内具有指定累心的第一个E元素
    E:last-of-type:选择父元素内具有指定类型的最后一个E元素
    E F:nth-of-type(n):选择父元素内具有指定类型的第N个F元素
    示例:
    ul li:first-child{background:red;}
    ul li:last-child{background:green;}
    p:nth-child(1){background:yellow;}
    p:nth-of-type(2){background:blue;}
    小结:使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
    E F:nth-child(n)在父级里从一个元素开始查找,不分类型
    E F:nth-of-type(n)在父级里先看类型,再看位置。

    3 属性选择器
    属性选择器的语法
    E[attr]:选择匹配具有属性attr的E元素
    E[attr=val]:选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
    E[attr$=val]:选择匹配元素E,且元素定义了属性attr,其属性值是以val结尾的任意字符串
    E[attr*=val]:选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配
    (1)E[attr]属性选择器
    E[attr]属性选择器是最简单的一种,用来选择㕛某个属性的元素,而无论这个属性值是什么。
    在示例41的style样式中添加如下代码:
    [id] { background: yellow; }

    (2)E[attr=val]属性选择器
    E[attr=val]属性选择器为元素E设置了属性attr,并且它的属性值为val。
    在示例41的style样式中添加如下代码:
    a[id=first] { background: red; }

    (3)E[attr*=val]属性选择器
    E[attr*=val]属性选择器设置了通配符,为元素E设置了属性attr,并且它的属性值总包含“val”字符串,也就是说只要所选择的属性中含有“val”字符串就可以被匹配上。
    在示例41的style样式中添加如下代码:
    a[class*=links] { background: red; }

    (4)E[attr^=val]属性选择器
    E[attr^=val]属性选择器为元素E设置了属性attr,并且它的属性值是以字符串“val”开头的所有E元素。
    在示例41的style样式中添加如下代码:
    a[href^=http] { background: red; }

    (5)E[attr = v a l ] 属 性 选 择 器 E [ a t t r =val]属性选择器 E[attr =val]E[attr=val]属性选择器与E[attr^=val]刚好相反,表示选择attr的属性值是以字符串“val”结尾的所有E元素。
    在示例41的style样式中添加如下代码:
    a[href$=png] { background: red; }

    展开全文
  • jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。基础语法: $(selector).action()美元符号定义 jQuery选择符(selector)"查询"和"查找" HTML 元素jQuery 的 ...

    jQuery 语法

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

    基础语法: $(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)"查询"和"查找" HTML 元素
    • jQuery 的 action() 执行对元素的操作

    实例:

    • $(this).hide() - 隐藏当前元素

    • $("p").hide() - 隐藏所有 <p> 元素

    • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

    • 文档就绪事件

      您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

      $ ( document ) . ready ( function ( ) { // 开始写 jQuery 代码... } ) ;

      这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

      如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

      • 试图隐藏一个不存在的元素
      • 获得未完全加载的图像的大小

      提示:简洁写法(与以上写法效果相同):

      $ ( function ( ) { // 开始写 jQuery 代码... } ) ;

      以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

      $("#test").hide() - 隐藏所有 id="test" 的元素

    -----------------------------------------------------------------------------------------------------------------------------

    jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。


    元素选择器

    jQuery 元素选择器基于元素名选取元素。

    在页面中选取所有 <p> 元素:


    实例

    用户点击按钮后,所有 <p> 元素都隐藏:

    <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    </head>


    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>点我</button>
    </body>

    </html>


    #id 选择器

    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

    页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

    通过 id 选取元素语法如下:

    $("#test")

    实例

    当用户点击按钮后,有 id="test" 属性的元素将被隐藏:

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>


    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <p id="test">这是另外一个段落</p>
    <button>点我</button>

    </body>

    这里可以看出 p取id选择器的时候在jq中调用用户按钮提示时只针对id选择器中的test进行操作隐藏


    .class 选择器

    jQuery 类选择器可以通过指定的 class 查找元素。

    语法如下:

    $(".test")

    实例

    用户点击按钮后所有带有 class="test" 属性的元素都隐藏:

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });
    </script>
    </head>
    <body>


    <h2 class="test">这是一个标题</h2>
    <p class="test">这是一个段落。</p>
    <p>这是另外一个段落。</p>

    <button>点我</button>

    更多实例



    独立文件中使用 jQuery 函数

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

    当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

    实例

    < head > < script src = " http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js " > </ script > < script src = " my_jquery_functions.js " > </ script > </ head >


    通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素,如果去掉冒号,$("button")只能获取 <button> 元素。

    <p id="test1">点进这里测试  <b>button</b></p>
    <p id="test2">点进这里测试 <b>:button</b></p>
    <button>Button 按钮</button>
    <input type="button" value="Input 按钮">


    关于 : 和 [] 这两个符号的理解

    可以理解为种类的意思,如:p:firstp 的种类为第一个。

    [] 很自然的可以理解为属性的意思,如:[href] 选取带有 href 属性的元素。


    展开全文
  • 定义的基本语法分为两个组成部分,一是选择器,二是属性说明 选择器{ 属性1:属性值1; 属性2:属性值2; … } 选择器指定了对哪些网页元素进行样式设置,选择器可以是HTML标签名、元素的类名、元素的ID名等。...
  • ist.js 是一个 javascript DOM 模板引擎,使用类似 CSS 选择器语法。 模板是文本文件,首先被解析并编译成模板对象,然后使用上下文对象渲染成 DOM 文档。 前往下载和获取更多信息,包括。 下面是一个 ist.js ...
  • css选择器(css1-css3) 学习css最基础也是最重要的就是学好css的选择器,它不仅能帮助你提高效率,还可以简化代码; 选择器 例子 说明 css .class .className 选中类名为className的元素 1 #id .ID_Name ...
  • 10)Thymeleaf 标记选择器语法

    千次阅读 2018-12-04 17:43:59
    标记选择器语法  基本语法使用 高级属性选择功能 jQuery式选择器 多值类匹配 标记选择器语法  官网地址:https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#appendix-c-dom-selector-syntax...
  • 你想使用类似于CSS或jQuery的语法来查找和操作元素。 方法 可以使用方法实现:Element.select(String selector) File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "...
  • querySelector() 选择器语法

    千次阅读 2019-10-06 18:11:27
    选择器示例示例说明CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 ...
  • 详解JSOUP的Select选择器语法

    千次阅读 2018-07-26 19:55:00
    你想使用类似于CSS或jQuery的语法来查找和操作元素。 方法 可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现: //从本地加载html文件 File input ...
  • 任何形式的选择器(包括元素选择器、 class 选择器、id 选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的 CSS 样式。
  • Xpath基本语法 举例元素标签为artical标签 语法 说明 artical 选取所有artical元素的子节点 /artical 选取根元素artical artical/a 选取所有属于artical的子元素a元素 //div 选取所有div 子...
  • 语法: 元素选择器.类选择器{} div.d1{ … } ⑤ id选择器 作用:匹配页面中指定id值的元素的样式 语法: #id的值{ ... } 例子: #mea{ color:red; } "mea" > .... ⑥ 群组...
  • JSOUP选择器语法说明

    千次阅读 2016-12-28 16:24:18
    它提供了一套非常省力的API,可通过...jsoup的强大在于它对文档元素的检索,Select方法将返回一个Elements集合,并提供一组方法来抽取和处理结果,要掌握Jsoup首先要熟悉它的选择器语法。 1、Selector选择器基本语法
  • jQuery选择器探究:语法汇总

    千次阅读 2016-04-17 18:09:23
    基本选择器包含id/class/tag等,层次选择器包含祖孙、父子、兄弟、同级选择器四种,过滤选择器比较多样化,有根据当前元素在同级元素集合中的位置选择的,有根据相对父元素的子元素选择的,有根据属性选择的,也有...
  • CSS内嵌样式的选择器是通过使用style标签写在head里的 选择器一共有9种: 1、标签选择器:是指通过元素的标签名字来选中元素 从而设置样式 语法结构:元素标签名{属性:属性值;属性:属性值} 2、id选择器:通过id选择...
  • 层级选择器(基础)+基本选择器

    千次阅读 2020-10-17 17:33:28
    ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素 语法:$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性,descendant是后代的标签或者属性
  • 摘要:今天来和大家分享一下JQuery的五种选择器的详细使用方法。
  • 选择器匹配所有不包含子元素或者文本的空元素。 注意:空格也属于选择器包含的元素。 语法结构: 代码如下:$(“:empty”) 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如: 代码如下:$...
  • 选择器匹配包含给定文本的元素。 语法: 代码如下:$(“:contains(text)”) 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如: 代码如下:$(“li:contains(‘html’)”).css(“color”,...
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子...交集选择器选择的元素必须是有第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的ID或...
  • CSS基础学习八:派生选择器

    千次阅读 2015-11-13 14:35:56
     在CSS1中,通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用...
  • CSS之派生选择器(上下文选择器

    千次阅读 2016-07-02 10:03:42
    选择器(selector)是CSS里面非常重要地一部分知识。根据我暂时浅薄地理解,CSS就是对一份HTML代码里面的元素进行运用各种样式。所以,第一步就是要准确地定位你想要运用样式的元素。CSS里面通过各种选择器来定位...
  • css层次选择器的理解

    千次阅读 2017-10-15 15:43:45
    } 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。 (2)语法:h1>em{color:red;} 仅仅选择直接子元素em,子元素...
  • CSS后代选择器

    千次阅读 2017-12-02 14:54:30
    关系选择器 ...于是,关系选择器包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
  • CSS选择符(选择器

    2019-05-04 17:19:33
    CSS选择符(选择器): 表示要定义样式的对象 1、元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称 { 属性:属性值;} 说明: a)元素选择符就是以文档...
  • 包含选择器和子选择器的区别

    千次阅读 2014-10-23 15:37:33
    包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是...
  • 本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一:什么是css选择器? CSS是一种用于屏幕上渲染html,xml等一种语言,...
  • CSS五大选择器

    千次阅读 2019-02-21 14:53:40
    选择器:用.+名称定义的css样式类型,叫类选择器在class中引用   如: .comment{  background-color: #0bbb15;  color: white;  margin: 20px;  padding: 20px; } &lt;div class=“comment&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 391,626
精华内容 156,650
关键字:

包含选择器的语法是