Let's talk about several selectors in CSS

零到壹度
Release: 2018-03-20 15:06:38
Original
1990 people have browsed it

Today this article mainly talks about several selectors in CSS. Friends who need it can refer to it. I hope it can help everyone.

1. Wildcard selector

The wildcard selector is represented by the "*" symbol. It has the widest scope among all selectors and can match the contents of the page. All elements

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}
Copy after login

2. Tag selector

The tag selector selects tags with the same name in the current page

/*设置所有p标签的文字颜色为红色*/p {color: red;
}
Copy after login

3. ID selector

The id selector is identified by "#", followed by the id name

{:;
}
Copy after login
Copy after login

This is the title

Note that the ID attribute value in the HTML tag must be unique in a page (it is a W3C specification rather than a hard rule).

ID selector naming convention

  • Only letters (uppercase and lowercase, strict distinction), underscores, and numbers are allowed, that is to say, id="Head" Does not conflict with id="head"

  • Only allowed to start with a letter

  • There is no length limit for the name, it can be 1 letter, or There are many, but it is not recommended to be too long

  • Tag names are not allowed (not a hard and fast rule)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示

{:;
}
Copy after login
Copy after login

这是标题1

这是标题2

一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}
Copy after login

这是标题2

5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special  /* 需要满足标签是h3同时拥有special类 */
Copy after login

p#one /* 需要满足标签是p同时id为one */
Copy after login

5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}
Copy after login

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

The above is the detailed content of Let's talk about several selectors in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template