Home >Web Front-end >CSS Tutorial >Let's talk about several selectors in CSS

Let's talk about several selectors in CSS

零到壹度
零到壹度Original
2018-03-20 15:06:382030browse

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;
}

2. Tag selector

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

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

3. ID selector

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

{:;
}

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属性值相同的一类标签,用.(点)表示 

{:;
}

这是标题1

这是标题2

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

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

这是标题2

 5、复合选择器

5.1、交集选择器

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

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

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

 5.2、并集选择器

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

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

 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!

Statement:
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