CSS attribute selectors
[]: Attribute selector
The beginning of the match ^ =
1a[href ^= "page2"] {
2 color: green;
}
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
The end of the match $ =
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
/*结尾匹配*/
a[href $= "page2"] {
color: green;
}
Match Any * =
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
/*任意匹配*/
a[href *= "page2"] {
color: blue;
font-weight: bold;
}- html5 can customize the properties, it must begin with data-
- Dash match: | =
- Packet matches: ~ =
Son sequence selector
Select a few of the old elements of all sons. Concern is that all sons of the overall ranking
: First-child first son
: Last-child last son
: Nth-child (n) n-son
: Nth-child (an + b) a plurality of successive
: Nth-last-child (n) represents the inverse of the n
Son type sequence selector
Select a few elements all the same kind of old tag types sons. Is concerned that the same kind of labels rankings in son
: First-of-type tag in the same kind of first son
: Last-of-type tag in the same kind of the last son
: Nth-of-type (n) n-son isotype tab
: Nth-of-type (an + b) continuously in a plurality of the same kind of tags
: Nth-last-of-type (n) represents the same kind of label reciprocal of n
Son sequence selector with distinction son type sequence in that one selector only a single label control element controlling a plurality of tags isoforms
Relations node selector
div p {}
>: Child selectors only select nodes can not select the other son descendant elements
+: After the first brothers
~: Behind all the brothers
/*> 只能选中儿子节点*/
.box > p {
color: red;
}
/*+ 后面第一个亲兄弟*/
h3 + p {
color: green;
font-weight: bold;
}
/*~ 后面所有的亲兄弟*/
h3 ~ p {
color: blue;
}
Pseudo-classes
1. hover has any
: Hover pseudo-class Hover
2 form pseudo-class
: Checked pseudo-class represents the selected tab is selected to change the style
: Focus gets focus pseudo-class common in the check box
input:focus {
/*外轮廓*/
outline: none;
border: 1px solid red;
}: Disabled use form pseudo-gray immutable class
: Enabled pseudo-class available forms can be used to write can not write
Pseudo node class
: Only-child of the selected element must be the only child of a certain element
: Empty empty node pseudo-class
Pseudo-element
:: before increasing the common floating in clear prior to the original content
We must set the content: to increase the property value of content writing
Row element
:: the After added after the original content
We must set the content property, inline elements
应用：清除浮动
::after{
content:" ";
display:block;
clear:both;
}
或者在文字加入小圆点改变颜色都可以使用
box ul li a::before {
2 /*必须设置content*/
3 content: "";
4 /*行内元素 不能设置宽高
5 1小圆点设置宽高
6 2位置便于调整
7 定位
8 */
9 position: absolute;
10 left: 10px;
11 top: 20px;
12 width: 10px;
13 height: 10px;
14 border-radius: 50%;
15 background-color: #eee;
16}
17 .box ul li a:hover {
18 color: orange;
19}
20 .box ul li a:hover::before {
21 background-color: orange;
}
<div class="box">
<ul>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
</ul>
</div>
Other pseudo-element
:: first-letter first characters
:: first-line first line of text
:: selection mouse to select effect
Rounded
border-radius
/ * Semicircle: some rounded edges do not set limits may be short side all * /
The method set semicircle
border-radius: 200px 200px 0 0;
Also can be set up
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-left-radius:
-
border-bottom-right-radius:
Shadow box
Right offset
The offset
Blur radius
Amount of extension (omitted)
colour
Inner shadow: inset
文字阴影/*没有内阴影和延伸量*/
text-shadow: 0 0 0px rgba(255,0,0,.5);box-shadow: 5px 10px 10px 10px rgba(0,0,0,.5);A plurality of shadow element may be provided simultaneously, separated by commas
/*多个阴影使用逗号隔开*/
3 box-shadow: 0 0 5px rgba(255,0,0,.9),
4
5 5px 5px 5px rgba(0,255,0,.5);6 }
Inner Shadow
1 .no3 {
2 box-shadow: inset 5px 5px 5px rgba(255,255,0,.5);3 }
background
background-origin: content-box; from the contents of the box top left corner to start rendering
BACKGROUND position: offset with respect to the background represents the position of the origin of the effect achieved generally vertically centered background-position binding using
.box {
width: 300px;
height: 300px;
padding: 50px;
border: 50px solid #000;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*内容盒width*height*/
background-origin: content-box;
color: red;
background-position: 0 0;
}
background-clip: content-box; cutting shows a background region other background cut off, leaving only the background content box area
.box2 {
width: 300px;
height: 300px;
padding: 50px;
border: 50px solid #000;
background-image: url(images/baby.png);
background-clip: content-box;
}
background-size: width and height; BACKGROUND size
The training may be used px border magin padding width and height of the box itself to determine the size of the background
You can also use a percentage to do
background-size: cover; 1 background 2 is not deformed blank background area 3 will not be possible to display the background incomplete Cover (cover, as large as possible)
.box6 {
width: 300px;
height: 400px;
padding: 50px;
border: 50px solid #000;
color: red;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*大背景区域4:5 背景图1:1*/
background-size: cover;
}
不留白占整个盒子但是图片会变形background-size: contain 1 background 2 is not modified some background context 3 show the complete area may be left blank Contain (receiving, show all)
.box7 {
width: 300px;
height: 400px;
padding: 50px;
border: 50px solid #000;
color: red;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*大背景区域4:5 背景图1:1*/
background-size: contain;
}
图片完整但是可能会留白
BACKGROUND positioning background-position
background-repeat: no-repeat; if not Tile Tile
background-attachment: 卷动
When faced sprite is when you want to load a background image can be limited to high child to the parent box set box width and height by half margin-top location halved background
Gradient background obtained through background-image
background-image: -webkit-linear-gradient (gradient start direction, gradient color, gradient color)
Different browsers compatibility Chrome and safari -webkit-
firefox -moz-
ie -ms-
work-o
The first argument: Gradual start direction
Other parameters: gradient colors, writing can be more, separated by commas
Color may be separated by a space behind a percentage, indicating the position of the color appears in the entire gradient
1 .box1 {
2 width: 200px;
3 height: 200px;
4 border: 1px solid #000;
5 background-image: -webkit-linear-gradient(top,red,green);
6 background-image: -moz-linear-gradient(top,red,green);
7 background-image: -ms-linear-gradient(top,red,green);
8 background-image: -o-linear-gradient(top,red,green);
9 background-image: linear-gradient(top,red,green);10 }
And more background
A plurality of elements can render the background separated by commas, other single attributes are separated by commas, correspondence background
background: url(images/baby.png) content-box,
url(images/xiaoming.png);
/*单一属性也是逗号隔开*/
background-repeat: no-repeat, no-repeat;
background-size: 100px 100px,cover;
Transition effect
transition: transition properties (all) the transition completion time (S) Buffer Descriptor (linear ease uniform non-uniform) delay time; (0 seconds if the unit must be provided)
Bezier cubic-bezier a non-uniform
Dry jump directly effect plus: hover
transition-property: property transition
transition-duration: transition time
transition-timing-function: Buffer Descriptor
transition-delay: Delay time
/*过渡
8 第一个参数：参与过渡属性 all
9 二：时间，单位是s
10 三：缓冲描述 linear匀速 ease非匀速 贝塞尔曲线
11 四：延迟时间，单位是s,如果是0s也必须设置单位
12 */
13 /*transition: width 1s linear 0s;*/
14 transition: all 1s linear 0s;
15 transition: all 1s cubic-bezier(0.14, 1.1, 0.82, -0.04) 0s;
16 }
Examples gradient background Buttons Buttons
.btn {
/*行内元素*/
display: block;
width: 250px;
height: 60px;
border: 1px solid #000;
margin: 50px auto;
border-radius: 5px;
/*先设置背景图在设置渐变*/
background-image: url(images/paopao.png), -webkit-linear-gradient(top,#67BCFD,#1979C4);
text-align: center;
line-height: 60px;
font-size: 30px;
color: #fff;
/*过渡*/
transition: all 1s linear 3s;
}
/*background-position可以参与过渡*/
.btn:hover {
background-position: right bottom;
}Display of results
2D Transformations
transform: Deformation
Rotational transform: rotate (numerical deg); positive clockwise direction
.box:hover img {
/*旋转*/
/*一周360deg 可以超过*/
/*transform: rotate(400deg);*/
}Zoom transform: scale (1) 0-1 larger infinitely narrow 1-
.box2:hover img {
/*缩小0-1*/
transform: scale(0.5);
/*放大1-*/
transform: scale(1.6);
}case
.box2 {
width: 200px;
height: 200px;
background-color: lightblue;
/*border-radius: 50%;*/
border: 1px solid #000;
overflow: hidden;
}
.box2 img {
/*一个元素可以有多个变形 用空格隔开*/
display: block;
transform: rotate(30deg) scale(1.3);
transition: all 1s linear 0s;
}
.box2:hover img {
/*没有变形*/
transform: none;
}Miter transform: skew (horizontal deg, vertical deg)
.box3:hover img {
/*斜切（水平，垂直）*/
transform: skew(50deg,0);
transform: skew(0deg,50deg);
}
Mobile space transform: translate (horizontal px, vertical px) standard stream home position
Floating positioning standard stream from absolute positioning relative positioning transform: translate the standard stream
Application: absolute positioning is centered horizontally
|