CSS学习笔记03-CSS复合选择器

目录

  •  交集选择器
  •  并集选择器
  •  后代选择器 
  •  子元素选择器
  •  链接伪类选择器
  •  结构伪类选择器
  •  占位符选择器
  •  伪元素选择器
  •  属性选择器

交集选择器

交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。其中第一个为标签选择器,第二个为类选择器,两个选择器之间不能有空格。



    
    

我是第一个

我是第二个

我是第三个

我是标题

CSS学习笔记03-CSS复合选择器_第1张图片

 并集选择器

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

  


    

我是段落

我是标题

我是普通盒子

CSS学习笔记03-CSS复合选择器_第2张图片

后代选择器 

后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

 


    
爸爸

儿子

 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。




    
爸爸

儿子 孙子

CSS学习笔记03-CSS复合选择器_第3张图片

 链接伪类选择器

  • :link /* 未访问的链接 */

  • :hover /* 鼠标移动到链接上 */

  • :active /* 选定的链接 */

  • :visited /* 已访问的链接 */

    
    
    
        百度
        

    我是段落

结构伪类选择器

E:first-child
选择父元素的第一个子元素E。

E:last-child
选择父元素的最后一个子元素E。

E:nth-child(n)
匹配父元素的第n个子元素E,假设该子元素不是E,则选择器无效。

E:nth-last-child(n)
匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择器无效。

E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。

该选择器总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E

占位符选择器

E::placeholder , 修改占位符样式




    

伪元素选择器

  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行;

  3. E::selection 可改变选中文本的样式;

  4. E::before和E::after   在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。

    
    
    
        

    你寂寞。泰戈尔说:“我们把世界看错了,反说他欺骗我们。” 你自卑。“你之所以感到巨人高不可攀,那只是因为你跪着。” 你痛苦。牧师悄悄告诉你:“人比神伟大,因为神不懂得痛苦。” 你违心。知道吗:“世界上有许多事情必须做,但你不一定喜欢做,这就是责任的全部意义。” 你懊悔。聂?鲁达《太阳颂歌》中说:“过去我不了解太阳,那时我过的是冬天.......” 你焦急。大仲马讲:“人生就是不断的等待与希望。”

     选中:

          CSS学习笔记03-CSS复合选择器_第4张图片

  属性选择器

  



    

我是p标签

我是大p

我是a 我也是a 你好

我是标题

abc abcd bcd

我是段落

CSS学习笔记03-CSS复合选择器_第5张图片

 

你可能感兴趣的:(css,学习,前端)