精华内容
下载资源
问答
  • 五类元素
    千次阅读
    2021-11-05 15:12:46


    对页面进行布局时必不可少的要对元素进行不同的定位,在css中定位分为静态定位,相对定位,绝对定位,固定定位这四种,每个定位都有不同的参数,如left、right、top、bottom、z-index等。

    1、静态定位(static)

    一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。

    2、绝对定位(absolute)

    • 绝对定位需要注意的是根据父级元素进行定位

    绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有设置定位属性,则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在上面,可以有负值。

    绝对定位的定位方法:如果它的父元素设置了除static之外的定位,比如position:relative或position:absolute及position:fixed,那么它就会相对于它的父元素来定位,位置通过left , top ,right ,bottom属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档body来定位(并非相对于浏览器窗口,相对于窗口定位的是fixed)。

    将class="two"的div定位到距离的顶部和左侧分别50px的位置。会改变其他元素的布局,不会在此元素本来位置留下空白。

    <head>
    	<style type="text/css">
    		.box {
    			background: red;
    			width: 100px;
    			height: 100px;
    			float: left;
    			margin: 5px;
    		}
    		.two {
    			position: absolute;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box" >One</div>
    	<div class="box  two" >Two</div>
    	<div class="box" >Three</div>
    	<div class="box">Four</div>
    </body>
    

    3、相对定位(relative)

    相对定位元素不可层叠,依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

    将class="two"的div定位到距离它本来位置的顶部和左侧分别50px的位置。不会改变其他元素的布局,会在此元素本来位置留下空白。

    <head>
    	<style type="text/css">
    		.box {
    			background: red;
    			width: 100px;
    			height: 100px;
    			float: left;
    			margin: 5px;
    		}
    		.two {
    			position: relative;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box" >One</div>
    	<div class="box  two" >Two</div>
    	<div class="box" >Three</div>
    	<div class="box">Four</div>
    </body>
    

    4、固定定位(fixed)

    固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。

    固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需使用margin、border、padding。

    5、总结

    绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层,文本流放在首层),它们之间互不影响;相对定位元素在首层,与文本流一起存放,它们之间互相影响。

    被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除,它浮了起来,其实设置了相对定位也会让元素浮起来,但它们的不同点在于,相对定位不会删除它本身在文档流中占据的空间,其他元素不可以占据该空间,而绝对定位则会删除掉该元素在文档流中的位置,使其完全从文档流中抽了出来,其他元素可以占据其空间,可以通过z-index来设置它们的堆叠顺序 。

    更多相关内容
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时...

    元素选择器

    例如:

    html {background-color: black;}
    
    p {font-size: 30px; backgroud-color: gray;}
    
    h2 {background-color: red;}

    以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h2元素添加红色背景。


    类选择器 

    (1)单类选择器 

    p.deadline { color: red;}
    
    h2.deadline { color: red;}

    点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中

    (2)多类选择器

    比如某些元素包含一个”warning”类,某些元素包含一个”important”类,某些元素同时包含”warning important”类。属性名出现的顺序没有关系:

    class = "warning important"
    
    class = "important warning"

    以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体,包含important属性的元素有一个加粗的字体显示,而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了),我们可以使用以下的css代码:

    .warning { color: red;}
    
    .important { font-weight: bold;}
    
    .warning.important { background: blue;}

    同样地,多于多类选择器,在前面加上元素名,则会匹配包含指定类名的指定元素,例如:p.warning.important {}

    将会匹配同时包含warning和important属性的p元素,其他同样包含以上2类的元素则不会被选中.

     


    ID选择器 

     ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。

    #top-para {
            width=300px;
            height=200px;
    }            // 对id为top-para的元素设置为宽度为300像素,高度为200像素
     #foot-para {
            width=100px;
            height=50px;
    }           // 对id为foot-para的元素设置为宽度为100像素,高度为50像素

    属性选择器 

    (1)简单属性选择器

    简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素: img[alt] { ...}

    选择带有title属性的所有元素:*[title] { ...}。同类选择器类似,我们也可以根据多个属性信息进行选择,例如同时拥有href和title的a元素:

    a[href][title] { ...}

    组合使用类选择器使我们的选择更加富于灵活性。

    (2)具体属性值选择器

    如果我们希望更加精确地根据属性值来选择元素,我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素:

    a[href="http://www.baidu.com"] { font-weight: bold;}

    (3)部分属性值选择器

    我们希望选择在一串属性值中出现了某个关键字的元素,不妨再次以class属性为例,我们希望选择所有包含了warning类的p元素,属性值匹配将无法做到,好在还是有办法的,我们可以使用以下的部分值匹配选择器:

    p[class~="warning"] { ...}

    该选择器在等号”=”前面添加了一个波浪号~,含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。


     派生选择器

    派生选择器,乍一看名字不知所云,它又名上下文选择器,它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了,但为了更加清楚地说明问题,我们这里给出一个DOM树作为参考:

    (1)后代选择器(descendant selector) 

    (2)子元素选择器(child selector) 

    (3)相邻兄弟选择器(Adjacent sibling selector) 


     CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

    a:link|a:visited|a:hover|a:active

    在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。

     

     

    由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

     

    :focus
    /* 伪类将应用于拥有键盘输入焦点的元素。 */
    :first-child
    /* 伪类将应用于元素在页面中第一次出现的时候。 */
    :lang
    /* 伪类将应用于元素带有指定lang的情况。 */
    

     

    伪元素选择器,伪元素的效果是需要通过添加一个实际的元素才能达到的。

    /* 为某个元素的第一行文字使用样式。 */
    :first-line
    /* 为某个元素中的文字的首字母或第一个字使用样式。 */
    :first-letter
    /* 在某个元素之前插入一些内容。 */
    :before
    /* 在某个元素之后插入一些内容。 */
    :after

    结构性伪类选择器

    :root()选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。:root选择器等同于<html>元素。

    :not()选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。

    :empty()选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

    :target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。

    :first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

    :nth-child()选择某个元素的一个或多个特定的子元素。

    CSS3中的伪元素

    CSS3对伪元素进行了一定的调整,在以前的基础上增加了一个:
    也就是现在变成了::first-letter,::first-line,::before,::after
    另外还增加了一个::selection

     

    在css3中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

     

    ::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个

    ::before::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动

     

    展开全文
  • CSS中的伪和伪元素(详细)

    千次阅读 多人点赞 2022-01-21 20:24:46
    这篇想要跟大家分享的是css中的伪和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下,为什么要引入伪跟伪元素? css引入伪和伪元素概念是为了格式化文档树以外的信息。也就是说,伪和伪...

    这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦!

    首先,我们先来想一下

    一、引入伪类跟伪元素的原因?

    伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述

    比如CSS没有“段落的第一行”、“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,因此引入。

    引用标准中的话:

    (CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。)
    CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on 
    information that lies outside the document tree.

    二、什么是伪类,伪元素?

    1、伪类

    概念:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。

    它可以用于

    • 设置鼠标悬停在元素上时的样式
    • 为已访问和未访问链接设置不同的样式
    • 设置元素获得焦点时的样式

    2、伪元素

    概念:创建一些不在文档树中的元素,并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。)

    它可以用于

    • 设置元素的首字母、首行的样式
    • 在元素的内容之前或之后插入内容

    三、伪类

    分类

    • 状态伪类
    • 结构性伪类

    1、状态伪类:基于元素当前状态进行选择的

    元素的样式会根据其状态呈现不同的样式,当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。

    常见的状态伪类

     :link 应用于未被访问过的链接;    

     :hover 应用于鼠标悬停到的元素;

     :active 应用于被激活的元素;

     :visited 应用于被访问过的链接,与:link互斥。

     :focus 应用于拥有键盘输入焦点的元素。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* 未访问的链接 */
    a:link {
      color: red;
    }
    
    /* 已访问的链接  */
    a:visited {
      color: green;
    }
    
    /* 鼠标悬停链接  */
    a:hover {
      color: hotpink;
    }
    
    /* 已选择的链接*/
    a:active {
      color: blue;
    }
    </style>
    </head>
    <body>
    
    <p><a href="">这是一个链接</a></p>
    
    </body>
    </html>
    

    注意:

    这几个伪类同时出现在一个元素的操作上,顺序不能改变,否则很大程度上会产生紊乱,造成效果失效!

    a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效。(意思是必须先写a:link 和 a:visited再写 :hover)

    a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active)

    另外伪类名称对大小写并不敏感

    伪类和 CSS 类

    当您将鼠标悬停在类highlight上时,会改变颜色:

    a.highlight:hover {
      color: red;
    }

    悬停在 <div> 上

    div:hover {
      background-color: blue;
    }

    把鼠标悬停到 <div> 元素以显示 <h1>元素(类似工具提示的效果)

    h1 {
      display: none;
      background-color: green;
      padding: 25px;
    }
    
    div:hover h1 {
      display: block;
    }

    2、结构性伪类:css3新增选择器

    利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。

    常见的结构性伪类

    1.   :first-child 选择某个元素的第一个子元素;  
    2.   :last-child 选择某个元素的最后一个子元素;
    3.   :nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型
    4.   :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素,不论元素的类型;
    5.   :nth-of-type() 规定属于其父元素的第n个 指定 元素;
    6.   :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素;
    7.   :first-of-type 选择一个上级元素下的第一个同类子元素;
    8.   :last-of-type 选择一个上级元素的最后一个同类子元素;
    9.   :only-child 选择它的父元素的唯一一个子元素;
    10.   :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
    11.  :checked匹配被选中的input元素,这个input元素包括radio和checkbox。
    12.  :empty 选择的元素里面没有任何内容。
    13.   :disabled匹配禁用的表单元素。
    14.   :enabled匹配没有设置disabled属性的表单元素。
    15.   :valid匹配条件验证正确的表单元素。
    16.   :in-range选择具有指定范围内的值的 <input> 元素。
    17.   :optional选择不带 "required" 属性的 <input> 元素。
    18.   :focus选择获得焦点的 <input> 元素。

    实例

    选择器匹配p元素的第一个子元素:

    p:first-child {
      color: red;
    }
    <p>你好</p>
    <p>好啊</p>
    
    

    匹配所有 <p> 元素中的首个 <i> 元素:

    p i:first-child {
      color: blue;
    }
    
    <p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
    
    <p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
    
    
    

    段落2变成蓝色

    语法解释:p:nth-child(3),P标签的父元素是body,body的第3个子元素是“段落2。”所以段落2”,颜色变成了蓝色

    p:nth-child(3)
    {
    background:blue;
    }
     
    <body>
     
    <h1>今天学习伪类和伪元素</h1>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    
     
    </body>

    在上一个代码中,如果p:nth-child(3)改为属p:nth-of-type(3) ,则意思为规定其父元素的第3个 p 元素,那么变蓝色的是段落3

    lang="en" 的 q 元素定义~: 

    q:lang(en) {
      quotes: "~" "~";
    }
    
    <p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
    

     选择获得焦点的 <input> 元素(点击输入框,背景颜色变为黄色):

    input:focus {
      background-color: yellow;
    }
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>

    四、伪元素

    所有的伪元素

    选择器例子例子描述
    ::afterp::after在每个 <p> 元素之后插入内容。
    ::beforep::before在每个 <p> 元素之前插入内容。
    ::first-letterp::first-letter选择每个 <p> 元素的首字母。
    ::first-linep::first-line选择每个 <p> 元素的首行。
    ::selectionp::selection选择用户选择的元素部分。

    注意:

     CSS3 规范中有一部分要求,为了区分伪类和伪元素,伪元素使用两个冒号 (::), 伪类使用一个冒号 (:)

    对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ,::before 作用是一样的,所以,如果网站只需要兼容 webkit、firefox、opera 等浏览器,伪元素建议采用双冒号的写法,如果是要兼容 IE 浏览器,建议用 CSS2 的单冒号写法。

    实例

    为所有 <p> 元素中的首行添加样式:

    p::first-line {
      color: #ff0000;
      font-size:16px;
    }

    在这里对于::first-line,我们需要注意,::first-line 伪元素只能应用于块级元素。

    以下属性适用于 ::first-line 伪元素:

    • 字体属性
    • 颜色属性
    • 背景属性
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

    设置所有 <p> 元素中文本的首字母格式:

    p::first-letter {
      color: red;
      font-size: 16px;
    }

    在这里对于::first-letter ,我们需要注意,::first-letter  伪元素只能应用于块级元素。

    下面的属性适用于 ::first-letter 伪元素:

    • 字体属性
    • 颜色属性
    • 背景属性
    • 外边距属性
    • 内边距属性
    • 边框属性
    • text-decoration
    • vertical-align(仅当 "float" 为 "none")
    • text-transform
    • line-height
    • float
    • clear

    在这里要对::before和::after,做个讲解

    在元素的 ::before和 ::after中插入内容-content属性(如果没有写content样式,伪元素会失效)

    默认值:normal
    继承:no
    版本:CSS2
    JavaScript 语法:object.style.content="url(beep.wav)"

    contnt属性的类别:

    none设置 content 为空值。
    normal在 :before 和 :after 伪类元素中会被视为 none,即也是空值。
    counter设定计数器,格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数;格式由style指定(默认是'decimal'——十进制数字)
    attr(attribute)将元素的 attribute 属性以字符串形式返回。。
    string设置文本内容
    open-quote设置前引号
    close-quote设置后引号
    no-open-quote移除内容的开始引号
    no-close-quote移除内容的闭合引号
    url(url)设置某种媒体(图像,声音,视频等内容)的链接地址
    inherit指定的 content 属性的值,应该从父元素继承

    在每个 <h1> 元素的内容之前插入一幅图:

    h1::before {
      content: url();
    }

    在每个 <h1> 元素的内容之后插入一幅图像:

    h1::after {
      content: url();
    }

    使所选文本在蓝色背景上显示为红色:

    ::selection {
      color: red; 
      background:blue;
    }

    可以应用于 ::selection:的属性

    • color
    • background
    • cursor
    • outline

    伪元素与 CSS 类结合使用:(将以粉色和较大的字体显示 class="name" 的段落的首字母。)

    p.name::first-letter {
      color: hotpink;
      font-size: 200%;
    }  
    
    <p class="name">你好漂亮!</p>
    
    

    五、伪类和伪元素的应用

    1、画分割线

    效果如图

    <style>
    /*content没有内容也一定要记得写*/
        .line::before, .line::after {
          content: '';
          display: inline-block;
          width: 300px;
          border-top: 1px solid black;
          margin: 5px;
        }
      </style>
    </head>
    <body>
      <p class="line">此处为分割线</p>
    </body>

    2、清除浮动

    这里将会在下一次分享“浮动”时去分享

    其他应用也会在后续的使用中,不断发现,不断补充

    最后!

    关于代码只粘贴了主要代码,其他的内容,需要读者自己进行补充

    下次见!

    展开全文
  • 常见的伪、伪元素

    千次阅读 2020-08-08 22:59:39
    用于在页面中的元素处于某个状态时,为其添加指定的样式。...有个伪,:link、:hover、:active、:focus、:visited a:link{background-color:pink;}/品红,未访问/ a:visited{color:orange;}/字..

    一、伪类

    1、锚点

    关于锚点< a>有五个伪类,:link、:hover、:active、:focus、:visited

    a:link{background-color:pink;}/品红,未访问/
    a:visited{color:orange;}/字体颜色为橙色,已被访问/
    a:focus{background-color:lightgrey;}/浅灰,拥有焦点/
    a:hover{background-color:lightblue;}/浅蓝,鼠标悬停/
    a:active{background-color:lightgreen;}/浅绿,正被点击/

    2、UI元素伪类(主要用于form元素)

    • UI元素伪类包括:enabled、:disabled、:checked三个,主要针对于HTML中的form元素

    :enabled : 可用状态
    :disabled : 不可用状态
    :checked : 选中状态
    在这里插入图片描述

    //css
            input:enabled{
                background-color: lightblue
            }
            input:disabled{
                background-color:pink;
            }
    
    //html
    <form>
        可以写字:<input type="text"/><br/>
        不可以写字:<input type="text" disabled="disabled" /><br/>
        默认选中:<input type="checkbox"  checked="checked"/><br/>
        未设置选中:<input type="radio" />
    </form>
    

    3、结构伪类

    //以下情况都是E为父元素,F为子元素
    E F:nth-child(n) 选择父元素的第n个子元素
    E F:nth-last-child(n) 选择父元素的倒数第n个子元素
    E F:first-child 父元素的第一个子元素,与E F:nth-child(1)等同
    E F:last-child 父元素的最后一个子元素,与E F:nth-last-child(1)等同
    E F:only-child 当前元素的父元素,有且只有它本身一个子元素(DOM节点)时,修改其样式

    • 第一行的n可以是整数( 从1开始),也可以是公式,也可以是关键字(even、odd):even代表偶数位置的子元素;odd:代表奇数位置的子元素
      在这里插入图片描述
    //html
    	<ul>
            <li><div>第一个DIV</div></li>
            <li><div>第二个DIV</div></li>
            <li><div>第三个DIV</div></li>
            <li><div>第四个DIV</div></li>
            <li><div>第五个DIV</div></li>
            <li><div>第六个DIV</div></li>        
        </ul>
     
    //css
    		ul li:nth-child(odd){color: red;} 
            ul li:nth-last-child(3){color: green;}
            ul li:first-child{color: blue;}
            ul li:last-child{color: yellow;}
            div:only-child{background-color:lightgrey;}
    

    二、伪元素

    伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection

    1、:first-letter:指定一个元素第一个字母的样式

    • 注意:只能与块级元素关联
      在这里插入图片描述
    //html
     <div class="letter">测试首字母下层,测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层</div>
    测试首字母下层,测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层
    
    //css
    	.letter{
            width: 200px;
            border: 1px solid black;
        }
        .letter::first-letter{
            font-size: 30px;
            float: left;
        } 
    

    2、first-line:设置元素中第一行文本的样式

    • 注意:只能与块级元素关联
      在这里插入图片描述
    //html
    <p class="firstLine">hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world </p>
    hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world
    //css
    .firstLine::first-line {
                width: 200px;
                text-transform: uppercase;//变成大写
                background: yellow;
             }
    

    ::selection:匹配被用户选择的部分

    • 注意:只支持颜色和背景颜色两个样式
      在这里插入图片描述
    //html
    <p>123456</p>
    
    //css
    	p::selection {
                color:blue;
                background-color: #ccc;
            }
    
    展开全文
  • 声明测试TestStudent完成对多态性的测试:(1)在主方法中声明Student的数组(含元素)。(2)生成个对象存入数组,其中三个Student的对象、一个StudentXW的对象、一个StudentBZ的对象。(3)将方法...
  • 选择器和伪元素

    千次阅读 2018-07-04 15:02:16
    选择器什么是伪?伪就是与一样能够定义样式,但...浏览器会在后台向这些伪增加和删除元素。对于&lt;a&gt;元素,我们可以用“多重人格”来形容它。对于该标签,它一共有种状态::link, :visit...
  • Java集合() Set 添加元素

    千次阅读 2021-02-26 11:27:16
    Java中Set集合是如何实现添加元素保证不重复的?Set集合是一个无序的不可以重复的集合。今天来看一下为什么不可以重复。Set是一个接口,最常用的实现就是HashSet,以HashSet为例。HashSet实现了Set接口, 其底层...
  • 构成画面的元素 主体 画面中的主要表现对象。 在元素中,主体是最重要并且需要重点突出的。 突出主体 直接突出 三分法构图 将主体放在四根分割线或者四个交点上。 对角线构图 画面主体放在任意一根对角线...
  • CSS3伪选择第n个元素

    千次阅读 2019-10-16 15:29:09
    在CSS中有个伪元素,每个都以一个双冒号(::)开头: ::first-line- 选择器中文本的第一行 ::first-letter - 选择器中文本的第一个字母 ::selection - 选择用户选择的元素部分 ::before - 在元素之前插入一些内容 ...
  • 和伪元素的区别 ,用户定义的类名,这个是具体的,看得见的,如div.div0,选择具有div0的div元素。 伪,用于向某些选择器添加特殊的效果。用伪定义的样式并不是作用在标记上,而是作用在标记的状态上...
  • 五类常见算法

    千次阅读 2018-10-19 10:26:43
    子集树通常有2^n个叶节点,其节点总个数为为2^(n+1)-1。遍历子集树的不论什么算法均需O(2^n)的计算时间 2.排列树:当所给问题是确定n个元素满足某种性质的排列时,对应的解空间树成为排列树。比如旅行售货员...
  • 行内元素和块级元素的区别

    千次阅读 2019-09-12 22:14:31
    一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行...
  • jsp的种脚本元素

    千次阅读 2016-11-21 11:35:08
    为了方便jsp中方便插入java代码,jsp用了种脚本来方便这样的行为. 注释: – 注释 –%>,在jsp翻译成的java中是不显示的. 脚本: 代码 %>这里写java代码,在翻译的java文件中可见. 比如: String path= ...
  • HTML中元素大多数是块级元素或者是行内元素,浏览器在显示页面的时候,对这两类元素的默认处理方法是不一样的。 任务目标 1、理解块级元素以及行内元素的区别 2、掌握块级元素以及行内元素的转换方法 块级元素 在...
  • JS 种方法访问数组最后一个元素

    千次阅读 2021-06-25 18:29:25
    在开发的时候经常需要访问数组的最后一个元素,这里总结一下常用的方法。 1. 使用 arr[arr.length - 1] 首先最常规的方法就是使用 arr[arr.length - 1] ,缺点就是这样写太长了,例如下面这个数组: const lastEle =...
  • CSS常用五类选择器

    千次阅读 2020-12-22 09:52:11
    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。...⑶选择器(单选择器,多选择器) ⑷属性选择器(简单属性选择,具体属性选择,部分属性选择, 特定属
  • 选择器

    千次阅读 2021-10-18 10:46:51
    一、基本选择器 1、html里的标签 2、class选择器 3、id选择器 4、*通配符 5、群组选择器 二、属性选择器 1、[属性] 2、[属性=属性值] ...四、元素选择器 ...、伪选择器 1、结构伪选择器 :first-..
  • ##educoer 第1关:学习-Java集合之Collection接口之往集合中添加元素 任务:接收给定的一行字符串,实现如下需求: 1.通过空格(一个)切割字符串; 2.创建任意一种类型的集合; 3.将切割后的字符串元素添加进...
  • jQuery选择器总结(选择器+元素筛选)

    千次阅读 多人点赞 2021-01-21 21:33:10
    表单选择器二.jQuery元素筛选所用的一些方法 一.jQuery 选择器 1.基本选择器 #ID 选择器:根据 id 查找标签对象 .class 选择器:根据 class 查找标签对象 element 选择器:根据标签名查找标签对象 * 选择器:...
  • 一般数组是不能添加元素的,因为数组在初始化时就已定好长度了,不能改变长度。 怎么动态则增加数组元素呢? 使用ArrayList<类型> list = new ArrayList<>(); 一、定义 但是其中的类型不能为基本...
  • } 中间小结 前个选择符都是以-chlid结尾的,它的工作原理是先确定子元素位置,然后再看当前位置子元素标签是否符合设定的标签类型,符合就选中,不符合就不选中,所以会出现选择符无效的情况; 接下来要讲的一组...
  • CSS内嵌样式的选择器是通过使用style标签写在head里的 选择器一共有9种: 1、标签选择器:是指通过元素的标签名字来选中元素 从而设置...3、(class)选择器:给元素设置class及属性值,通过class的值来选择元素(...
  • 元素——答题

    万次阅读 多人点赞 2019-09-19 14:10:44
    元素——答题 微元素每日任务,答题
  • 一、等价 、 二、等价示例 、 三、等价性质 、 四、商集 、 、商集示例 1 、 六、商集示例 2 、 七、商集示例 3 、
  • 一、边界边界在UML图符里定义只是一个简单的矩形框,矩形框的四个边决定了边界的内外。边界本质上是面向对象方法的一个很重要的概念,与封装的概念相似。...二、业务实体业务实体是的一种版型,特别用于在业务建
  • Selenium元素定位方法总结

    千次阅读 多人点赞 2022-05-11 12:36:12
    要想操作一个元素,首先应该识别这个元素。人有各种的特征(属性),我们可以通过其特征找到人,如通过身份证号、姓名、家庭住址。同理,一个元素会有各种的特征(属性),...()通过link text定位 (六)通过parti
  • HTML+CSS3(六)——行内元素和块级元素

    千次阅读 多人点赞 2020-01-04 15:42:31
     1,行内元素。2,块级元素。 行内元素和块级元素的区别: 行内元素:  与其他行内元素并排 不能设置宽高,默认的宽度就是文字的宽度 块级元素: 霸占一行,不能与其他任何元素并列。 能接受宽高,如果不设置...
  • CSS结构伪选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构伪选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或的依赖,有助于保持代码干净整洁。 表 2-6 结构伪选择器 选择器 功能描述 版本 E:last-child 选择父元素...
  • 在数组中查找元素

    千次阅读 2021-01-02 21:28:43
    在数组中查找元素1. 查找元素的索引 数组操作基本上都是由Array来负责,因而该也提供了一系列方法来用于在数组中进行查找。这些方法按照查找结果划分,大体可以分为两,下面将分别介绍。 1. 查找元素的索引 此...
  • 文档对象模型DOM 文档对象模型DOM是W3C组织推荐的...使用getElementByld()方法可以获取带有ID的元素对象。 <body> <div id="time"> 2020.11.15 </div> <script> var timer = document.ge

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 428,225
精华内容 171,290
热门标签
关键字:

五类元素