[CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate elements in the DOM that do not impact the content. While ::first-letter ::first-line ::selection ::placeholder allow us to target elements that do not have a specific DOM element.

About ‘blockquote‘:

blockquote {
  quotes: "“" "”" "‘" "’";
}

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

About ::first-line, ::first-letter:

p::first-line {
  color: green;
}

p::first-letter {
  font-size: 2em;
  float: left;
  line-height: 1.7em;
  padding: 0 .3em;
  font-weight: bold;
}

原文地址:https://www.cnblogs.com/Answer1215/p/10068269.html

时间: 2024-10-09 19:52:17

[CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements的相关文章

CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的. 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式.

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

CSS3 target伪类简介,以实现tab效果为例子

CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个"#"字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的. 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式. 浏览器支持 因为我们在讨论CSS3,所以它现在被除了I

CSS3 :target伪类实现Tab切换效果

用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; background: #fff; } #song-info:target, #song-lyricCN:target, #song-lyricEN:target { z-index: 1; } html代码: <div class="song-nav"> <ul class="

css3:target页内跳转

:target 用于选取当前活动的目标元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> :target{ background:red; } </style> </head> <body> <a href=&quo

css3 target 标签 -- 手风琴

<!DOCTYPE html> <html> <head> <title>Accordion</title> <meta charset="utf-8"> <script type="text/javascript" src="../js/jquery.js"></script> <style type="text/css"&

[CSS] Targeting Elements with CSS Attribute Selectors

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不但可以很好的格式化DOM节点,清晰的展现HTML文档,还可以查看JavaScript创建的DOM节点和iframe中的DOM节点,比在当前网页中右击鼠标选择“查看网页源代码”强大很多. 总之,Element面板可以让我们很透彻的了解DOM和CSS的底层结构. 我们将以下面的HTML代码为例来详细了解

【转载】css3 content 生成内容

content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 url: 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) string: 插入字符串 none 其实我们常用的clearfix就是应用了这个none了 css code .clearfix:after { content: ""; visibili