一、选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用!

二、研究
普通选择符:

1、类型选择符:它可以选择同一个类型的元素!

例如:h1,h2 {

             color:red;

            }

可以对多个元素同时选择!

2、属性选择符:它可以根据元素的属性去选择!可以做到任何,全选!

例如:* {

           color:red;

        }

3.类选择符/ID选择符:特殊的属性选择符

.a {

    color:red;

  }

#a {

     color:red;

   }

结构选择符:

1.包含选择符(后代选择符):div p ul li a{…}表示一个div中的p中的ul中的li中的a。~~~^_^~~~ 选择符之间的空格是至关重要的!

2.子选择符:子元素选择符仅仅能选择某个元素的直接子元素(嵌套多层的后代不能被选择),其基本形式是 选择符1>选择符2.

3.相邻选择符:相邻元素选择符顾名思义就是选择相邻的元素。其一般形式为 b+p(对下相邻,而不对上相邻)

4.兄弟选择符:b~p不强制紧邻,四海之内皆兄弟的意思!会选择b以下的所有p元素。

伪对象选择符:

1、first-letter {

                 效果

               }

这是针对文本第一个字的修改,注意此为块元素的属性,如果是行内元素需要转化为块元素之后方可使用。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

2、first-line {

                效果

             }

这是针对第一行文字的设置,同是块元素。

3、placeholder=” “

改变输入框中占位符的颜色

伪类选择器:

1、a:link {

             效果

           }

鼠标点击之前的状态

2、a:hover{

             效果

          }

鼠标放上去悬空时的状态

3、a:active {

            效果

            }

鼠标点击时的状态

4、a:visited{

             效果

             }

鼠标点击后的状态

5、a::selection {

             效果

             }

设置选中的效果,增加了用户体验!可在复制文字时使用!

html基本选择符的使用的更多相关文章

  1. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  2. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  3. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  4. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  5. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  6. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...

  7. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  8. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  9. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

随机推荐

  1. 【总结】虚拟机VirtualBox各种使用技巧

    作为个人学习研究,VirtualBox是首选,它是Oracle下免费的.开源.跨平台的一款虚拟机软件,小巧.实用,一点也不逊于商业版的VMware Workstation. VirtualBox官网: ...

  2. Node.js入门学习笔记(三)

    基于事件驱动的回调 这个问题不好回答,不过这是Node.js原生的工作方式.它是事件驱动的,这也是它为什么这么快的原因.你可以花一点时间阅读一下Felix Geisendörfer的大作 Unders ...

  3. saltstack(主机改名)

    已存在salt中的机器,为了规范,需要将这批主机改名 操作流程:在master把这批机器剔除:然修改这批机器的主机名.在/etc/salt目录下.用mv把minion_id和pki的目录重命名.重启s ...

  4. JavaScript和JQuery好书推荐

    其实无论你是php/python/java还是c/c++,只会自己那点知识是无法独立完成一个站点的建设的! 如果你因自己能力不足拒绝过几次亲友的建站请求,或者因合作中不了解前端是什么东西而失去过几次创 ...

  5. myeclipse(2015)中创建简单的Maven项目的步骤(用于生成可执行jar文件)------》myeclipse2015

    利用MyEclipse的引导,可以很方便的创建简单的.用于生成可执行jar文件的Maven项目: 1.New -> Project... 选择 Maven Project, 点击Next > ...

  6. 根据字体计算CGRect

    UILabel *label = [[UILabel alloc]init]; label.numberOfLines = ;//多行显示 label.backgroundColor = [UICol ...

  7. UC浏览器 分享到朋友圈和微信好友 分类: JavaScript 2015-04-28 14:45 615人阅读 评论(1) 收藏

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  8. CSS3动画里的过渡效果

    过渡效果中有: 1平滑效果 2线性过渡 3由慢到快 4由快到慢 5慢-快-慢  等等 具体参考 w3chool 例如: <body> <div class="out&quo ...

  9. Alpha 测试

    活动助手Alpha--测试篇 测试分工 人员 分工 测试 牛姐 Android开发/ui设计 功能测试 橙汁 Android开发 功能测试 洪 数据库开发 数据库结构测试 佳凯 数据库设计与开发 接口 ...

  10. HDU5322 Hope(DP + CDQ分治 + NTT)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5322 Description Hope is a good thing, which can ...