Home Web Front-end HTML Tutorial CSS选择器温故-1_html/css_WEB-ITnose

CSS选择器温故-1_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

1.基本选择器语法

2.浏览器兼容性:浏览器对基本选择器都是一路绿灯通行,可以放心使用。

3.通配选择器:选择所有元素,也可以选择某个元素下的所有元素

(1)选择所有元素: *{margin: 0;padding: 0;}

(2)某个元素下的所有元素:.demo *{background: purple;}

4.ID选择器

(1)在使用ID选择器(#id)之前,需要在HTML文档中给对应的元素设置id属性并设置其值,才能找到对应的元素

        eg:

HTML结构

(2)ID选择器具有唯一性,在一个页面id名只能有一个
(3)在CSS样式中使用id选择器,需要在id属性名前面加上【#】号

        eg:#demo{color: purple;}

5.类选择器

(1)在HTML中给需要的元素定义class属性,并为其设置属性值
(2)类选择器在一个页面中可以有多个相同的类名,而ID选择器其id值在整个页面中是唯一的一个(类选择器的简单使用方法)
        eg:.demo{color: purple;}

(3)类选择器的-多类选择器:通过两个或两个以上类选择器合并,来定义有别于一个类名的元素效果

        eg:.demo1.demo2{color: purple;}(两个选择器之间没有空格,应紧密相连)

        注:如果一个多类选择器包含的类名中,其中有一个不存在,这个选择器将无法找到匹配的元素

        注:IE6选择器并不支持多类选择器,其将以末尾类名为准

(4)多类选择器扩展

【3】表示两种类选择器,思考:元素选择器、ID选择器、类名选择器,都是选择器,也就表示都可以互相进行组合

  eg:div#demo{margin: 0;}

   div.demo{margin: 0;}

   .demo#demo{margin: 0;}

以后还会学习多种选择器,都可以进行这种组合使用,不过不建议组合过多。一是太复杂,可控性不好;二是完全没有这个必要,直接采用一个新的元素更好,并且没有兼容性问题(IE6不支持)

6.群组选择器

(1)群组选择器(selector1,selectorN)是将具有相同样式的元素分组在一起,每个选择器之间用逗号(,)隔开

(2)selector1,selector2,selector3,...,selectorN

(3)逗号(,)告诉浏览器,规则中包含多个不同的选择器,省去逗号就成了后代选择器(逗号成空格)或多类选择器(之间没有分隔)

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

What is the viewport meta tag? Why is it important for responsive design?

What are the security implications of using iframes, and how can I mitigate them? What are the security implications of using iframes, and how can I mitigate them? Mar 18, 2025 pm 02:51 PM

What are the security implications of using iframes, and how can I mitigate them?

See all articles