【HTML09】css3新增的内容

简单Janeee

已于 2022-07-09 16:45:51 修改

阅读量122

点赞数

分类专栏： html基础文章标签： css3 html 前端

于 2022-06-23 16:39:13 首次发布

本文链接：https://blog.csdn.net/liqiannan8023/article/details/125303434

版权

html基础专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

一、选择器

1.+ ：下一个兄弟选择器

2.~ ：下面所有兄弟

选中item元素之后的每一个li*

.item:hover~li{
			font-size: 30px;
		}

3.属性选择器

/*满足href为baidu的a标签，改变样式 需要精确的路径才能选择准确*/
a[href="baidu"] {
			font-size: 20px;
			font-weight: bold;
}

/*模糊查找 以b字母开头的路径 */
	a[href^="b"]{
			color: red;

	}

4.以某项内容结尾的$

/*以三为结尾的选中 4数字键有$*/
		a[href$="3"]{
			text-decoration:none;
		}

5.包含某个字母的标签内容

/*路径中包含i的a标签*/
a[href*="i"]{
			background-color: orange;
		}

6.不可用的input disabled/enable

/*不可用的input*/
		input[type="text"]:disabled{
			background-color: blue;
		}
		/*可用的input，激活了*/
		input[type="text"]:enabled{
			background-color: red;
		}

7.可以改变全局的样式，不需要选择

input[type="checkbox"]{
			width: 100px;
			height: 100px;
		}
		/*可以用来修改全局的样式，不用我们用类名和标签单独查找了*/

8.伪元素类的选择器

/*每一个p标签，第一行文字改变的样式*/
		p::first-line{
			color: red;
		}
		/*每一个p标签的第一个文字改变样式*/
		p::first-letter{
			font-size: 30px;
			font-weight: bold;
		}
		/*选中文字，和系统自带的颜色不相同，为orange的颜色*/
		p::selection{
			background-color: orange;
			color: #eee;
		}
		/*first-letter和selection属性有冲突，使用时，需要注意*/

二、边框和圆角

<style>
		p{
			width: 400px;
			height: 400px;
			margin:20px;
			float: left;
			text-align: center;
		}
		.p1{
			background-color: orange;
			border-radius: 100px;
		}
		.p2{
			background-color: orange;
			border-radius: 50%;
		}
		.p3{
			background-color: orange;
			border-radius: 200px 0;
			/*四个值：左上角 右上角 右下角 左下角 如果只设置一个值,则默认其他也相同
			如果只设置两个值 左上和右下值相同,右上和左下值相同*/
		}
		.p4{
			background-color: orange;
			border-radius: 200px 0 200px 200px;	
		}
		.p5{
			border-radius: 50%;
			height: 200px;
			background-color: orange;
		}
		.p6{
			width: 0;
			height: 0;
			border:200px solid orange;
			border-radius: 50%;
			/*给右边框设置透明*/
			border-right-color: transparent;
			/*transparent 透明*/
		}
		.p7{
			width: 0;
			height: 0;
			border:200px solid orange;
			border-radius: 50%;
			border-color: red transparent yellow transparent;
			/*上有下左设置边框
			可以使用border-left-color*/
		}
		.p8{
			background-color: red;
			/*每个角占两个边，可以根据每个边设置圆角属性*/
			border-radius: 50px/200px;
			/*第一个参数代表圆角的水平参数，第二个参数是圆角的垂直线*/
		}
		/*画一个三角形，等边三角形*/
		.p9{
			width: 0;
			height: 0;
			border:200px solid;
			border-color:blue transparent transparent transparent;
		}
		/*等腰三角形*/
		.p10{
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid red;
		}
	</style>
</head>
<body>

	<p class="p1">p1</p>
	<p class="p2">p2</p>
	<p class="p3">p3</p>
	<p class="p4">p4</p>
	<p class="p5">p5</p>
	<p class="p6">p6</p>
	<p class="p7">p7</p>
	<p class="p8">p8</p>
	<p class="p9">p9</p>
	<p class="p10">p10</p>
	
</body>