• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

CSS选择器

互联网 diligentman 2周前 (01-12) 8次浏览

什么是选择器:

每一条css样式定义由两部分组成,形式如下:

[code] 选择器{
样式;
} 

[/code] 在{}之前的部分就是“选择器”, “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

基础选择器

  • 标签选择器(选择标签名):一个完整的HTML页面是有很多不同的标签组成,而 标签选择器,则是决定哪些标签,采用相应的CSS样式;

如:

p{
color:#900;
font-size:12px;
background:#090;
}
  • ID选择器(#号+ID名):ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次;

如:

#demoDiv{
color:#FF0000;
}
  • 类选择器(.+class名):类选择器根据类名来选择,前面以”.”来标志;

如:

.demoDiv{
color:blue;
}
  • 通用选择器(选择全部元素):通用选择器用*来表示;

如:

* {
color:green;
font-size: 12px;
}
  • 群组选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔;

如:

p,h1,span{
color:red;
line-height:20px;
}
#main p, #sider span {
color:#000;
line-height:26px;
}

使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。

层次选择器

  • 子选择器 (元素之间用>分割):子选择器(child selector)是指它的直接后代,可以理解为作用于子元素的第一个后代;

如:

p>span{
color:red;
}
  • 后代选择器(元素之间用空格分隔):用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开

如:

section span{
color:blue;
}

子选择器与后代选择器的区别:
1)子选择器(child selector)仅是指它的直接后代,而后代选择器是作用于所有子后代元素;
2)子选择器是通过“>”进行选择,而后代选择器通过空格来进行选择;

  • 兄弟选择器(元素之间用+分隔):除了上面的子选择器与后代选择器,我们可能还希望找到兄弟两个当中的一个,如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式。我们就可以使用相邻同胞选择器;

如:

h1 + p {
color:blue;
}

伪类选择器

伪类可以应用在链接标签中,也可以应用在一些表单元素中,但表单元素的应用IE不支持,所以一般伪类都只会被应用在链接的样式上。

  • 动态伪类选择器

动态伪选择器的书写顺序:
1)link和visited必须放在最前面(无先后顺序,静态伪类选择器);
2)link和visited只能用于a标签;
3)link和visited后面是focus
4)focus后面是hover;
5)hover后面是active;

  • 结构伪类选择器

first-child:第一个元素。
last-child:最后一个元素。
nth-child(n):某一个元素 想选择第几个,n就取值多少。
nth-child(-n+m):选中前m个元素 n起始值是0。
nth-of-type(n):选中第n个元素。
nth-last-child(n):选中倒数第n个元素.

  • 否定伪类选择器

元素名:not(n)除了某个元素,其它元素添加样式

伪元素选择器:

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器;

  • :first-letter,设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;
  • :first-line:设置第一个文本行样式;
.box .main:first-line {
color: #f00
} 
 //只有部分属性允许first-line:所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
  • :before:设置之前的样式,可以插入生成的内容,并设置其样式;
body:before {
content: 'The Start:'; 
display: block;
}
//在body元素前插入文本内容'The Start:',并设置其为块元素
  • :after:设置之后的样式,可以插入生成的内容,并设置其样式;

例:

body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.',并设置其为块元素
  • input::-webkit-input-placeholder(修改输入框提示信息样式)

属性选择器

是根据元素的属性来匹配的,其属性可以是标准属性也可以是自定义属性;也可以同时匹配多个属性;

  • 格式:元素名称[属性名+“属性值”]
input[type=“text”]
  • 格式: 元素名[属性名^=属性值开头的内容]

选中以XXX开头的元素

input[type^=“te”]+span{ 
color:red;
}
  • 格式: 元素名[属性名 $ =属性值结尾的内容]

选中以XXX结尾的元素

input[type $ =“d”]+span{
 color:blue;
}
  • 格式: 元素名[属性名* =属性值包含的内容]

选中包含XXX的元素

input[type*=“i”]+span{ 
color:green;
}

程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2021/01/css%e9%80%89%e6%8b%a9%e5%99%a8-2/
喜欢 (0)