一、选择符在运用在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. Go - 字典(map)

    字典是一种内置的数据结构,用来保存 键值对 的 无序集合. (1)字典的创建 1) make(map[KeyType] ValueType, initialCapacity) 2) make(map[ ...

  2. jdbctemplate中的批量更新使用,BigDecimal与造型的联系和区别

    //jdbctemplate批量新增的使用MENU_ID_LIST是前端页面传递到后端控制层,再由控制层传到实现层的List //JdbcTemplate是spring jdbctemplate通过注 ...

  3. cookie 巩固

    设定cookie 过期时间: Cookie coke = new Cookie("name", "pattern"); coke.setMaxAge(60);/ ...

  4. ORACLE简单触发器

    因工作需要,尝试写一些建议的触发器,下面为其中一例. //创建一个名为TRG_FIN_OPB_ACCOUNTCARD的触发器 create or replace trigger TRG_FIN_OPB ...

  5. waxpatch修改任意类的用法

    例如:修改一个UIView(PJView)的子类和一个NSObject(PJModel)类,则需要在patch.lua文件中声明这两个要修改的类 并且建立这些待修改的类的对应的.lua文件 对应的.l ...

  6. 51nod1072(wythoff 博弈)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1072 题意: 中文题诶~ 思路: 博弈套路是有的, 找np局 ...

  7. IBatis和Hibernate区别

    1. 简介 Hibernate是当前最流行的O/R mapping框架.它出身于sf.net,现在已经成为Jboss的一部分了.iBATIS是另外一种优秀的O/R mapping框架,现已改名叫myB ...

  8. jq点击显示,再点击隐藏

    每次都会遇到的问题: <script> $("button").click(function(){ if($(".div").css("d ...

  9. 弹性布局flex-兼容问题

    这里弹性布局的用法就不说了 用过的都知道很方便 虽然现在弹性布局已经实现标准了 但是还是存在一些兼容问题 旧版本 (一些低版本的浏览器) display:-webkit-box; 新版本(目前的标准版 ...

  10. JavaScript老梗之this对象

    Js中的this关键词貌似是初学者必经的坑 都不例外 我们经常听到其他人说 this对象谁调用指向谁 的确这是最容易理解的 但是我们可以更加深入的去探索下 加深印象以便更加灵活的适用它 这里不得不提下 ...