ul元素状态伪类选择器处理文本换行_元素ul disabled-优快云博客

本文链接：https://blog.youkuaiyun.com/Lgw_zuiyouxiu/article/details/97233296

1.ul元素状态伪类选择器
E:focus 用于指定元素获得光标焦点时所使用的样式，主要是在文本框空间获得焦点并进行文字输入时使用的样式；

		E:disabled  设置该元素处于不可用状态的样式;

		E:enabled  设置该元素处于可用状态时的样式；
		
		E:read-only    指定当元素处于只读状态时的样式
		
		E:read-write   指定当元素处于非只读状态时的样式；
		
		E:checked  指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)
		
		E:default  指定当页面打开时默认处于选中状态的radio或checkbox控件的样式
		
		E::selection  指定当元素处于选中状态时的样式
		
		E:indeterminate  指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消;
	

<style>
			*{margin: 0;padding: 0;}
			input[type="text"]:focus{background: blue;}
			input[type^="em"]:disabled{background: black;}
			input[type="url"]:enabled{border-color: green;}
			input[type*="ear"]:read-only{border-color: yellow;}
			input[type$="el"]:read-write{height: 40px;}
			input[type="radio"]:checked{width: 40px;height: 40px;}
			input[type="checkbox"]:default{width: 50px;height: 30px;}
			input[type^="rad"]:indeterminate{width: 80px;height: 80px;}
			#box::selection{background: blue;color: yellow;}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="" /><br />
		<input type="email" name="" id="" value="" disabled/><br />
		<input type="url" name="" id="" value="" /><br />
		<input type="search" name="" id="" value="现在处于只读状态" readonly/><br />
		<input type="tel" name="" id="" value="" /><br />
		<input type="radio" name="zu" />
		<input type="radio" name="zu"/>
		<input type="radio" name="zu"/><br />
		<input type="checkbox" name="zuu" checked/>
		<input type="checkbox" name="zuu"/>
		<input type="checkbox" name="zuu"/><br />
		<div id="box">
	</body>

2.处理文本换行
word-bradk
normal 正常的英文换行方式
break-all 会折断单词换行，但只只要碰到边界就换行显示，会破坏单词的完整性

		word-wrap
			normal   正常的英文换行方式
			break-word   尽量保持单词的完整性，如果一行放不下，换行到下一行显示，如果下一行一整行都显示不下的时候才会换行显示

ul元素状态伪类选择器 处理文本换行

ul元素状态伪类选择器处理文本换行