在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。 比如需要选择出input标签中具有value属性的内容，就可以按以下方式 // css input[value]{ ???color: #333; }// html <input type="text" value="请输入用户名">...
概念 作用:选择页面的某一个或者某一类元素 基本选择器 1.标签选择器 之前的例子用的就是标签选择器 2.类 选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.class1{color: brown;}.class2{color: aqua;}</style> </head> <body> <h1 class="class1">标题1</h1> <h1 class="class2">标题2</h1> <h1>标题3</h1> </body> </html>3.id选择器 <!DOCTYPE html> <html lang="en"> <head...
html5+css3，html不会再出第六版。css3是里面是分模块的，比如字体模块，盒子模块等等这些。每个模块都有各自不同的版本，所以css3是统一命名的，不用纠结。回顾 回顾一下网页的三个部分：结构（html）、表现（css）、行为（JavaScript）。 之前的h标签等等其他标签，样式都是浏览器默认的，改变样式就是css的工作内容。 只要是表现就应该用css来改变，而不是着重于标签的样式,因为标签的样式是浏览器默认的，html标签只关注语义。...
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id比如需要选择出input标签中具有value属性的内容，就可以按以下方式// css input[value]{color: #333; }// html <input type="text" value="请输入用户名"> <input ...
** CSS类选择器 ** 类选择器允许一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。 要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 类选择器是通过class类设置CSS样式 注意：class命名不能以数字开头 为了将类选择器的样式与元素关联，必须将class类指定为一个适当的值。 两个元素的class类都指定为show，第一个(h1标签)为标题，第二个(p标签)为段落。(如图)我们使用语...
后代选择器 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 ul li {background-color: pink;} .father .son {background-color: powderblue;}这样的选择器选择的是在ul和.father选择器所处标签下所有的li和.son选择器元素。 <ul><li>me</li> 都被选中<li>me</li> 都被选中<li>me</li> 都被选中 </...
CSS3（级联样式表） 新增基本选择器：子元素选择器 相邻兄弟元素选择器 通用兄弟选择器 群组选择器 兼容IE8+ FIreFox Chrome safari Opera 子元素选择器 概念：子元素选择器只能选择某元素的子元素 语法格式：父元素>子元素（father > childen） 相邻兄弟元素选择器 概念：相邻兄弟元素选择器可以选择紧接在另一元素后的元素，而且他们具有相同的父元素 语法格式：元素+相邻兄弟元素（Eelement+Si...
【CSS学习笔记02】 1.复合选择器 1.1后代选择器/* 任意基础选择器组合，选择器间用空格隔开 */ol li {color: pink;}ol li a {color: red;}.nav li a {color: yellow;}1.2子元素选择器<style>/* 最近一级的选择器 */.nav>a {color: red;}</style>1.3并集选择器div,p,.pig li {color: pink;}id：身份证（唯一） class：可以理解为名字（可以被多个人使用） 1.4链接伪类选择器<style>/* 1.未访问的链接 a:link 把没有点击过的(访问过...
一 基础选择器标签选择器：选择的标签的‘共性’，而不是特性 div{}、ul{}、ol{}、form{} 类选择器：.box{} id选择器：#box{} 只能选择器的特性，主要是为了js *通配符选择器：重置样式例子： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css学习</title> 6 <style> 7 /*#标签选择器*/ 8 p{ 9 color: red;10 }11 /*类...
CSS选择器（重点） 理解能说出选择器的作用 id选择器和类选择器的区别1. CSS选择器作用（重点）如上图所以，要把里面的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组选择器的作用找到特定的HTML页面元素CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来 必须记住的css 就是 分两件事， 选对人， 做对事。 h3 { color: red; }这段代码就是2件事， 把 h3选出来， 然后 把它变成了 红色。 以后...
一、用法 1、行间式 2、写在head里面的style标签里面 3、新建一个.css文件，用<link rel="stylesheet" href="a.css">引入 二、基础选择器 1、id选择器 2、类选择器 3、标签选择器 4、属性选择器 5、通配符选择器 三、复合选择器 1、子级选择器 选择器 选择器{} 2、直接子级选择器 选择器 > 选择器{} 3、并集选择器 选...
1、基本选择器1.1 通配符选择器通配符选择器又称为通用元素选择器，会匹配所有的元素，对所有元素都生效。语法为*{}：*{margin:0;padding:0}1.2 ID选择器ID选择器是比较常用的选择器之一，使用方式就是#id名{}，例如：<div id=main> id选择器</div>#main{margin:0;}1.3 类选择器类选择器又叫class选择器，也属于比较常用的选择器之一，使用方式就是.class名{}，例如：<div class=main> class选择器</div>.main{margin:0;}1...
一.选择器： 1.三种基本选择器： 元素选择器 也叫标签选择器类选择器，以符号（.）开头ID选择器，以符号（#）开头 例子: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>三种选择器练习</title> <style>h1{color: papayawhip; }.a1{color: palegreen; }#a2{color: navy; }</style></head><body><!-- 优先级：id选择器>类选择器>标签选择器 --><h1 > <!--标签选择器-->选择器 </h1> <h1 class="a1">...
前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟...