精华内容
下载资源
问答
  • CSS类选择器

    2021-05-03 09:53:11
    CSS类选择器 ** 类选择器允许一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。 要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 类选择器是通过class类...
                                   CSS类选择器
    

    类选择器允许一种独立于文档元素的方式来指定样式。
    该选择器可以单独使用,也可以与其他元素结合使用。
    要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
    类选择器是通过class类设置CSS样式
    注意:class命名不能以数字开头
    为了将类选择器的样式与元素关联,必须将class类指定为一个适当的值。
    在这里插入图片描述

    两个元素的class类都指定为show,第一个(h1标签)为标题,第二个(p标签)为段落。(如图)
    在这里插入图片描述

    我们使用语法向这些归类的元素应用样式,即类名前有一个点号(.)
    在这里插入图片描述
    在这里插入图片描述

    类选择器可以结合元素选择器来使用。
    例如,您想只有段落显示为蓝色:
    在这里插入图片描述

    选择器现在会匹配class类属性包含show的所有p标签,但是其他任何类型的标签都不匹配,无论是否有class类属性。选择器p.show为“class类属性值为show的所有段落”。因为h1标签不是段落,所以选择器与之不匹配。因此h1标签不会变为蓝色文本。
    在这里插入图片描述

    如果您想为h1标签指定不同的样式,可以使用选择器h1.show:

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • CSS 类选择器

    2014-08-21 13:35:54
    CSS 类选择器CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这...

    在 CSS 中,类选择器以一个点号显示:

    .center {text-align: center}

    在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

    在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

    <h1 class="center">
    This heading will be center-aligned
    </h1>
    
    <p class="center">
    This paragraph will also be center-aligned.
    </p>
    

    注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

    和 id 一样,class 也可被用作派生选择器:

    .fancy td {
    	color: #f60;
    	background: #666;
    	}
    

    在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

    元素也可以基于它们的类而被选择:

    td.fancy {
    	color: #f60;
    	background: #666;
    	}
    

    在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

    <td class="fancy">

    你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。

    展开全文
  • css类选择器与id选择器 句法 (Syntax) .className { declaration block } 描述 (Description) Selecting elements on the basis of their class names is a very common technique in CSS. The attribute ...

    css类选择器与id选择器

    句法 (Syntax)

    .className {
    declaration block
    }
    
    

    描述 (Description)

    Selecting elements on the basis of their class names is a very common technique in CSS. The attribute selector syntax [class~="warning"] is rather awkward, but thankfully there’s a simpler and shorter form for it: the class selector.

    根据类名选择元素是CSS中非常常见的技术。 属性选择器语法[class~="warning"]有点笨拙,但值得庆幸的是,它有一个更简单,更短的形式:类选择器。

    Here’s a simple example that selects all elements with a class attribute that contains the value “warning“:

    这是一个简单的示例,该示例选择具有class属性(包含值“ warning ”)的所有元素:

    .warning {
      ⋮ declarations
    }

    This example also illustrates the use of an implied universal selector—it’s equivalent to *.warning. Note that whitespace characters can’t appear after the period, or between an element type selector, or explicit universal selector, and the period. For example, the following selector will match all p elements with a class attribute that contains the value “warning“:

    此示例还说明了隐式通用选择器的用法-等效于*.warning. 请注意,空格字符不能在句点之后,元素类型选择器或显式通用选择器与句点之间出现。 例如,以下选择器会将所有p元素与包含值“ warning ”的class属性进行匹配:

    p.warning {
      ⋮ declarations
    }

    A simple selector may contain more than one attribute selector and/or class selector; in such cases, the selector pattern matches elements whose attributes contain all the specified components. Here’s an example:

    一个简单的选择器可以包含多个属性选择器和/或类选择器。 在这种情况下,选择器模式将匹配其属性包含所有指定组件的元素。 这是一个例子:

    div.foo.bar {
      ⋮ declarations
    }
    div.foo.bar[title^="Help"] {
      ⋮ declarations
    }

    The first example selector above matches div elements whose class attribute value contains both the words "foo" and "bar". The second example selector matches div elements whose class attribute values contains both the words "foo" and "bar", and whose title attribute values begin with the string "Help". To clarify further the html that would match the above selectors could be as follows:

    上面的第一个示例选择器匹配div元素,这些元素的class属性值包含单词"foo""bar" 。 第二个示例选择器匹配div元素,这些元素的class属性值包含单词"foo""bar" ,并且其title属性值以字符串"Help"开头。 为了进一步阐明将与上述选择器匹配的html,可能如下所示:

    <div class="foo bar">Matches first example</div>
    <div class="foo bar" title="Help">Matches second example</div>

    (Example)

    The following selector will match all p elements with a class attribute that contains the value "intro":

    以下选择器会将所有p元素与包含值"intro"class属性进行匹配:

    p.intro {
      ⋮ declarations
    }

    翻译自: https://www.sitepoint.com/class-selector-css-selector/

    css类选择器与id选择器

    展开全文
  • css类选择器就是在类名前面加一个点号了,如果是多类不是打多个点号而以.important.urgent这种形式了,下面我来给大家介绍一下CSS 类选择器与多类选择器的用法
  • CSS 类选择器详解——CSS类选择器

    千次阅读 2014-12-23 22:59:44
    CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。 提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些...

    类选择器允许以一种独立于文档元素的方式来指定样式。

    CSS 类选择器

    类选择器允许以一种独立于文档元素的方式来指定样式。

    该选择器可以单独使用,也可以与其他元素结合使用。

    提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。

    要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

    修改 HTML 代码

    在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。

    为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码:

    <h1 class="important">
    This heading is very important.
    </h1>
    
    <p class="important">
    This paragraph is very important.
    </p>
    

    在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。

    语法

    然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:

    *.important {color:red;}

    如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:

    .important {color:red;}

    亲自试一试

    结合元素选择器

    类选择器可以结合元素选择器来使用。

    例如,您可能希望只有段落显示为红色文本:

    p.important {color:red;}

    选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。

    如果你确实希望为 h1 元素指定不同的样式,可以使用选择器 h1.important:

    p.important {color:red;}
    h1.important {color:blue;}
    

    亲自试一试

    CSS 多类选择器

    在上一节中,我们处理了 class 值中包含一个词的情况。在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

    <p class="important warning">
    This paragraph is a very important warning.
    </p>
    

    这两个词的顺序无关紧要,写成 warning important 也可以。

    我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

    .important {font-weight:bold;}
    .warning {font-style:italic;}
    .important.warning {background:silver;}
    

    亲自试一试

    通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

    如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则:

    .important.urgent {background:silver;}

    不出所料,这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 important 和 warning,将不能匹配。不过,它能匹配以下元素:

    <p class="important urgent warning">
    This paragraph is a very important and urgent warning.
    </p>
    

    亲自试一试

    重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。

    展开全文
  • PAGE / NUMPAGES 解析五大CSS选择器与链接伪类使用 本文向大家描述一下五种CSS选择器与链接伪类的使用主要包括标签选择器id选择器类选择器群组选择器后代选择器五种准确而简洁的运用CSS选择器会达到非常好的效果相信...
  • css类选择器使用

    2017-09-27 18:07:31
    css类选择器 !doctype html> 类选择器 /*根据继承,给父元素设置样式,子元素也会继承*/ /*针对某一类标签,可以使用标签选择器*/ p{font-size:15px;color:blue;} /*针对某一个元素,ID选择器*...
  • CSS | css类选择器中的空格

    千次阅读 2017-11-09 09:37:55
    导读:有时候遇到css类选择器中间没有空格的,应用两个类样式都有效果,但是加个空格在类选择器中间,有的样式就没有效果了,这是为什么呢??无空格.m-nav.nav-expanded {} 这两个样式同级,class中同时有.m-nav和...
  • title: CSS 类选择器的特殊使用-多类名 CSS 类选择器的特殊使用-多类名概念 一个标签有多个名字 多类名的使用方式 示例代码 多类名在开发中的使用场景
  • 本节我们来讲一下类选择器和ID选择器。 上一节我们学习了标签选择器,但是在使用标签选择器的时候会有一个问题,举个例子,我们先来看下面这段代码: <!DOCTYPE> <html> <head> <meta ...
  • 1、结合元素选择器 <p class="important">css</p> p.important {color: red} ...2、多类选择器 <div class="option selected"></div> .option.selected {color: red} 匹...
  • 1、css使用的基本语法: 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值;...2、Css使用的必要性: ...3、Css中常用的4种选择器: ...(1)、类选择器,又叫class选择器:  类选择器格式: . 类选择器{
  • 第十一讲 初识css 类选择器 id选择器 html选择器 1、css 使用必要性  css 使用的基本语法 选择器{ 属性1:属性值 属性2:属性值 ..... } 2、css 的必要性2:可以使用滤镜 3、css 中常用的四种选择...
  • Style Multiple Elements with a CSS Class你可以在 HTML ...CSS 类选择器必须添加.为前缀,如下:.blue-text { color: blue;}但在HTML中class属性的值不需要添加.为前缀,如下:&lt;h2 class="blue-te...
  • 一个实际例子:
  • CSS/HTML 的 css类选择器的使用方法详解类选择器在 CSS 中,类选择器以一个点号显示:代码如下:.center {text-align: center}在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中,h1 和...
  • 多个css类选择器使用规则

    万次阅读 2018-06-27 15:12:37
    类选择器在style中的写法: .类选择器名字 注意前面有个点在body中的写法: class="类选择器名字"通常为了减少代码量,使代码更简洁,机智的程序员们会选择调用已有的符合条件的样式,而若一个标签需要多...
  • 修改Bootstrap框架中的css样式前言Bootstrap中的原有css样式展示修改总结 前言 本篇以自己搭建注册页面遇到的问题作为展示,来解释如何修改原有bootstrap中的css样式 Bootstrap中的原有css样式展示 修改 总结 虽然...
  • 5. CSS 类选择器

    2015-08-02 15:18:46
    CSS 中,类选择器以一个点号显示:.center {text-align: center}在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center...
  • 类选择器+CSS(内嵌式) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>类选择器+CSS内嵌式</title> <style type="text/css"> .g{color:#1B6FEF; ...
  • 先从代码示例入手: .tapNav.selected{ background:lightblue; } {{item.name}} ...text 可能存在样式class = "tapNav selected...CSS类选择器 在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用
  • CSS 类选择器(四)

    2015-04-10 04:03:00
    一、类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户简化页面控制。 二、类选择...
  • CSS 的基本语法:选择器{属性1:属性值; 属性2:属性值; ...}例:a.html <!--引入CSS,外联--> <link rel="stylesheet" type="text/css" href="my.css"> </head><body> <!--span元素通常用于存放小块内容--> 栏目...
  • css样式 ——css网页美容师——css初识——引入css样式——css基础选择器——css文字文本样式——css测试工具——sublime快捷语法emment 结构(html)与样式(css)相分离 css作用 css是为了设置html的版面布局和...
  • ID选择器和类选择器的区别:区别 1:只能在文档中使用一次 与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。 区别 2:不能使用 ID 词列表 不同于类选择器,ID 选择器不能结合使用,因为 ID 属性...
  • code .a{ background: red;...最初以为更改元素中class里面的类名顺序,渲染效果就会根据类名顺序依次渲染 ...更改样式表里的顺序 渲染...结论:两个中有同样的属性覆盖顺序是css样式表从下往上的顺序

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,305
精华内容 6,522
关键字:

css类选择器