Today this article mainly talks about several selectors in CSS. Friends who need it can refer to it. I hope it can help everyone.
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)
类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示
{:; }
这是标题1
一个标签可以包含多个类选择器,在class标签中用空格隔开。
.head {color: blue; }.subHead {font-size: 50px; }
5、复合选择器
交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为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!