css篇:关于选择器

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元素后面设置的样式,此处可添加内容以及对应样式

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

猜你喜欢

转载自www.cnblogs.com/tianshu/p/9162896.html
今日推荐