首页 > 编程知识 正文

CSS-基础选择器,标签选择器、id 选择器、类选择器、通配符 *的用法详解

时间:2023-05-04 01:30:16 阅读:181011 作者:1071

摘要要一对一、一对多或多对一控制HTML页中的元素,需要使用CSS选择器。 CSS选择器有很多种类,大致分为基础选择器、高级选择器、伪类选择器、CSS3选择器

基本选择器标签选择器(是标签的名称)所有标签都可以是选择器。 例如div、span、ul、li、dt、dl、dd、input等

不管这个标签藏得多深,都一定会被选中

标签选择器,选择全部而不是一个

标签选择器选择了页面上所有这种类型的标签,因此经常描述“共性”,无法描述某个元素的“个性”

ul li嵌套了ullidivp '。 我是深p'/p /div /li /ul /li/ul CSS:

/*页面中的所有p标记*/p {color: green; }/*选择页面的所有结构都将ul li的li标签*/ul li { /*设置为li的边框*/border: 1px solid gray; }可以把深p变成绿色

id选择器向指定id的元素添加样式。 网页的HTML标记的id属性的值。 任何HTML标记都可以具有id属性。 该值必须是唯一的。 id选择器的名称必须有以“#”开头的标记的id属性值的命名规则。 字符、数字和下划线必须以字符开头,并且不能与标记同名。 例如,id不能说是body、img、a等HTML页面。 不能出现同一个id。 (id必须是唯一的。 例如,即使页面包含id为myId的p标记,id为myId的div标记也是非法的。 h1 id='myId'id选择器/h1 CSS:

#myId{color:orange; background-color:pink; } h1标签上的文字的颜色为橙色,背景色为粉红色

class选择器(类选择器)用于为HTML标记的类设置样式

class属性是公开属性,任何标签都可以携带class属性

class属性与id非常相似,必须为class属性命名(设置属性值)

类选择器的名称必须以“.”开头。 class属性仅在CSS中可用

class属性可以重复。 例如,页面可能有很多具有teshu类的标记。 (一对多,多个标记使用同一个类。 )

同一标记,可能同时属于多个类。 多对一,多个类选择器作用于一个元素。 多个类由空格分隔。 例如:

h3 class=' teshu Yao '我是h3啊/h3这样,这个H3标签既属于teshu类,也属于gyao类

例如:

h3我是h3啊/h3 h3 class='teshu '我也是h3啊/h3 h3巧。 我也是h3啊/h3 p我是段落啊/p p class='teshu '我也是段落啊/p p class='teshu '

. teshu{color: red; }所有class='teshu '的元素的文本都为红色

类选择器的综合使用需求

段落1:60px绿色段落2 :绿色段落3:60px下划线的想法是使用所谓的“公共班级”的想法。 我们班是提供“公共服务”。 例如,有绿色、大、线。 携带这个类名后,样式会相应发生变化:

. lv{ /*字体颜色为绿色*/color:green; }.da{ /*字体大小为60px*/font-size: 60px; }.xian{ /*字符加下划线*/text-decoration : underline; }针对每个标签,去选择自己想要的类:

p class='lv da '段落1/pp class='lv xian '段落2/pp class='da xian '段落3/p

也就是说:

不要尝试使用类名写标签的所有样式; 这个标签必须有几个类,共同制作这个标签样式的每一类都要尽量小,除非有“公共”的概念,可以在非常特殊的情况下使用id,否则更多的标签应该尽量使用class 标签选择器、id选择器和类选择器这些选择器可以选择影响样式的相同标签。 这表示css缓存“级联”的第一级语义通配符*“*”表示所有元素都效率低下。 页面上的标签越多,低效的h1h1标签/h1ul liul li标签/li/ulpp标签/pdiv div标签span }所有标签的文本内容都将变为红色

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。