css3 selector (3)_html/css_WEB-ITnose

Connect to css3 selector (1)

Connect to css3 selector (2)

This article has little relevance to the previous two articles, mainly related to to some css3 state selector so the title starts from the beginning.

1. [:enabled] selector

As soon as you look at this attribute, you will know that it is specially provided for form elements. Input boxes, password boxes, and check boxes in the form all have available (:enabled) and unavailable (:disabled) states. By default, these form elements are in the available state. These form elements can be styled via the selector:enabled.

Example: You can set the style of the input box.

<meta charset="utf-8"><style>div {    margin: 30px;}input[type="text"]:enabled {    border: 1px solid #f36;    box-shadow: 0 0 5px #f36;}</style><form action="#"><div><label>可用输入框:<input type="text"/></label></div><div><label>禁用输入框:<input type="text" disabled="disabled"/></label></div></form>

2. [:disabled] selector

When you see the [:enabled] selector, you know there must be a [:disabled] selector . As you can see from the name, the :disabled selector is the opposite of the :enabled selector and is used to match unavailable form elements. To use the :disabled selector, set the "disbled" attribute on the form element.

Example:

<meta charset="utf-8"><style type="text/css">form {    margin: 30px;}div {    margin: 10px;}input {    padding: 10px;    border: 1px solid orange;    background: #fff;    border-radius: 5px;}input[type="submit"] {    background: orange;    color: #fff;}input[type="submit"]:disabled {    background: #eee;    border-color: #eee;    color: #ccc;}</style><form action="#"><div><input type="text"/></div><div><input type="submit"value="我要回到上一步"/><input type="submit"value="禁止点下一步"disabled /></div></form>

3. [:checked] selector

In form elements, both radio buttons and check buttons are There are selected and unselected states. If you have tried it, you will know that it is difficult to set the default style of these two buttons. In CSS3, you can implement custom styles through the :checked selector and other tags. And: checked indicates the selected state.

This is a great move that can save a lot of effort.

Example: Use the :checked selector to simulate the check box style.

<meta charset="utf-8"><style type="text/css">form {  border: 1px solid #ccc;  padding: 20px;  width: 300px;  margin: 30px auto;}.wrapper {  margin-bottom: 10px;}.box {  display: inline-block;  width: 20px;  height: 20px;  margin-right: 10px;  position: relative;  border: 2px solid orange;  vertical-align: middle;}.box input {  opacity: 0;}.box span {  position: absolute;  top: -10px;  right: 3px;  font-size: 30px;  font-weight: bold;  font-family: Arial;  -webkit-transform: rotate(30deg);  transform: rotate(30deg);  color: orange;}input[type="checkbox"] + span {  opacity: 0;}input[type="checkbox"]:checked + span {  opacity: 1;}</style><form action="#">  <div class="wrapper">    <div class="box">      <input type="checkbox" checked="checked" id="username" /><span>√</span>    </div>    <lable for="username">我是选中状态</lable>  </div>    <div class="wrapper">    <div class="box">      <input type="checkbox"  id="userpwd" /><span>√</span>    </div>    <label for="userpwd">我是未选中状态</label>  </div></form> 

Simulates a selected and unselected style.

The rendering without style is as follows,

The final effect after adding style is as follows.

Example: :checked state selector simulates radio button style.

<meta charset="utf-8"><style type="text/css">form {    border: 1px solid #ccc;    padding: 20px;    width: 300px;    margin: 30px auto;}.wrapper {    margin-bottom: 10px;}.box {    display: inline-block;    width: 30px;    height: 30px;    margin-right: 10px;    position: relative;    background: orange;    vertical-align: middle;    border-radius: 100%;}.box input {    opacity: 0;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 10;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/}.box span {    display: block;    width: 10px;    height: 10px;    border-radius: 100%;    position: absolute;    background: #fff;    top: 50%;    left: 50%;    margin: -5px 0  0 -5px;    z-index: 1;}input[type="radio"] + span {    opacity: 0;}input[type="radio"]:checked + span {    opacity: 1;}</style><form action="#"><div class="wrapper"><div class="box"><input type="radio" checked="checked" id="male" name="gender"/><span></span></div><label for="male">男</label></div><div class="wrapper"><div class="box"><input type="radio" id="female" name="gender"/><span></span></div><label for="female">女</label></div></form>

4. [::selection] Selector

sets the selected text style. For details, see CSS3::selection selector. Used well, it can also lead to unexpected success.

5. [:read-only] selector

:read-only selector is used to specify the style of elements in a read-only state. To put it simply, it means setting the element with "readonly" = readonly.

Example:

<!DOCTYPE HTML><meta charset="utf-8"/><style type="text/css">form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;}form > input {  margin-bottom: 10px;}input[type="text"] {    border: 1px solid orange;    padding: 5px;    background: #fff;    border-radius: 5px;}input[type="text"]:-moz-read-only {    border-color: #ccc;}input[type="text"]:read-only {    border-color: #ccc;}</style><form>姓名:<input type="text"name="fullname"/><br />国籍:<input type="text"name="country"value="China"readonly="readonly"/><br /><input type="submit"value="提交"/></form></body></html>

6. [:read-write] selector

has [:read] -only], and the opposite [:read-write] has a very clear meaning, that is, can be read and written, and the element can be styled. I think this selector may be just a fill-in, added to make the CSS3 selector a system, because it is readable and writable by default.

If you change the style a little in the above example: add the :read-write selector to input[type="text"]

input[type="text"]:read-write{    border: 1px solid orange;    padding: 5px;    background: #fff;    border-radius: 5px;}

The effect is as follows:

That is, you cannot add styles such as rounded corners to the nationality input box.

7. [::before] and [::after]

MOOC puts it this way:

The two pseudo-elements::before and::after are mainly used to add content to the front of the element. Or insert content later and use it with "content". The most commonly used scenario is to clear floats.

In fact, ::before and ::after have quite a lot of content. To learn more, please refer to the usage of ::before and ::after pseudo-elements.

PS: Every time I see idols like MOOC, they are so amazing. Dongdong has a touch of melancholy. Have you ever thought about the feelings of the girls?

Starof, the author of this article, because knowledge itself is changing, the author is also constantly learning and growing, and the content of the article is also updated from time to time. In order to avoid misleading readers and to facilitate tracing the source, please indicate when reprinting Source: If you have any questions, please feel free to discuss with me and make progress together.