码迷,mamicode.com
首页 > Web开发 > 详细

css篇:关于选择器

时间:2018-06-10 20:38:56      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:类型   块级元素   元素选择器   lan   必须   title   输入   语言   first   

1:多个选择器

  h1, h2 {}           ——h1或h2标签的所有元素

 

2:通配选择器

  * {}            ——所有元素

 

3:元素选择器

  div {}         ——所有div元素

 

4:类选择器

  .test {}        ——class属性为test的所有元素

   p.test {}       ——class属性为test的所有p元素

   .test.test1 {}      ——class属性有test、test1两个值的所有元素,包含有test、test1的三个值以上的也匹配

 

5:ID选择器

   #test {}       ——id属性为test的元素

 

6:属性选择器

  *[title] {}          ——有title属性的所有元素

   p[class] {}         ——有class属性的所有p元素

   a[href][title] {}      ——同时有href与title属性的所有a元素

   a[href="ddd"]       ——所有href属性值为"ddd/"的a元素

   a[href="dd"][title="dd"]   ——所有href属性值为"dd"且title为"dd"的a元素

   p[class~="test4"] {}   ——class属性值包含test4的所有p元素,对应的如class=“test test4”这样类型的会被包含

   p[class^="test4"] {}      ——class属性值以test4开头的所有p元素 

   p[class$="test4"] {}   ——class属性值以test4结尾的所有p元素 

   p[class*="test444"] {}  ——class属性值包含字串test4的所有p元素 ,对应的若有class="test44"]这样类型的会被包含

  

7:后代选择器

      div span{}      ——div元素下的所有span元素,即div可以是span的父辈,祖父辈等

   div > span {}     ——div元素下的所有span子元素,即span只能是div的子辈  

   div + span{}      ——为div相邻兄弟的所有span元素,即div与span有同一父辈,且div在前

 

8:伪类选择器

  a:link{}         ——未访问过的a元素

  a:visited{}       ——已访问过的a元素

 

9:动态伪类

   元素:focus{}      ——指当前拥有输入焦点的元素,即接收键盘输入等方式激活的元素

   元素:hover{}      ——指鼠标停留的元素

   元素:active{}        ——指鼠标激活的元素,如点击链接或按钮的那一刻的元素样式

 

   p:first-child{}      ——指第一个p元素,不是p的第一个子元素

   lang(){}         ——括号内为语言,指的是某种语言下样式

 

10:伪元素选择器

   p:first-letter{}     ——指p元素段内的第一个字母

   p:first-line{}       ——指p元素段内的第一行

   p:before{}       ——指在p元素前面设置的样式,此处可添加内容以及对应样式

   p:after{}       ——指在p元素后面设置的样式,此处可添加内容以及对应样式

   伪元素只能用于标记或段落类的块级元素,不能用于行内元素; 伪元素必须放在选择题主体后

css篇:关于选择器

标签:类型   块级元素   元素选择器   lan   必须   title   输入   语言   first   

原文地址:https://www.cnblogs.com/tianshu/p/9162896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!