简体   繁体   中英

Style all buttons except 2 buttons

.button , button{
border:solid black 2px !important;
}

With this code I have provided a frame for all buttons. However, I don't want to have a frame for the buttons "searchsubmit" and "single_add_to_cart_button". How do I do that ?

It is not that difficult.

There are two ways ways for that first is simpler and is recommended!

.noBorderButton{
      border : none !important;
}

and in your HTML you can add the class "noBorderButton" to your buttons.

<button class="noBorderButton">Search Submit</button>

PS Make sure to follow the CSS overwriting rules ie write the .noBorderButton CSS below the Button CSS.

EDIT : As I can see Martin suggesting this will change the user agent styling and button won't have any Border at all, and probably you don't want that either!!

You may go with the Following Option

button:not(.noBorderButton){
border:solid black 2px !important;
}

And yes again add the class 'noBorderButton' to those buttons in which you don't want these styling to work.

simply do:

Class:
.searchsubmit {border:none;!important} and .single_add_to_cart_button {border:none;!important}

Id:
#searchsubmit {border:none;!important} and #single_add_to_cart_button {border:none;!important}

It can be cleaner but this works to... :)

I believe those are your class names. If yes, then you can add border: none !important.

button.searchsubmit, 
button.single_add_to_cart_button {
   border: none !important;
}

you can use the not css selector

.button , button:not(.searchsubmit):not(.single_add_to_cart_button) {
   border:solid black 2px !important;
}

It's pretty simple, you can use :not selector to ignore those two button having your specific classes :

.button , button , button:not('single_add_to_cart_button') , button:not('searchsubmit') {
border:solid black 2px !important;
}

or you can do it from a reverse way which i do not recommend, its like you set a border to a button and then you unset it :

button.searchsubmit , button.single_add_to_cart_button {
   border: none !important;
}

(ofcourse the style above must be after your .button and button style in-order to override it)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM