精华内容
下载资源
问答
  • 标签选择器(元素选择器

    千次阅读 2019-10-02 20:05:36
    标签选择器(元素选择器) 标签器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} 标签...

    标签选择器(元素选择器)
    标签器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
    标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		p {
    			color:green;
    			font: italic 700 32px "微软雅黑";
    		}
    	</style>
    </head>
    <body>
    	<p>标签选择器例子</p>
    </body>
    </html>

    效果如下:

    展开全文
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...

    复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。

    1. 交集选择器

    交集选择器由两个选择器直接构成,其中第一个必须是元素选择器,第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写,不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式,即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。

    比如: p.one 选择的是: 类名为 .one 的 段落标签。

    元素选择器.类选择器|#ID选择器{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    **PS:交集选择器由于会增加代码量,会影响性能且不利于后期维护,所以除了不得已使用外,一般不推荐使用。


    2.并集选择器
    并集选择器也叫分组选择器或群组选择器,它是有两个或两个以上的任意选择器组成的,不同选则器之间用","隔开,实现对多个选择器进行“集体声明”,特点是:所设置的样式对并集选择器中各个选择器都有效,它的作用是把不同选择器的相同样式抽取出来,然后放到一个地方一次性定义,从而简化了CSS代码量。

    选择器1,
    选择器2,
    选择器3,
    …{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:选择器的类型任意,既可以是基本选择器,也可以是一个复合选择器。
    3.后代选择器
    后代选择器又称包含选择器,用于选择指定元素的后代元素

    选择器1 选择器2 选择器3 …{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明位于左边的选择器可以包含两个或多个使用空格隔开的选择器,位于后面的选择器选择的元素术语前面选择器的孩子,这些选择器既可以是基本选择器,也可以是复合选择器,需要注意的是,后代选择器所选择的后代元素包括任意嵌套层次的后代,而且一般后代选择器中包含的选择器最多三层。

    4.子元素选择器
    后代选择器可以选择某个元素指定类型的所有后代元素,如果只想选择某个元素的所有子元素,则需要使用子元素选择器。

    选择器1>选择器2{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:">"称为左结合符,在其左右两边可以出现空格,“选择器1>选择器2”的含义为选择作为选择器1指定元素的所有选择器2指定的子元素,例如:div>span表示选择了div元素内的所有子元素span。子元素选择器中的两个选择器既可以是基本选择器,也可以是交集选择器,另外选择器1还可以是后代选择器。
    我一开始觉得后代选择器和子元素选择器,它们两个似乎很像,但是它们还是有一定的区别:例如下面这两行语句:

    <h1>这是非常<span>重要</span>且<span>关键</span>的一步。</h1>
      <h1>这是真的非常<em><span>重要</span></em>且<em><span>关键</span></em>的一步。</h1>
    

    如果我们想操作span元素,如果使用后代选择器,即h1 span,会对这两行的span元素都进行操作,因为这两行中的span都是h1的后代,但是如果我们想只对第一行的span元素进行操作,可以用子元素选择器,即h1>span,因为第二行的span元素是em元素的子元素,并不直接是h1的子元素。
    5.相邻兄弟选择器
    如果需要选择紧接在某个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

    选择器1+选择器2{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    "+"称为相邻兄弟结合符,在其左右两边可以出现空格,"选择器1+选择器2"的含义为选择紧接在选择器1指定元素后出现选择器2指定的元素,且这两个元素拥有共同的父元素,例如:div+span 表示选择紧接在div元素后出现的span元素,其中div和span两个元素拥有共同的父元素。
    6.属性选择器
    在CSS中,我们还可以根据元素的属性及属性值来选择元素,此时用到的选择器称为属性选择器,属性选择器的使用主要有两种形式,其基本语法如下:

    属性选择器1属性选择器2…{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    元素选择器属性选择器1属性选择器2…{
    	属性1:属性值1;
    	属性2:属性值2;
    	…
    }
    

    语法说明:属性选择器的写法是[属性表达式],其中属性表达式可以是一个属性名,也可以是“属性=属性值”等这样的表达式,例如:[title]和[type="text"]都是属性选择器,属性选择器前可以指定某个元素选择器,此时将在指定类型的元素中进行选择,例如:img[title]只能选择具有title属性的img元素。属性选择器前也可以使用通配符"*",此时效果和第一种形式完全一样,都不限定选择元素的类型,例如:*[title]和[title]效果完全一样,都将选择具有title属性的所有元素,注意"*"和属性选择器之间没有空格,另外可以连续使用多个不同的属性选择器,此时将进一步缩小元素选择的范围,例如:a[href][title]用于选择同时具有href和title属性的a元素

    类型 选择器 描述
    根据属性选择 [属性] 用于选取带有指定属性的元素
    根据属性和值选择 [属性=值] 用于选取带有指定属性和值的元素
    根据部分属性值选择 [属性~=值] 用于选取属性值中包含指定值的元素,注意该值必须是一个完整的单词
    子串匹配属性值 [属性 |=值] 用于选取属性值以指定值开头的元素,注意该值必须是一个完整的单词或带有"_"作为连接符连接
    后续内容的字符串,如“en-”
    子串匹配属性值 [属性^=值] 用于选取属性值以指定值开头的元素
    子串匹配属性值 [属性$=值] 用于选取属性值以指定值结尾的元素
    子串匹配属性值 [属性$=值] 用于选取属性值以指定值结尾的元素
    子串匹配属性值 [属性*=值] 用于选取属性值中包含指定值的元素
    展开全文
  • 元素选择器

    千次阅读 2019-07-23 10:19:11
    元素选择器 伪元素不是真正的页面元素,html中没有对应的元素伪元素在html中无法审查,但是伪元素的用法和真正的页面元素一样,可以用来对css设置样式。 区分伪类选择器和伪元素选择器 :hover 关键字 “:” 代表伪...

    伪元素选择器

    伪元素不是真正的页面元素,html中没有对应的元素伪元素在html中无法审查,但是伪元素的用法和真正的页面元素一样,可以用来对css设置样式。

    区分伪类选择器和伪元素选择器

    :hover 关键字 “:” 代表伪类选择器,伪类选择器本质是用来选择对象的
    :: 关键字“::”伪类选择器本质上是插入了一个元素或者说插入了一个盒子,伪元素选择器默认插入的是Inline(行内元素)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
            div{
                width: 200px;
                height: 200px;
                margin: 300px auto;
            }
            img{
                /*img是行内块元素*/
                width: 200px;
                height: 200px;
            }
            div:hover::before{
                /*当鼠标经过div的时候在前面添加一个盒子*/
                content: '';
                height: 200px;
                width: 200px;
                border: 3px solid red;
                display: block; /*伪元素默认是行内元素*/
            }
        </style>
    </head>
    <body>
            <div><img src="timg.jpg" alt=""></div>
    </body>
    </html>
    
    1. 首先设置一个div盒子盒子内部装了一个img元素
    2. 给div盒子一个宽度和高度,然后给了一个边距让盒子居中对齐
    3. 给图片一个宽度高度跟我们盒子一样大,让图片填满盒子
    4. 需要注意的是伪元素默认是行内元素,行内元素无法设置宽度和高度,因此需要转化为块级元素
    5. 添加伪元素必须实现content属性

    效果实现

    在这里插入图片描述
    审查浏览器可以看出能够看到的只有::before

    在这里插入图片描述

    总结:伪元素选择器本质上就是是插入了一个元素或者一个盒子,默认是行内元素,浏览器无法直接审查伪元素

    展开全文
  • 伪类选择器,伪元素选择器,交集选择器

    伪类选择器

    伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式,或者为某些元素(包括文档本身)的状态指定样式,它会根据某种条件而非文档结构应用样式。

    伪类选择器的使用方法如下:
    HTML标记 伪类名{伪类名:属性值;属性名:属性值;.....}
    常用的伪类如下表所示:

    伪类名 描述
    :link 鼠标没有放上去之前的样式
    :visited 访问过的超链接的样式
    :focus 元素称为焦点的时候,常用于表单元素
    :hover 用于鼠标在元素上,而尚未触发或点击它的时候,例如,鼠标指针可能停留在一个超链接上,:hover 就会指示这个超链接

    伪类选择器的使用

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSDN董小宇伪类的使用</title>
        <style>
            a:link{/*超链接初始颜色为blue*/
                color: blue;
            }
            a:visited{/*超链接点击一次之后,颜色变为darkslategrey;*/
                color: darkslategrey;
            }
            a:hover{/*鼠标在超链接上时,超链接颜色为yellow*/
                color: yellow;
            }
            a{
                font-size: 32px;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="https://blog.csdn.net/lolly1023">CSDN:董小宇</a>
        </div>
    </body>
    </html>
    

    效果如下:
    转跳
    blue为初始设置颜色,黄色为鼠标停滞于连接上的颜色。
    伪类使用的说明:
    a标记上伪类的顺序应为LVHA(: link:visited:focus:hover)在CSS定义中,a:hover必须被置于a:link和a:vistied之后,才是有效的,在CSS定义中,a:active必须被置于a:hover之后,才是有效的。

    伪元素选择器

    伪元素选择器的使用方法如下:
    HTML标记:伪元素(属性名:属性值;属性名:属性值;…)
    常用的伪元素如下表所示:

    伪元素名 描述
    :first-letter 向文本中的第一个字母添加特殊样式,与块级元素关联
    :first-line 向文本中的首航添加特殊样式
    :before 在元素之前添加内容,默认的这个伪元素是行内元素
    :after 在元素之后添加内容

    伪元素的使用

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSDN董小宇伪元素的使用</title>
        <style>
            /*第一行的首字母发生变化*/
            div::first-letter{/*设置第一段开头第一个字大小为64px*/
                font-size: 64px;
            }
            /*第一行全部修改*/
            div::first-line{/*设置第一行的背景色为red*/
                background-color: red;
            }
            /*在文本前面添加内容*/
            div::before{/*在开头添加内容,需要使用content才能添加*/
                /*添加文本内容*/
                content: 'CSDN';
                font-style: italic;
            }
            /*在文本后面添加内容*/
            div::after{/*在开头添加内容,需要使用content才能添加*/
                content: '董小宇';
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            伪元素的实例
        </div>
    </body>
    </html>
    

    效果如下:
    伪元素

    交集选择器

    • 交集选择器由两个选择器组成,其结果是选中二者格子元素范围的交集。
    • 要求:交集中第一个选择器必须是标记选择器,第二个必须是class类选择器,或者是id选择器。
    • 两个选择器之间不能有空格,必须连续书写。

    交集选择器的使用

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSDN董小宇交集选择器的使用</title>
        <style>
            p.p1{/**使用交集选择器,选中了p标签与类选择器为p1的内容,然后进行修改/
                font-size: 32px;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">我使用了交集选择器</p>
            <p>我没有使用交集选择器</p>
        </div>
    </body>
    </html>
    

    效果如下:
    交集选择器

    编程我也是初学者,如若有理解错误的地方,希望大家看完之后,发现错误可以评论出来,谢谢大家

    展开全文
  • CSS——后代选择器和子元素选择器区别

    千次阅读 多人点赞 2018-07-04 16:59:05
    记录一下后代选择器和子元素选择器区别,好吧,只是为了炫耀一下沈美人! CSS代码: 后代选择器:用于指定元素所有的后代元素 //选择div下所有的span元素,无论层级 div span { color: red; } 子元素选择器:...
  • 元素选择器 二.、规则: 选择器的权重值表述为4个部分,用0,0,0,0表示。 通配符*的权重为0,0,0,0 标签选择器、伪元素选择器的权重为0,0,0,1 类选择器、属性选择器、伪类选择器的权重为 0,0,1,0  id选择器的权重为0,...
  • jQuery 兄弟元素选择器

    万次阅读 2018-09-17 23:26:16
    本篇文章介绍jQuery的兄弟元素选择器 什么是兄弟元素? <ul id="list"> <li class="li-1">web-7258</li> <li class="li-2">web前端</li> <li class="li-3">helang.love@...
  • CSS伪元素选择器

    千次阅读 2017-03-14 10:28:32
    CSS伪元素选择器
  • 类选择器与元素选择器的区别

    千次阅读 2019-04-01 11:29:36
    元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器。选择器通常是某个 HTML 元素,比如<p>、<h1>、<em>、<a>等,甚至可以是<html>元素本身。 伪类选择器或伪元素...
  • jQuery子元素选择器

    万次阅读 2018-06-28 20:09:40
    jQuery子元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;...
  • jQuery 选择器允许您对 HTML 元素组或单个元素进行操作,jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找...jQuery 元素选择器基于元素名选取元素,这个选择返回针对的是相同元素名的标签,所有相同元...
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时...
  • html 后代选择器和子元素选择器

    千次阅读 2017-08-30 10:21:44
    后代选择器和子元素选择器    1.后代选择器和子元素选择器之间的区别?  1.1  后代选择器使用空格作为连接符号  子元素选择器使用>作为连接符号  1.2  后代选择器会选中指定标签中,所有的特定后代...
  • css 的子元素选择器 自元素表示儿子 孙子不可以  后代选择器 儿子和孙子 重孙子 所有的后代都起作用
  • 3.5结构选择器 (1)后代选择器:可以选择一个元素的后代元素,这个...(2)子元素选择器:某一个元素的直接后代。 (3)并选择器:将相同的样式放在一起,类名直接用英文逗号分隔 写法E,F   #myself d
  • 后代选择器与子元素选择器的区别

    千次阅读 2018-08-27 15:25:24
    2.子元素选择器用&gt;作为连接符号 2.选中标签范围 1.后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子,孙子,只有放到标签中的特定标签都能选中 2.子元素选择器只会选中指定标签中,所有...
  • 元素选择器该类选择器主要用于向指定的选择器添加指定的效果。:first-letter选择“块级元素”文本段落中的首个字符,只能对“块级元素”生效。该选择器可以设置的值有: font属性 color属性 b
  • CSS3---子元素选择器

    千次阅读 2018-12-09 21:04:37
    元素选择器的作用 在之前的选择器中当我们遇到一个元素下有多个子元素时(针对list列表元素),我们在进行css控制时都是在每个子元素定义class,通过class来控制对应的子元素,这样做会很麻烦,子元素选择器也...
  • 派生选择器用的很多,派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别。1、css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em...
  • 复合选择器是由两个或读个基础选择器,通过不同的方式组合成的,目的是为了可以选择更准确的目标元素。一、交集选择器例如:&lt;div class="orange"&gt;I am P1&lt;/div&gt; &lt;p ...
  • 元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器。选择器通常是某个 HTML 元素,比如、、、等,甚至可以是元素本身。 类选择器用于将样式规则与附带class属性的元素匹配,其中该class属性的值...
  • JavaScript 元素选择器

    千次阅读 2018-06-08 08:31:59
    JavaScript 的元素选择器有:1.循环遍历DOM获取1)document.getElementById("id值")-----返回一个对象或null2)document.getElementByName("name属性的值")-----返回对象集合或null3)document....
  • 元素之间的关系:父元素直接包含子元素的元素,子元素...后代元素选择器: 作用:选中指定元素的指定的后代的元素。 语法:祖先元素 后代元素{} 子元素选择器:作用:选中指定父元素的指定的子元素 语法:父元素>...
  • html 子元素选择器

    千次阅读 2017-08-30 10:20:59
    元素选择器    /*div>p{  color:red;  }*/  /*#identity>p{  color:blue;  }*/  div>ul>li>p{  color:purple;  }      1.什么是子元素选择器?  
  • 小程序中的WXSS(css)选择器课程-子元素选择器 后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。 选择子元素 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的...
  • css3之通用兄弟元素选择器

    万次阅读 2016-09-21 19:52:58
    所谓兄弟元素选择器:它是用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。 使用方式:  ~{  CSS样式  } 例如 span~p{ background: green; } 1234656...
  • CCF201809-3 元素选择器

    千次阅读 多人点赞 2018-10-23 18:12:58
    元素选择器 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 版本一(时间:2018.10.23)(推荐版本二) 分析 大模拟,与往年相比这道题难度有所下降,比较好懂,但要注意一个...
  • css系列教程1—选择器全解css伪元素选择器元素选择器,用于选择元素内的局部,包括first-letter、first-line等代码如下:p:first-letter{ /* first-letter行内元素首字母 */ } p:first-line{ /* first-

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 704,648
精华内容 281,859
关键字:

元素选择器