Date: 2020-10-02
Author: 19th WY
Tags: CSS selector related content
1. Introduction to CSS
Cascading Style Sheets:
- css can be used to create style sheets for web pages, and web pages can be modified through style sheets
- Cascade: understand the web page as a layered structure, with a higher level of coverage and a lower level of coverage
- CSS can set styles for each level of the web page separately
Two, CSS style writing method
1、
-
You can write the css style into the style attribute of the element
-
font-size is to set the text size
-
Write the style directly into the tsyle attribute. This style is called inline style
<body>
<p style="color:red;font-size:20px;"> photo</p>
</body>
2、
-
You can also write CSS styles into the style tag in the head
-
Put the style in the style tag, and then select the specified element through the CSS selector
-
Then these elements can be styled together, so that the style can be further reused
-
Writing style sheets into style can also further separate presentation and structure
<style type="text/css">
p{
color:red;
font-size: 40px;
}
</style>
3、
-
You can also write the style sheet into an external CSS file, and then use the link tag to introduce the external CSS file into the current page
-
Write the css styles in an external style sheet, completely separate the structure and the style, so that the style sheet can be used in different pages
-
The style can be reused to the maximum extent, the style is written in the style sheet, and then imported through the link tag, you can use the browser cache
-
Speed up user access and improve user experience, so the most recommended in development is the external css file
/*新建一个以.css结尾的文件，将样式写在该文件中，通过link标签引入*/
<link rel="stylesheet" type="text/css" href="style.css" />
Three, CSS inline and block elements
1、
-
div is a block element
-
The so-called block element is an element that will occupy a row by itself. No matter how much its content is, it will occupy a whole row by itself.
-
Common block elements: p h1 h2 h3……
-
The div tag has no semantics, it is a pure block element, and no default style is set for the elements inside it
-
The div element is mainly used to lay out the page
<div style="background-color:red;width: 200px;">
this is a div
</div>
<p>this a p label</p>
2、
-
span is an inline element (inline element)
-
The so-called in-line elements refer to elements that only occupy their own size, and will not occupy a line alone
-
Common inline elements: a img iframe span
-
The span does not have any semantics, the span tag is specifically used to select the text, and then set the style for the text
<span>this is a span</span>
3、
-
The block element is mainly used for the layout of the page, and the inline element is mainly used to select the text and set the style
-
Under normal circumstances, only use block elements to contain inline elements, but not use inline elements to contain a block element
-
The a element can contain any element except itself
-
The p element cannot contain any block elements
<a href="#">
<div style="background-color:red;width: 200px;">
this is a div
</div>
</a>
Four, CSS commonly used selector
PS:
We can set the class attribute for the element,
-
The class attribute is similar to the id attribute, but the class attribute can be repeated
-
Elements with the same class attribute value, we say that they are a group of elements
-
You can set multiple class attribute values for an element at the same time, and multiple values are separated by spaces
<p class="p2 hello">this is a word3</p>
<p class="p2">this is a word4</p>
<p class="p2">this is a word5</p>
<p class="p3">this is a word6</p>
<span class="p3">this</span>
1. Element selector:
-
Function: through the element selector can select all the specified elements in the page
-
Syntax: tag name {}
<style type="text/css">
p{
color:red;
}
h1{
color:red;
}
</style>
2. id selector
-
Select the only element by the id attribute value of the element
-
Syntax:
#id attribute value{}
#p1{
font-size:30px;
}
3. Class selector:
- Select a group of elements by their class attribute value
- Syntax:
.class attribute value{}
.p2{
color:blue;
}
.hello{
font-size:50px;
}
4. Selector grouping (union selector):
- Group by selector can select elements corresponding to multiple selectors at the same time
- Syntax: selector 1, selector 2, selector N{}
/*为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
#p1{
background-color:yellow;
}
.p2{
background-color:yellow;
}
.class{
background-color:yellow;
}
#p1,.p2,h1{
background-color:purple;
}
5. Wildcard selector
-
Can be used to select all elements in the page
-
grammar:*{}
*{
color:green;
}
6. Compound selector (intersection selector)
- Function:
You can select elements that satisfy multiple selectors at the same time - Syntax:
selector 1 selector 2 selector N{}
/*为拥有class p3 span元素设置一个背景颜色为黄色
*/
span.p3{
background-color:yellow;
}
For id selectors, it is not recommended to use composite selectors
p#p1{
background-color: pink;
}
Five, the relationship between the elements
1、
-
Parent element: an element that directly contains child elements
-
Child element: the element directly contained by the parent element
-
Ancestor elements: elements that directly or indirectly contain descendant elements
-
Descendant elements: directly or indirectly contained by ancestor elements, child elements are also descendant elements
-
Sibling elements: Elements with the same parent element are called sibling elements
2. Descendant element selector:
-
Role: Select the descendant elements of the specified element
-
Syntax:
ancestor element descendant element {} (a space in between)
/*为div中的span设置一个颜色为绿色*/
div span{
color:greenyellow;
}
<div>
<span>这是div中的span元素</span>
</div>
/*选中id为d1的div的后代元素span*/
#d1 span{
color:greenyellow;
}
/*选中id为d1的div中的p元素的span元素*/
#d1 p span{
color:pink;
font-size:50px;
}
<div id="d1">
<span>这是div标签中的span</span>
<p><span>这是p标签中的span</span></p>
</div>
3. Child element selector:
- Function:
Select the specified child element of the specified parent element - Syntax:
parent element> child element (greater than sign in the middle) - IE6 and below browsers do not support child element selector
/*为div的子元素span设置一个背景颜色为黄色*/
div > span{
background-color: indianred;
}
<div>
<span>这是div中的span元素</span>
</div>
Six, pseudo-class selector
1. Pseudo-type selector: specifically used to represent a special state of an element
- For example: visited hyperlinks, such as ordinary hyperlinks, such as a text box with focus
- When we need to style elements in these special states, we can use pseudo-classes
2. Define the style for the link:
-
Normal link:
-a:link -
Visited link
-a.visited (only the font color can be defined) -
Mouse over link
-a:hover -
Clicking link
-a:active -
:link
-indicates a normal link (links that have not been visited)
/*为没访问的链接设置一个颜色为绿色*/
a:link{
color:green;
}
- :visited
-indicates the link visited
/*为访问过的链接设置一个颜色为红色*/
a:visited{
color:indianred;
font-size: 50px; /*这句话是无效的*/
}
The browser judges whether a link has been visited through history records.
Because of the user privacy issues involved, the visited pseudo-class can only set the font color
- The :hover pseudo-class indicates the state of the mouse moving in
a:hover{
color:blue;
}
- :active represents the state of the hyperlink being clicked
a:active{
color:black;
}
IE6 does not support the setting of elements other than hyperlinks: hover and: active
PS:
:hover and :active can also be set for other elements
p:hover{
background-color: yellow;
}
p:active{
background-color: aqua;
}
3. Focus and selection
:focus: Get focus
/*文本框获取焦点以后，修改背景颜色为黄色*/
input:focus{
background-color: blueviolet;
}
/*使用input可以创建一个文本输入框*/
<input type="text" />
::selection: The selected element (two colons)
uses the style for the content selected in the p tag.
You can use the ::selection pseudo-class
- Note: This pseudo-class needs to be written in another way in Firefox,
p::-moz-selection{}
/*兼容火狐的*/
p::-moz-selection{
background-color: brown;
}
/*兼容大部分浏览器的*/
p::selection{
background-color:blueviolet;
}
Seven, pseudo element selector
Use pseudo elements to represent some special positions in the element
/*为p中第一个字符来设置一个特殊的样式*/
p:first-letter{
color:brown;
font-size: 50px;
}
/*为p中的第一行设置一个背景颜色为黄色*/
p:first-line{
background-color: yellow;
}
- :before means the front part of the element
Generally, before needs to be used in conjunction with the content style.
Through content, some content can be added to the position of before or after. - :after means the last part of the element
p:before{
content:"我会出现在整个段落的最前面";
color:red;
}
p:after{
content:"我会出现在整个段落的最前面";
color:blue;
}
Eight, attribute selector
-
title attribute, this tag can be assigned to any tag
-
When the mouse is moved to the element, the value of the title attribute in the element will be displayed as the prompt text
Attribute selector :
- Function: You can select elements according to their attributes or attribute values
- Syntax:
1⃣️[attribute name] to select elements with specified attributes
/*为所有具有title属性的p元素。设置一个背景元素为黄色*/
p[title]{
background-color: cyan;
}
2⃣️[attribute name="attribute value"] select the element with the specified attribute value
/*为title属性值为hello的元素设置一个背景元素为黄色*/
p[title="hello"]{
background-color: cyan;
}
3⃣️[attribute name^="attribute value"] select the element whose attribute value starts with the specified content
/*为title属性值为以ab开头的元素设置一个背景元素为黄色*/
p[title^="ab"]{
background-color: cyan;
}
4⃣️[attribute name$="attribute value"] select the element whose attribute value starts with the specified content
/*为title属性值为以c结尾的元素设置一个背景元素为黄色*/
p[title$="c"]{
background-color: yellow;
}
5⃣️[attribute name*="attribute value"] Select attribute value to include elements with specified content
p[title*="c"]{
background-color: yellow;
}
Nine, child element selector
- :first-child can select the first child element
- :first-child can select the last child element
p:first-child{
background-color: yellow;
}
p:last-child{
background-color: cyan;
}
/*如果写：*/
body > p:first-child{
background-color: yellow;
}
/*指的是包里的第一个子元素*/
-
:nth-child() can select child elements at any position
该选择器后边可以指定一个参数，指定要选中第几个元素 even 表示偶数位置的子元素 odd 表示奇数位置的子元素
p:nth-child(odd){
background-color: darkblue;
}
- :first-of-type
:last-of-type
:nth-of-type
and
:first-child are very similar, except that child is arranged in all child elements, while type is in the current child element Middle arrangement
p:first-of-type{
background-color: darkgoldenrod;
}
Ten, brother selector
1. The latter brother selector
-
Function: You can select the specified sibling element next to an element
-
Syntax:
previous + next
/*为span后的一个p元素设置一个背景颜色为黄色*/
span + div{
background-color: darkgoldenrod;
}
<span>我是span</span>
<div>我是div</div>
2. Select all the sibling elements behind
- Syntax:
previous ~ next
span ~ p{
background-color: darkgoldenrod;
}
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
11. Negative pseudo-classes
Negative pseudo-class:
-
Function: Some elements can be removed from the selected elements
-
Syntax:
:not(selector)
/*为所有的p元素中、设置一个背景颜色为黄色，除了class值为hello的*/
p:not(.hello){
background-color: darkgoldenrod;
}
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>/*只有这一行不变色*/
<span>我是span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
12. Inheritance of style
- In CSS, the style on the ancestor element will also be inherited by its descendant elements
- Using inheritance, some basic styles can be set to ancestor elements, so that all descendant elements will automatically inherit these styles
- Not all styles will be inherited by child elements, for example: background-related styles will not be inherited, border-related styles, positioning-related styles
<div style="font-size:20px;">
<p >
我是p标签中的文字
<span>我是span中的文字 </span>
</p>
</div>
Thirteen, the priority of the selector
-
When using different selectors, selecting the same element, and setting the same style, there is a conflict between styles. Which selector-defined style is ultimately used is determined by the priority (weight) of the selector
-
High priority style display
-
Priority rules:
内联样式，优先级 1000 id选择器，优先级 100 类和伪类，优先级 10 元素选择器，优先级 1 通配选择器*，优先级 0 继承的样式，没有优先级
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
*{
font-size:50px;
}
p{
font-size:20px;
}
</style>
<body>
<p class="p1 p3" id="p2" style="background-color:blue;">我是一个段落
<span>我是p标签中的span</span> //通配生效了，它是50px
</p>
</body>
/*最后颜色是blue，内联的优先级最高*/
/*span那里是50px，通配优先级比样式的继承高*/
- When the selector contains multiple selectors, the priority of the multiple selectors needs to be added and then compared
- But note that the selector priority calculation will not exceed the maximum order of magnitude, and the addition of 10 id selectors will not be 100. Only 99
#p2{
background-color: yellowgreen;
}
p#p2{
background-color:red;
}/*这里用了两个选择器，100+1=101*/
/*最后颜色是red*/
- If the priority of the selector is the same, use the lower style
<style type="text/css">
.p3{
color:green;
}
.p1{
color:yellow;
}
</style>
<p class="p1 p3" id="p2"">我是一个段落</p>
/*最后颜色是yellow，因为style中.p1靠后*/
- The priority of the union selector is to calculate
div, p, #p1, .hello() separately - You can add an !important at the end of the style, (important is written in front of the semicolon) then the style will get the highest priority.Will take precedence over all styles and even over inline styles, But try to avoid using !important in development
<style type="text/css">
.p3{
color:green;
}
.p1{
color:yellow;
background-color: aqua !important;
}
</style>
<p class="p1 p3" id="p2" style="background-color:antiquewhite;">我是一个段落</p>
/*最后颜色是aqua*/
14. The order of pseudo-classes
- There are four pseudo-classes related to a:
:link
:visited
:hover
:active
and the priority of these four selectors is the same - link and visited should be written before hover and active
hover should be written before active, because you need to move the mouse in first to click - Just write in the four order above
a:link{
color:yellowgreen;
}
a:visited{
color:red;
}
/*
鼠标移入
*/
a:hover{
color:orange;
}
/*
正在点击
*/
a:active{
color:blue;
}