一、选择符在运用在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. HTTP API开发

    近期手上的安卓app需要用到自动更新的功能,想着怎么实现,看了下很多应用商店的sdk,觉得不太好,可能会收集用户隐私,于是想着自己实现一个http api后面自己可以实现自动更新,甚至广告推送的功能, ...

  2. ubuntu ping响应慢的解决方法

    ubuntu ping网站时每次ping指令都需要很久才能有响应,不过网络延迟却正常.   后来发现是因为/etc/nsswitch.conf文件中hosts的配置有问题,做如下修改后正常:   将原 ...

  3. php实战开发之自我整理(学习笔记)

    PHP没有创建变量的命令,变量会在首次赋值时进行创建. 简单样例 1 <?php $word="My first choice"; $x=5; echo $x; echo & ...

  4. springmvc js/css路径问题

    ①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...

  5. xampp本地配置多域名

    xampp内建apache服务器,也是可以配置vhosts的 1. 打开httpd.conf文件,搜索vhosts 发现这句话: # Virtual hosts Include conf/extra/ ...

  6. WSME api controller嵌套使用wtypes

    # 定义user类型和user列表类型 from wsme import types as wtypes class User(wtypes.Base): name = wtypes.text age ...

  7. ABAP 分货日报表

    *&---------------------------------------------------------------------* *& Report  ZSDR031 ...

  8. Java GridBagLayout 简单使用

    这里只介绍了很基础布局构建及使用,主要是关于 GridBagLayout. 首先整套流程大概是, 声明一个 GridBagLayout 对象 private GridBagLayout gridBag ...

  9. CoreAnimation 之CATextLayer

    如果你想在一个图层中显示文字,完全可以借助图层代理直接将Core Graphics写入图层的内容(这就是UILabel的精髓).如果雨果寄宿于图层的视图,直接在图层上操作,其实相当繁琐.你要为每一个显 ...

  10. JupyterNotebook如何添加table of content

    不要总是等待,而是去创造 方法一 ipython notebook升级成了jupyter notebook,在4.x之后的版本,jupyter提供了jupyter-nbextension命令来安装和启 ...