分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

css的选择器

发布时间:2023-09-06 01:55责任编辑:苏小强关键词:选择器

       优先级等级

行内样式 > ID选择器 > 类选择器 > 标签选择器

   标签选择器         优先级为1

      类选择器           优先级为10

      ID选择器           优先级为100

      行内样式            优先级为1000

基本选择器包含:

1.标签选择器
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

<head> ???<meta charset="UTF-8"> ???<title>属性选择器</title> ???<style> ???????/*属性选择器必须放在style内*/ ???????p{ ???????????/*对下面body中的所有的p标签的属性进行操作*/ ???????????font-size: 170px; ???????????color: aqua; ???????} ???</style></head><body><p> 这是一个段落</p></body>

ID选择器:

#选中ID

同一页面中的ID不能重复

任何标签都可设置id

 ID选择器

语法格式:

     CSS , #id名称 { 属性名N:属性值; }

HTML, <标签名 id=”id名称”>内容</标签名>

描   述: 选择含有指定ID名称标签,添加属性

注   意:

1、 属性值id名称首字母不能是数字(注:可以为中文,但是强烈不推荐,区分大小写)

2、 ID名称在一页页面中,只能出现一次

id命名规范,要以字母 可以又数字 下划线 大小写样额区分,aa和AA是两个不一样的属性值

 ??<style> ???????#in{ ???????????/*对你下面的id对应的值来进行设置*/ ???????????color: aqua; ???????????font-size: 55px; ???????} ???????#ino{ ???????????/*对ino对应的id进行设置*/ ???????????color: red; ???????????font-size: 33px; ???????} ???????#info{ ???????????/*对info对应的id进行设置*/ ???????????color: yellow; ???????????font-size: 99px; ???????} ???</style></head><body><p id="in"> 这是一个段落</p><u id="ino">说的是什么</u><br/><i id="info">我可以设置的</i></body>

id的设置也是必须在head中的style标签中的内容 ,也是必须要用#来进行开头设置的

id选择器是有一些不足的 你可以id都一样你想要好几个设置一样的  就不能很多的一起进行设置 因为id的值不能一样的

类选择器:

所谓的类就是class ,class 与id非常的相识的 任何的属性都可以加类 但是类是可以重复的  属于归类的概念

同一个标签中可以携带多个类  用空格隔开

类的使用,能够决定前端工程师CSS的水平

一定要有公共类的概念

Class/类选择器

语法格式:

     CSS , .class名称 { 属性名N:属性值; }

HTML, <标签名 class=”class名称”>内容</标签名>

描   述: 选择含有指定class名称标签,添加属性

注   意:

1、 属性值class名称首字母不能是数字(注:可以为中文,但是强烈不推荐,区分大小写)

2、 Class在页面可以出现多次,并且class名称可以写多个(注:多个名称之间用空格隔开)

可以设置一样的一起改变:

<head> ???<meta charset="UTF-8"> ???<title>类选择器</title> ???<style> ???????.American{ ???????????font-size: 66px; ???????} ???</style></head><body><p class="American">特朗普</p><br/><u class=" American">奥巴马</u><br/><i class="American">小布什</i><br/></body>

也可以根据不同的class对应的名字来设置不同的操作,也可以根据class的值的进行的不同的设置

<head> ???<meta charset="UTF-8"> ???<title>类选择器</title> ???<style> ???????.American{ ???????????font-size: 66px; ???????} ???????.merchant{ ???????????color: yellow; ???????} ???????.politician{ ???????????color: aqua; ???????} ???????.executioner{ ???????????color: bisque; ???????} ???????.man{ ???????????font-family: 宋体; ???????} ???????.woman{ ???????????font-family: 楷体; ???????} ???</style></head><body><p class="American ?merchant man">特朗普</p><br/><u class=" American politician man">奥巴马</u><br/><i class="American executioner ?woman">小布什</i><br/></body>
相同的class的设置

通配选择器选择器

语法格式: * { 属性名N:属性值; }

描    述: 选择页面所有标签添加属性

可以对你页面的所有的选择器都进行设置 把body中内容进行设置 可以把页面的所有的内容都进行修改

<head> ???<meta charset="UTF-8"> ???<title>通配选择器</title> ???<style> ???????*{ ???????????/*运用统配选择器把所有的都进行换颜色操作*/ ???????????color: red; ???????} ???</style></head><body><p class="American">特朗普</p><del class="American">老布什</del><i class="American">爸爸我</i><u id="rr">还是我</u><pre> ???呃呃呃</pre></body>

css的选择器

原文地址:https://www.cnblogs.com/askzyl/p/9074283.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved