CSS选择器类型
程序员文章站
2022-07-04 20:06:00
...
每一条css样式声明由选择器和样式两部分组成,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
-
标签选择器
通过html代码标签选择元素。例如:
p{font-size:12px;line-height:1.6em;}
-
类选择器
作用于具有特定的class属性的标签。语法如下:
.stress{color:red;}
-
ID选择器
作用于具有特定id属性的标签。语法如下:
#setGreen{ color:green; }
类选择器和ID选择器的区别
(1)因为元素的id是唯一的,不能出现两个元素具有同一个id值。ID选择器只能使用一次。而class可以使用多次,同时作用于多个元素。
(2)可以使用类选择器词列表方法为一个元素同时设置多个样式。通俗的将,可以为一个元素指定多个类,如<span class="stress bigsize">
,但不能为一个元素指定多个id。 -
子选择器
选择指定标签元素的第一代子元素,如下,
.food>li{border:1px solid red;}
-
包含(后代)选择器
选择指定标签元素下的后辈元素,如
.first span{color:red;}
子选择器和后代选择器的区别
(1)子选择器仅选择直接后代(第一代后代),后代选择器作用于所有后代
(2)表达方式不同 -
通用选择器
匹配html中所有标签元素,表达方法为
* {color:red;}
-
伪类选择器
给标签的状态(鼠标滑过)设置样式,如a:hover{color:red;}
-
分组选择器
为多个标签元素设置同一个样式,如h1,span{color:red;}
相当于:
h1{color:red;} span{color:red;}
上一篇: JavaScript(Day3)
下一篇: 读写HTML DOM style对象属性
推荐阅读
-
求解 jquery css选择器 在ie6中会失灵
-
【Day 2】GO语言新手入门:变量的类型和声明
-
mysql-什么类型用来获取表单复选框的值
-
ul li 里面嵌套 ol li ,为甚么不能够在同一行显示_html/css_WEB-ITnose
-
探讨:php中在foreach中使用foreach ($arr as $value) 这种类型的解释
-
HTML数组详解_html/css_WEB-ITnose
-
html基本标签_html/css_WEB-ITnose
-
HTML学习目录_html/css_WEB-ITnose
-
CSS求救,SOS_html/css_WEB-ITnose
-
求高手帮我写个列表与列表之间的嵌套问题_html/css_WEB-ITnose