网站地图

css的选择符有哪些?css选择符的作用是什么?
2021-04-11 16:15:57   来源:   评论:0 点击:

css的选择符:1 html选择符(标签选择器)就是把html标签作为选择符使用如 p{ } 网页中所有p标签采用此样式 h2{ } 网页中所有h
css的选择符:
css的选择符有哪些?css选择符的作用是什么?
1. html选择符(标签选择器)
就是把html标签作为选择符使用
如 p{....}  网页中所有p标签采用此样式
   h2{....}  网页中所有h2标签采用此样式

2. class类选择符 (使用点.将自定义名(类名)来定义的选择符)
定义:    .类名{样式....}    匿名类
  其他选择符名.类名{样式....}
使用:<html标签 class="类名">...</html标签>

.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

p.ps{color:green;}  /*只有p标签中class属性值为ps的才采用此样式*/

注意:类选择符可以在网页中重复使用

3. Id选择符
定义: #id名{样式.....}
使用:<html标签 id="id名">...</html标签>

注意:id选择符只在网页中使用一次.

选择符的优先级:从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

4. 关联选择符(包含选择符)
格式: 选择符1 选择符2 选择符3 ...{样式....}
例如: table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5. 组合选择符(选择符组)
格式: 选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

6. 伪类选(伪元素)择符:
格式: 标签名:伪类名{样式....}

a:link {color: #FF0000; text-decoration: none}      /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none}      /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */


相关热词搜索:css的选择符 html选择符 选择符使用 class类选择符 class属性值 Id选择符 选择符的优先级 关联选择符 组合选择符 伪类选(伪元素)择符

上一篇:CSS层叠样式表的基本语法和用法是什么?html中如何使用css?
下一篇:css的选择器有哪些?css选择器有什么作用?css选择器如何用?

分享到: 收藏