ICode9

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

CSS选择器

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

标签:样式 标签 元素 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有