ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS选择器

2021-04-11 14:56:57  阅读:20  来源: 互联网

标签:样式 标签 元素 color div 选择器 CSS


1、基本选择器

1.1 通配符选择器

通配符选择器又称为通用元素选择器,会匹配所有的元素,对所有元素都生效。语法为*{}:

*{margin:0;padding:0}

1.2 ID选择器

ID选择器是比较常用的选择器之一,使用方式就是#id名{},例如:

<div id='main'>
   	id选择器</div>

#main{margin:0;}

1.3 类选择器

类选择器又叫class选择器,也属于比较常用的选择器之一,使用方式就是.class名{},例如:

<div class='main'>
   	class选择器</div>

.main{margin:0;}

1.4 元素选择器

元素选择器又叫做标签选择器,主要是根据HTML的标签来选择。语法为标签名{},例如

<div><span>元素选择器</span></div>

div{margin:0;}span{padding:10px;}

1.5 属性选择器

属性选择器是通过标签里面有些属性值来进行选择,语法为标签名[属性值]

ex1:把包含标题的所有元素的字体颜色设置为蓝色:
*[title] {color:blue;}

ex2:只对有 href 属性的a标签设置字体颜色:
a[href] {color:red;}

ex3:对name属性值等于‘abc’的标签设置样式
form[name='abc']{color:red;}

2、组合选择器

组合选择器主要是对多个标签设置样式,例如:

<div id="main"><div class="box"><span>组合选择器</span></div></div>

/* 给div标签并且类名为box的标签设置样式 */div.box{margin:0;}/* 给div,span标签和.box类设置样式*/div,span,.box{margin:0}

3、关系选择器

关系选择器包括子选择器、后代选择器、兄弟选择器和相邻兄弟选择器

3.1 子选择器

子代选择器主要是对当前标签的直系子代进行选择,通俗的说就是只会选择儿子辈,不会选择孙子辈和其他后代辈。语法为父标签名>子代标签名

<div><p><span>子代选择器</span></p></div>

/* 有效 */div>p{margin:0;}/* 无效 */div>span{margin:0;}

3.2 后代选择器

后代选择器可以说是既包括儿子辈的,又包括孙子辈的标签元素。语法为父标签 后代标签

<div><p><span>后代代选择器</span><p><a>Baidu</a></p></p></div>

/*div中所有的p标签都会应用这个样式*/div p{margin:0;}

3.3 相邻兄弟选择器

相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签,只会对这一个标签有用,其他的兄弟标签不会生效。语法为兄弟标签+兄弟标签{}

<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>

/* 只会对box2生效 */.box+span{color:red;}

3.4 兄弟选择器

相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签,只会对这一个标签有用,其他的兄弟标签不会生效。语法为兄弟标签~兄弟标签{}

<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>

/* 会对box2,3,4都生效 */.box~span{color:red;}

4、伪类选择器

什么是伪类?

伪类用于定义元素的特殊状态。

例如,它可以用于:

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

伪类选择器的语法:标签名:伪类名{}

/* 未访问的链接 */a:link {
  color: #FF0000;}/* 已访问的链接 */a:visited {
  color: #00FF00;}/* 鼠标悬停链接 */a:hover {
  color: #FF00FF;}/* 已选择的链接 */a:active {
  color: #0000FF;}

更多伪类参考**菜鸟教程**

5、伪元素选择器

什么是伪元素?

CSS 伪元素用于设置元素指定部分的样式。

例如,它看用于:

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

伪元素选择器的语法为标签名::伪元素名{}

/*
::first-line 伪元素用于向文本的首行添加特殊样式。
下面的例子为所有 <p> 元素中的首行添加样式:
*/p::first-line {
  color: #ff0000;
  font-variant: small-caps;}/* ::before 伪元素可用于在元素内容之前插入一些内容。 */h1::before {
  content: url(smiley.gif);}/* ::after 伪元素可用于在元素内容之后插入一些内容。 */h1::after {
  content: url(smiley.gif);}

更多伪元素参考**菜鸟教程**

6、选择器优先级

CSS选择器的优先级按照下面的顺序从高到低进行排列。

  • !important

  • 内联样式/行内样式

  • ID选择器(#ID{})

  • 类选择器(.class{})

  • 元素选择器(div{})

  • 通配符选择器(*{})

  • 继承样式(*{})

标签:样式,标签,元素,color,div,选择器,CSS
来源: https://blog.51cto.com/u_15163444/2698846

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有