【前端 CSS的选择器 基本选择器 类选择器】的更多相关文章

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro…

CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属性选择器.伪类选择器.过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写代码更加简单轻松. 根据所获取页面中元素的不同,可以把CSS3选择器分为5大类:基本选择器.组合选择器.伪类选择器.伪元素和属性选择器.其中,伪类选择器又分为6种:动态伪类选择器.目标伪类选择器.…

HTML[2种特殊选择器]_伪类选择器&属性选择器

本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> <li><a href="xxx.doc">word文档</a></li> <li><a href="xxx.ppt">ppt文档</a></li> <li>&…

css3类选择器之结合元素选择器和多类选择器

css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p2{font-size:30px;} /*结合元素选择器*/ p.p1{color:rebeccapurple;} /*多类选择器*/ .p1.p…

CSS基础--属性选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:bluevi…

HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层:提供用户和界面的交互 二.CSS(层叠样式表) 1. CSS的概念及其介绍CSS 指层叠样式表 (Cascading Style Sheets)作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.2. css的三种表现形式(引入方法)css的语法结构:选择器{属性:值;属性:值;…

CSS之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器 那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器…

CSS中的选择器之html选择器和伪类选择器

1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .span-ne…

css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类…

css 类选择器结合元素选择器和多类选择器

1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含important的所有p元素 2.多类选择器 <div class="option selected"></div> .option.selected {color: red} 匹配class属性同时包含option和selected的元素 sass里写法: .opti…

python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2…

from提交数据，高级选择器，伪类选择器，前端样式等

1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 30px; } /* 高级性选择器优先级…

第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red; } </style> 2.子选择器: 只有一代 ,儿子 /* 子选择器*/ body>p{ background…

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:    div[class=mydemo] 3.E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置:      div[class*=mydemo] 4.E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置:       div[class^=mydemo] 5…

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

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得…

CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表…

CSS3 新增选择器：伪类选择器和属性选择器

一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li>我是第五个</li>…

H5C3--属性选择器、兄弟选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color: red; } .green{ color: green; } .blue{ color: blue; } /*属性选择器的使用*/ /*需求:获取所有拥有class…

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3> <ul> <li> html/css从入门到精通 </li> <li> html…

jQuery的标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')

$()可以是$(expresion),即css选择器 $("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签 $("a").click(function(){...}) 就是在点击页面上的任何一个链接时的触发事件.确切地说,就是jQuery用<a/>这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法. $(document).f…

前端 CSS的选择器 伪类选择器

伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge&quo…

css伪类选择器及伪元素选择器

1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定义好的选择器. 最常见的伪类选择器 a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active…

CSS 类选择器

在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. <h1 class="center"> This heading will be center-aligned </h1> <p clas…

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚…

CSS 类选择器(四)

一.类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户简化页面控制. 二.类选择器与标签选择器 类选择器和标签选择器都具有一对多的特性,即一个样式可以控制多个元素对象的显示效果. 注意事项: 与标签选择器相比,类选择器具有更好的适应性和灵活性,因为可以指定类的样式所应用的元素对象范围 与类选择器相比,标签选择器具操作简单.定义方便的优势,因为不需要为每个元素都定…

Css详解之（伪类选择器）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"…

CSS动态伪类选择器温故

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚…

html5--6-11 CSS选择器7--伪类选择器

html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元素插入样式表 CSS语法 单一元素的多个属性之间用分号隔开:若只有一个可以省略 多个元素之间用逗号隔开 如…

html5--6-10 CSS选择器7--伪类选择器

html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元素插入样式表 CSS语法 单一元素的多个属性之间用分号隔开:若只有一个可以省略 多个元素之间用逗号隔开 如果值为若干单词,则要给值加引号;除了这种…

html5--6-9 CSS选择器6--伪类选择器

html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-child{color: red}*/ /*选择ul的元素里面是第一个子元素的*/ /*ul>li:first-child{color: red}*/ /*li:last-child{color: red}*/ /*li:only-child{color: green}*/ p:only-of-type{co…