精华内容
下载资源
问答
  • css类选择器
    千次阅读
    2021-08-24 18:10:45

    中间没有逗号隔开

    .A.B {
      text-align: center;
      color: red;
    }


    含义:同时包含A类和B类的情况下,才引用此格式

    注意:如果引用时引用了多个类,类之间产生矛盾,比如颜色又变红又变绿,那么后面的生效

    例如:

    .C {
      color: green;
    }
    
    .D {
      color: red;
    }
    
    
    <h1 class="C D">标题</h1>

    中间有逗号隔开

    .A,.B {
      text-align: center;
      color: red;
    }


    它的功能等同于:

    .A {
      text-align: center;
      color: red;
    }
    
    .B {
      text-align: center;
      color: red;
    }

    更多相关内容
  • css类选择器大全

    千次阅读 2022-03-04 11:07:57
    本文章立志于收集各种各样的css类选择器,先根据官方的参考手册,列举出其中的选择器,在以=以后接触到新的性质,或者是跟新出新的选择器,本文章也会做出相应的跟新。 一、常用的scc选择器? 最为基础的选择器:...


    # 前言 本文章立志于收集各种各样的css类选择器,先根据官方的参考手册,列举出其中的选择器,在以=以后接触到新的性质,或者是跟新出新的选择器,本文章也会做出相应的跟新。

    一、常用的scc选择器?

    最为基础的选择器:id选择器,类名选择器,标签选择器,*选择器。
    选择器的权重排序:
    id>class(属性选择器)>element(伪元素选择器)>星号(选择所有)
    css选择器列举:
    注意后代元素,子元素,父元素,父辈元素的区别

    css选择器效果
    .class1.class2选中同时拥有class1和class2的元素
    .class1 .class2选中class1样式后代元素的所有class2样式
    element.class选中class样式后代元素的所有element标签
    element,element同时选中两个标签元素
    element1 element2选中标签1后代元素下的所有标签2
    element1>element2选中所有父元素是element1的element2
    element1+element2选中element1元素下的第一个标签未element2的子元素
    element1~element2选中所有element1元素下所有的标签为element2的子元素
    [attribute]选中带有attribute属性的[attribute]元素
    [attribute=value]选中带有attribute属性且属性值为value的所有元素
    [attribute~=value]选中带有attribute属性且属性值包含"value" 的所有元素
    [attribute|=value]选中带有attribute属性且属性值以"value" 开头的所有元素
    [attribute^=value]选中带有attribute属性且属性值以"value"开头的所有元素
    [attribute$=value]选中带有attribute属性且属性值以"value"结尾的所有元素
    [attribute*=value]选中带有attribute属性且属性值包含"value"子串的所有元素
    [attribute*=value]选中带有attribute属性且属性值包含"value"子串的所有元素
    :active选中活动元素
    :link选中未访过的元素
    ::after在元素之后插入内容
    ::before在元素之前插入内容
    :checked选中默认元素
    :disabled选中禁用状态的元素
    :enabled选中启用的元素
    :empty选中没有子元素的元素
    :first-child选中自己是父元素第一个子元素的元素
    ::first-letter选中元素的首字母(p元素)
    ::first-line选中元素的首行
    :first-of-type选中自己是父元素首个该类型子元素的元素
    :focus选中获得焦点的元素
    :fullscreen选中处于全屏模式的元素
    :hover选中指针位于其上的元素
    :in-range选中值在一定范围内的input元素
    :indeterminate选中处于不确定状态下的元素
    :invalid选中具有无效值的input元素
    :lang(language)选中lang属性为language的元素,languange是语言,有专门的代号指代
    :last-child选中父元素最后一个子元素(选择器前的标签规范的是被选中的元素,而不是其他元素)
    :last-of-type选中父元素最后一个指定类型的元素
    :not(selector)不是该选择器选中的所有元素(非 逻辑)
    :nth-child(n)选中父元素的第n个子元素
    :nth-last-child(n)选择父元素的最后第n个子元素(逆向计数)
    :nth-of-type(n)根据上方理解
    :nth-last-of-type(n)根据上方理解
    :only-of-type选中其父元素的唯一类该元素的所有该元素
    :only-child选中其父元素的唯一一个该元素
    :optional选中不带‘required元素的input元素’
    :out-of-range选中超出指定范围的元素
    ::placeholder选中给出placeholder属性的input元素
    :read-only选中具有只读属性的元素
    :read-write选中不具有只读属性的元素
    :required选中具有required属性的元素
    :root选中文档的根元素
    ::selection选中用户已选用的元素
    :target选中当前活动的元素
    :valid选中带有有效值的input元素
    :visited选中已访问的元素

    二、伪元素以及伪类?

    css中添加伪元素以及伪类是为了格式化文档以外的内容,这些元素不在文档数中。
    伪类:元素在不同状态下的为其设定不同的样式。 修饰那些存在在DOM树中的元素,但是其所处于的状态不存在于DOM树中。
    伪元素:在存在在DOM树中的元素前后添加一些元素,为其添加样式。虽然这些元素在页面上可以看到,但是其并不存在于DOM树中。

    注意:
    :link,:visited,:hover,:active等这些伪元素在IE6中只支持在a标签后使用
    :active:点击链接时,链接成为活动的.
    :link未被访问页面的链接.
    :visited:已访问页面的链接.
    :hover :鼠标指针浮动到链接.
    :default:只能作用于表单上,选中默认状态的表单元素
    first-of-type和first-child的区别:
    前者是首个该类型的子元素,后者是第一个子元素且满足于前面的标签。

    展开全文
  • CSS选择器选择器)

    千次阅读 2022-06-01 19:34:06
    CSS基础选择器类选择器

    为什么要使用类选择器?

    因为标签选择器不能单个进行选择,所以在这里我们学习一个新的选择器。

    类选择器(class):类选择器需要通过class属性来调用

    语法结构:

    .类名{

    属性1:属性值1;

    属性2:属性值2;

    ....

    }

    例如:

    类选择器还可以给不同的标签进行相同的样式设置,只需要设置相同的类名即可 。

    效果图:

    例如:

    标签中还可以有多个类选择器,来进行样式设置

    效果图:

    总结:

    类选择器的取名是我们自己取得名字,不过一般在写代码的时候都会采用见名之意, 这也是为了让代码有更好的可读性。

    注意: 1.在css中使用类选择器时,要用英文的 ".",

                       2.不能使用标签名作为类名

                       3.一些长名词可以用短横线,例如pro-img

                       4.在命名时不要用纯数字和中文来命名,尽量使用英文来命名。

    多类名的使用:

    目的:我们可以给一个标签设置多个类名,从而达到更多的选择。 在使用多个类名时必须要用空格隔开。

    作用:一般在写代码的时候我们总会碰到不同的标签既有相同的样式又有不同的样式,重复写太多会增加代码的阅读量,降低可视性,修改起来也很麻烦,这个时候多个类名选择器就可以很好的解决。

     优点:节省代码,修改方便。

    body 代码:

    <ul>

            <li class="red">我是红色的li</li>

            <li class="blue">我是蓝色的li</li>

        </ul>

        <div class="red">我是红色的div</div>

        <!-- 既要这个div用蓝色的背景又要给他设置宽高 -->

        <div class="blue box">我是一个蓝色的正方形</div>

    css代码:

    .red{

                     /* 选择红色的li */

                       background-color: red;

                 }

                 .blue{

                     /* 选择蓝色的li */

                     background-color: blue;

                 }

                 .box{

                     width: 200px;

                     height: 200px;

                 }

    展开全文
  • CSS嵌套选择器

    千次阅读 2022-01-12 21:58:04
    2.3 嵌套选择器 在某个选择器内部再设置选择器,通过空格隔开 只有满足层次关系最里层的选择器所对应的标签才会应用样式 注意:使用空格时不区分父子还是后代,使用CSS3中新增的>时必须是父子关系才行 <!...

    2.3 嵌套选择器

    在某个选择器内部再设置选择器,通过空格隔开

    只有满足层次关系最里层的选择器所对应的标签才会应用样式

    注意:使用 空格 时不区分父子还是后代,使用CSS3中新增的 > 时必须是父子关系才行

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
    		h1.aaa{
    			color:red;
    		}
    		/* 1.标签选择器和ID选择器合起来使用----复合选择器 */
    		p#bbb{
    			color:blue;
    		}
    		/* 2.组合选择器 */
    		h1,p,div,span,.ccc{
    			font-size:30px;
    		}
    		div{
    			background:violet;
    		}
    		.ccc{
    			font-weight:bold;
    		}
    		/* 3.嵌套选择器 */
    		/* div p{
    			color:green;
    			text-decoration:underline;
    		} */
    		div>p{
    			color:green;
    			text-decoration:underline;
    		}
    		div h3.ddd{
    			color:red;
    		}
    	</style>
    </head>
    <body>
    	<!-- 需求:只想修饰class属性为aaa的h1标签 -->
    	<h1 class="aaa">welcome</h1>
    	<h4 class="aaa">css</h4>
    	<h1>hello</h1>
    	<hr>
    	<!-- 我要修饰ID属性为bbb的p标签 -->
    	<p id="bbb">world</p >
    	<p>html</p>
    	<h1 id="bbb">主讲:叽叽</h1>
    	<hr>
    	<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
    	<h1>hello</h1>
    	<p>CSS</p>
    	<div>WEB开发</div>
    	<span class="ccc">JAVA开发</span>
    	<hr>
    	<!-- 需求:修饰div内部的p标签 -->
    	<div>
    		<p>div内部的p标签</p>
    		<h3>div内部的h3标签</h3>
    	</div>
    	<hr>
    	<div>
    		<h3>
    			<p>div内部的h3内部的p标签</p>
    		</h3>
    	</div>
    	<hr>
    	<!-- 需求:修饰div内部的class为ddd的标签 -->
    	<div>
    		<p>div内部的p</p>
    		<h3 class="ddd">div内部的h3</h3>
    		<p class="ddd">PPPP</p>
    	</div>
    	<h3 class="ddd">h3h3h3</h3>
    </body>
    </html>
    

    展开全文
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值;...标签选择器主要针对的是页面中某个标签中的样式设置...2.类选择器 语法格式 <style type="text/css"> .类名{ 属性:属性值; 属性:属性值.
  • CSS常用五类选择器

    千次阅读 2020-12-22 09:52:11
    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。 ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器...
  • CSS类选择器

    万次阅读 多人点赞 2021-11-01 13:35:22
    CSS选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器类选择器 我们伪类选择器有几种,我们来看看第一种 静态伪: 只能用于超链接的样式 :link超链接点击之前 ...
  • CSS3提供了:第一个类型的伪,用于选择与其兄弟姐妹相关的其...坏消息是〜是一个CSS3选择器。好消息是,IE从IE7开始识别,就像CSS2的>所以如果你担心浏览器的兼容性,那么唯一的“主要浏览器”就是IE6。所以你...
  • CSS选择器的用法(详解)

    千次阅读 多人点赞 2020-08-07 13:50:16
    那选中的方法自然是多种多样,所以CSS选择器也是分为很多种,这里就来一一介绍。 一、CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器...
  • CSS选择器优先级

    千次阅读 2021-04-30 16:47:10
    CSS选择器优先级 (1)CSS选择器都有权重值,权重值越大优先级越高。 内联样式表的权重值最高,值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型(元素)选择器的优先级为1。 通配符选择器的...
  • 多个css类选择器使用规则

    万次阅读 多人点赞 2018-06-27 15:12:37
    类选择器在style中的写法: .类选择器名字 注意前面有个点在body中的写法: class="类选择器名字"通常为了减少代码量,使代码更简洁,机智的程序员们会选择调用已有的符合条件的样式,而若一个标签需要多...
  • css标签选择器、类名选择器、多类名选择器 标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下: <!DOCTYPE html> <html lang="en"> <head>...
  • 例如: .ui.item {…}和 .ui .item {…}还有 .ui &gt; .item {…} 第一个匹配: ;无法匹配: 和 ; 第二个匹配: 中间的 div; 第三个匹配: 中间的 div;无法匹配:。...规则 .ul.item 匹配 class 属性同时含有 ...
  • CSS六大选择器

    千次阅读 2021-10-12 10:06:39
    2. 类选择器:通过.box(可以是任意名称,.必不可少)来设置CSS样式,再通过class="box"方法来调用 例如: .box{ text-align: center; } <body> <div class="box"></box> </body> ...
  • 关于css子类选择器的用法

    千次阅读 2021-01-14 10:59:01
    不是使用于父类的css样式中,而是使用于子类的css样式中,表示选择父类的子类,如子类共同所属的为rectangle,子类是很多个div,如果选择奇数个子类(div),需要在.rectangel{}中使用:nth-child(2n+1)或者:nth-...
  • CSS属性选择器 选择以什么开头的类名
  • CSSclass选择器 的正确写法

    万次阅读 2017-12-01 10:16:59
    1.正确写法: 前面是标签名的通配符,后面是 class的名称。()*.a_class {color:red;}下面的简写,尽量少用.a_class {color:red;}2.举例举例:p.a_class {}解释为:“其 class 属性值为 a_class...3.多层叠加:同一
  • 1、css使用的基本语法: 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值;...2、Css使用的必要性: ...3、Css中常用的4种选择器: ...(1)、类选择器,又叫class选择器:  类选择器格式: . 类选择器{
  • css选择器失效问题解决方法

    千次阅读 2019-04-24 14:52:37
    今天写前台的时候发现一个问题,我的css文件中id选择器失效了,前台页面F12控制台中也没有对应的css内容,很是奇怪,内容是这样的: html文件中: css文件中: 前台: 那,真的是空空如也哈,后来找了下资料,...
  • CSS选择器的作用是从HTML页面中找出特定的某元素,而常用的CSS选择器有如下几,我们一起来看看吧! 一. 通配符选择器 通配符选择器常用' * '号表示,他是所有选择器里作用范围最广的,能匹配页面中所有的元素...
  • CSS选择器

    千次阅读 2022-03-29 22:56:42
    详细介绍CSS选择器的用法和分类
  • CSS复合选择器 建立在基础选择器上,对基本选择器进行组合形成的 可以更准确、更高效的选择目标元素(标签) 包含:后代选择器、子选择器、并集选择器、伪类选择器 一、后代选择器 又称为包含选择器,可以选择父元素...
  • CSS | css类选择器中的空格

    千次阅读 2017-11-09 09:37:55
    导读:有时候遇到css类选择器中间没有空格的,应用两个样式都有效果,但是加个空格在类选择器中间,有的样式就没有效果了,这是为什么呢??无空格.m-nav.nav-expanded {} 这两个样式同级,class中同时有.m-nav和...
  • css的ID选择器和class选择器的区别

    千次阅读 2021-02-28 18:10:40
    CSS的ID选择器和class选择器 一、ID选择器和Class选择器的区别 1、一个HTML标签只能应用于一个ID选择器 2、一个HTML标签可以应用多个class选择器 3、ID选择器是以“#”开头,并且只能在单个元素使用 4、Class选择器...
  • CSS类选择器的嵌套使用

    千次阅读 2019-04-25 21:35:20
    类选择器 在下面的例子中,有两个类选择器important和warming <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style type=...
  • css3选择器,不包含某个类名

    千次阅读 2020-11-11 17:31:07
    比如给没有active类名的span加上hover效果 span:not(.active):hover { color: #ff1464; }
  • css 选择器 1. css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式。 2. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器选择器类选择器 3. 标签选择器 ...
  • CSS基础选择器(7种)

    千次阅读 2020-04-05 10:06:52
    标记选择器是指用 HTML标记 名称作为 选择器 ,按标记名称分类,为页面中 某一标记 指定 统一 的CSS样式。其基本语法格式如下: 标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 例如: p{font-size:12px;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 442,158
精华内容 176,863
关键字:

css类选择器

友情链接: util.zip